JQuery事件绑定

（1）on方法

on方法是jQuery事件绑定的统一接口。后面介绍的事件绑定的那些简便方法，其实都是on方法的简写形式。

$('li').on('click', function (e){

  console.log($(this).text());

});

on方法接受两个参数，第一个是事件名称，第二个是回调函数。

注意，在回调函数内部，this关键字指的是发生该事件的DOM对象。为了使用jQuery提供的方法，必须将DOM对象转为jQuery对象，因此写成$(this)。

on方法允许一次为多个事件指定同样的回调函数。

$('input[type="text"]').on('focus blur', function (){

  console.log('focus or blur');

});

on方法还可以为当前元素的某一个子元素，添加回调函数。

$('ul').on('click', 'li', function (e){

  console.log(this);

});

子元素事件冒泡触发父元素事件，关于on方法的详细介绍：http://www.365mini.com/page/jquery-on.htm

on方法还允许向回调函数传入数据。

$("ul" ).on("click", {name: "张三"}, function (event){

    console.log(event.data.name);

});

当回调函数被触发后，它们的参数通常是一个事件对象event。

$(document).on('click', function (e){

    // ...

});

上面代码的回调函数的参数e，就代表事件对象event。

event对象有以下属性：

type：事件类型，比如click。
which：触发该事件的鼠标按钮或键盘的键。
target：事件发生的初始对象。
data：传入事件对象的数据。
pageX：事件发生时，鼠标位置的水平坐标（相对于页面左上角）。
pageY：事件发生时，鼠标位置的垂直坐标（相对于页面左上角）。

event对象有以下方法：

preventDefault：取消浏览器默认行为。
stopPropagation：阻止事件向上层元素传播。

（2）one（）方法

one方法指定一次性的回调函数，即这个函数只能运行一次。这对提交表单很有用。

$("#button").one( "click", function() { return false; } );

one方法本质上是回调函数运行一次，即解除对事件的监听。

document.getElementById("#button").addEventListener("click", handler);

function handler(e) {

    e.target.removeEventListener(e.type, arguments.callee);

    return false;

}

（3）绑定事件的简便方法

click
keydown
keypress
keyup
mouseover
mouseout
mouseenter
mouseleave
scroll
focus
blur
resize
hover

$('li').click(function (e){

  console.log($(this).text());

});

JQuery事件触发和移除

（1）trigger（）事件触发方法

trigger方法用于触发回调函数，它的参数就是事件的名称。

$('li').trigger('click')

上面代码触发li元素的click事件回调函数。与那些简便方法一样，trigger方法只触发回调函数，而不会引发浏览器的默认行为。

（2）简单版事件触发方法

$('li').click()

$('li').keydown()

下面是一个捕捉用户按下escape键的函数

$(document).keyup(function(e) {

  if (e.keyCode == 27) {

    $('body').toggleClass('show-nav');

    // $('body').removeClass('show-nav');

  }

});

（3）off方法，事件方法移除

off方法用于移除事件的回调函数。

$('li').off('click')

上面代码移除li元素所有的click事件回调函数。

参考

【1】阮一峰， http://javascript.ruanyifeng.com/jquery/basic.html#toc4

巴特西

JQuery系列（2） - 事件处理

JQuery事件绑定

JQuery事件触发和移除

参考

最新文章

热门文章