详解jQuery事件

事件是 Web 应用中不可或缺的一个东西，用户在应用中执行一个操作的时候，比如鼠标单击时要触发执行一些事情，就可以给该事件绑定一个事件处理程序(event handler)。使用 jQuery 的 .on() 方法可以为选中的元素绑定任意的 DOM 事件，并添加事件处理程序。假设有如下 HTML 结构：

 


 Click me!
 

传递数据

可以给事件处理程序传入数据，该数据保存在事件对象的 data 属性中：

$('#example').on('click', 1, function(e) {
 console.log(e.data); // 1
});

为了区别事件代理，传递的数据貌似不能是一个直接的字符串，不过可以传入一个对象来代替：

$('#example').on('click', {str: 'xxx'}, function(e) {
 console.log(e.data.str); // xxx
});

自定义事件

除了浏览器的标准事件，还可以绑定自定义事件的事件处理程序，其中事件名可以使用任意命名：

$('#example').on('sleep', function() {
 alert('Sleeping!');
});

标准事件的事件处理程序可以通过浏览器原生事件去触发，而自定义事件的事件处理程序则可以使用 jQuery 的 .trigger() 方法触发，使用方式如下，传入需要触发的事件名称作为参数：

$('#example').trigger('sleep');

可以通过给 trigger() 方法传入更多参数来给事件处理程序传递数据，数据会作为回调函数的参数进行传递：

$('#example').on('sleep', function(e, time) {
 alert('Sleep at' + time);
});
$('#example').trigger('sleep', '22:00');

应用示例，使用自定义事件编写异步代码：

$('#example').on('done', doHandler);
function foo() {
 setTimeout(function() {
 // foo 函数的逻辑比较耗时，所以使用 setTimeout 函数排队
 $('#example').trigger('done'); // 执行完了，通知一声
 }, 1000);
}

foo 函数执行完成后，就会触发元素的 done 事件，前面绑定的 doHandler 函数就会开始执行。

事件命名空间

无论是浏览器标准事件或是自定义事件都可以添加命名空间，添加在事件名称后面，通过一个 . 号分隔，像这样 click.widget，也可以给一个事件添加多个命名空间 click.widget.common，使用命名空间可以更有针对性地触发或者移除某个特定的事件处理程序。比如一个元素同时绑定了 click.tab 和 click.collapse 两个点击事件，当使用 .trigger() 方法触发 click.collapse 事件时会执行该事件的事件处理程序，而 click.tab 的事件处理程序则不会执行。

移除绑定事件

使用 .off() 方法可以移除绑定的事件处理程序，有下面几种情况：

• 不指定任何参数，移除该元素上绑定的所有事件处理程序。
• 指定事件名，如 .off('click') 表示移除该元素上绑定的所有单击事件处理程序。
• 指定事件处理程序，如 .off('click', clickHandler) 表示仅移除该事件处理程序（是的，匿名函数不能这样移除）。
• 指定事件命名空间，如 .off('.widget') 表示移除该命名空间下所有的事件处理程序（比如绑定的 click.widget 和 change.widget 事件处理程序都会被移除），该方式可以用于移除某个组件绑定的各种事件。
• 指定事件代理的元素，如 $(document).off('click', '#example')，可以移除为该元素绑定的事件代理处理程序。

一次性事件

使用 .one() 方法绑定的事件处理程序只会触发执行一次，一次后自动移除：

$('#example').one('click', clickHandler);

事件节流

浏览器中有几个事件会频繁触发，比如 scroll, resize, mousemove 等，那么给这些事件绑定的事件处理程序也会跟着频繁地执行，导致页面反应迟钝，要解决这个问题，需要节流事件，减少事件处理程序执行的频率：

var timer = 0; // 使用一个定时器
$(window).on('scroll', function() {
 if (!timer) {
 timer = setTimeout(function() {
 // Do something
 timer = 0;
 }, 200);
 }
});

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！