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