首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

详解jQuery事件

Posted in Javascript onJanuary 13, 2017

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
</head>
<body>
 <button id="example" type="button">Click me!</button>
 <script src="http://code.jquery.com/jquery-1.11.2.js"></script>
 <script>
 // code here
 </script>
</body>
</html>

在 <script> 元素内添加如下代码，其中，事件名称是 .on() 方法的第一个参数，事件处理程序的回调函数作为第二个参数：

$('#example').on('click', function(e) {
 alert('Clicked!');
});

这样当该按钮元素触发鼠标单击(click)事件的时候就会执行绑定的事件处理程序，弹出一个对话框！回调函数的第一个参数 e 为事件对象，通过该对象可以得到很多事件相关的信息，比如事件类型，事件发生的坐标点等以及一些事件方法。回调函数除了可以像这样使用一个匿名函数，也可以使用一个变量标识的函数引用：

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

同时绑定多个事件

另外，jQuery 还支持使用空格分隔多个事件名称来同时绑定多个事件，比如 mouseenter mouseleave，同时给元素绑定鼠标移入和鼠标移出事件。可以通过事件对象的 type 属性来判断发生的是哪个事件：

$('#example').on('mouseenter mouseleave', function(e) {
 if (e.type === 'mouseenter') {
 // mouseenter
 } else {
 // mouseleave
 }
});

除了上面这种方法外，还可以传入一个键值对来绑定多个事件：

$('#example').on({
 mouseleave: function() {
 // mouseleave
 },
 mouseenter: function() {
 // mouseenter
 }
});

事件上下文

同时给多个元素绑定事件处理程序的时候可以使用事件执行的上下文来简化代码：

$('li').on('click', function() {
 var $this = $(this);
 $this.addClass('active');
});

上下文关键字 this 引用的是原生 DOM 元素，所以如果要使用 jQuery 的方法需要先包装成 jQuery 对象。

事件委托

事件会经过一个捕捉和冒泡的过程，为了兼容，jQuery 只使用了事件的冒泡，即目标元素触发事件后会逐级冒泡直到顶级元素节点。利用事件的冒泡可以将目标元素的事件处理程序绑定到其祖先元素上统一处理，可以给 .on() 方法传入一个可选的选择器字符串作为第二个参数：

$(document).on('click', '#example', clickHandler);

此时表示将 id="example" 的元素的鼠标单击事件委托绑定到了 document 元素上，当目标元素（即 id="example" 的元素）触发鼠标单击事件的时候，该事件就会冒泡到 document 元素上，从而触发事件处理程序。使用事件委托的好处是如果页面上有很多列表，每个列表都去绑定一个鼠标单击事件，那么就会有很多事件处理程序，会对性能造成影响。利用事件冒泡的原则，将事件处理程序绑定到目标元素的父元素或者祖先元素上，可以明显地减少事件处理程序的数量，改善性能：

$('ul').on('click', 'li', clickHandler);

使用事件委托另外一个好处是那些动态添加的 <li> 元素也会具有事件处理程序。个人比较侵向于将事件都委托到 document 元素上方便管理，而且也不用等到 DOM 准备就绪：

$(document)
 .on('click', 'selector-1', clickHandler)
 .on('focusin', 'selector-2', focusHandler);

在 IE8 中一些事件比如 submit 或者 change 是不会冒泡的，但是 jQuery 对此做了处理，因此也可以放心使用。像 focus 和 blur 事件则推荐使用相应的 focusin 和 focusout 事件来代替。对于 mouseover 和 mouseout 事件，为了避免事件冒泡造成的不良影响，推荐使用 mouseenter 和 mouseleave 来代替。

阻止事件冒泡与默认行为

调用事件对象的 .stopPropagation() 方法可以阻止事件冒泡：

$('#example').on('click', function(e) {
 e.stopPropagation();
});

这样当单击事件在该元素上发生的时候就不会冒泡了。jQuery 还有另外一个方法 .stopImmediatePropagation() 调用后事件冒泡被阻止同时该元素上后面绑定的事件处理程序也不会执行了：

$('#example').on('click', function() {
 alert('Clicked-1!'); // 会执行
}).on('click', function(e) {
 e.stopImmediatePropagation();
}).on('click', function() {
 alert('Clicked-2!'); // 不会执行
});

调用事件对象的 .preventDefault() 方法可以阻止事件的默认行为：

$('#example').on('click', function(e) {
 e.preventDefault();
});

在事件处理程序中直接返回 false 可以同时取消冒泡和阻止默认行为：

$('#example').on('click', function() {
 return false;
});

相当于同时调用了事件对象上面的 .stopPropagation() 和 .preventDefault() 方法。如果没有其它操作，还可以进一步简写为 $('#example').on('click', false);。

应用示例，点击按钮显示弹出层，点击文档其它地方隐藏：

$(document)
 .on('click', '#example', popup.show)
 .on('click', popup.hide);

由于事件冒泡，所以该弹出层并不会显示出来，需要在事件处理程序中阻止事件冒泡：

$(document)
 .on('click', '#example', function(e) {
 e.stopPropagation();
 popup.show();
 }).on('click', popup.hide);

获取原生事件对象

事件处理程序中引用的事件对象实际上是经过 jQuery 包装过的，有时候需要使用浏览器原生的事件对象，要得到浏览器原生的事件对象可以通过事件对象的 originalEvent 属性获取。例如，使用拖拽事件的时候就会用到原生的事件对象：

$('#example').on('dragstart', function(e) {
 var originalEvent = e.originalEvent;
 originalEvent.dataTransfer.effectAllowed = 'move';
 originalEvent.dataTransfer.setData('text/plain', $(this).text());
 originalEvent.dataTransfer.setData('text/html', $(this).html());
 originalEvent.dataTransfer.setDragImage('/images/drag.png', -10, -10);
});

传递数据

可以给事件处理程序传入数据，该数据保存在事件对象的 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);
 }
});

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

详解jQuery事件

- Author -

by.Genesis

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
xmlplus组件设计系列之网格（DataGrid）(10）
May 05 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 #Javascript
JavaScript利用闭包实现模块化
Jan 13 #Javascript
Vue.js基础知识小结
Jan 13 #Javascript
canvas实现流星雨的背景效果
Jan 13 #Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 #Javascript
原生js实现手风琴功能（支持横纵向调用）
Jan 13 #Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 #Javascript
logging(1) 加密(1) openpyxl(1) hmac(1) hashlib(1) Pickle(1) 解密(1) 类加载器(1) requests(1) apt命令(1)
You might like
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
PHP中比较时间大小实例
2014/08/21 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
php创建多级目录的方法
2015/03/24 PHP
php发送邮件的问题详解
2015/06/22 PHP
详解php协程知识点
2018/09/21 PHP
实例讲解PHP表单处理
2019/02/15 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
Python FTP操作类代码分享
2014/05/13 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
python实现自动登录
2018/09/17 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
瑜伽灵感珠宝：Satya Jewelry
2018/01/06 全球购物
员工合理化建议书
2014/05/19 职场文书
数控机床专业自荐信
2014/05/19 职场文书
优秀班组长事迹
2014/05/31 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
旅游活动总结
2014/08/27 职场文书
单身证明范本
2015/06/15 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
HttpClient实现表单提交上传文件
2022/08/14 Java/Android