【JavaScript系列】动态绑定事件方法：(1)jquery的on方法；(2)html元素绑定

young.li 发布于2019-08-26 10:20 / 3352人阅读

摘要：提示如需移除事件处理程序，请使用方法。说明和绑定的点击事件被的事件覆盖。分析不同的绑定方式执行顺序属性元素事件事件。元素绑定事件删除按钮。属性绑定事件动态绑定事件方法的方法的属性绑定。

一、动态监听加载对象

当使用js或jQuery动态创建元素(例如append，appendChildren)，再用on(事件, function(){...})或addEventListener监听事件时，事件并不会触发，因为传统的$(".selector").click()只能监听html初始的对象，对于动态加载的操作，需要在加载后给他的操作行为绑定方法。

所以，我们可以使用jQuery的on()事件来获取未加载页面的内容，并为它添加一个或多个事件处理程序。

二、jQuery.on()用法 1、定义和用法

（1）on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

（2）自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

（3）注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

（4）提示：如需移除事件处理程序，请使用 off() 方法。

（5）提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

2、语法

$(selector).on(event,childSelector,data,function)

三、事件绑定方式执行顺序：html属性 > dom元素（onclick方法）

先看例子1

点击这个段落。

输出结果：

7、段落被点击了。

说明：4和6绑定的点击事件被7的事件覆盖。

分析：

（1）不同绑定事件方式的执行顺序：html属性 > dom元素属性

（2）同一种绑定事件方式顺序：写在前面 > 写在后面

说明：实际项目中，jq和原生js不要混着用。

四、事件绑定方式执行顺序：html属性 > dom元素（onclick方法） > DOM level 2 事件

我们看个栗子

点击这个段落。

输出结果：

7、段落被点击了。
1、段落被点击了。
2、段落被点击了。
3、段落被点击了。
5、段落被点击了。
8、段落被点击了。
9、段落被点击了。

说明：通过addEventListener方式绑定事件（jq的on方法，js的click方法）是可以绑定多个事件。

分析：

（1）不同的绑定方式执行顺序：html属性 > dom元素（DOM level 0 事件） > DOM level 2 事件。

（2）DOM level 2 事件中：谁先绑定谁先执行。

（3）jq的on，js的click，addEventListener，可以绑定多个事件。

说明：实际项目中，jq和原生js不要混着用。

五、动态绑定：jq的on方法+html的属性onclick方法

实用jq或者原生js创建元素（比如：append，appendChild，insertBefoe等），实用on(event, fun)或者addEventListener等传统的监听事件，事件不会触发。原因：不能这些方法只能监听到html初始化的对象，后续动态添加的方法需要寻找其他绑定方法。jq的on()方法+html的属性onclick方法。

我们发现，点击删除的时候，输出

5、删除按钮。
4、删除按钮。
说明：

1、执行顺序：html的属性绑定比jq的on方法快。（html属性绑定>DOM level 2 事件）

2、动态绑定事件方法：（1）jq的on方法；（2）html的属性绑定。

说明：实际项目中，jq和原生js不要混着用。

六、总结

上面例子的jq是1.10的版本。

1、事件的绑定方法：（1）html属性绑定（比如：onclick），（2）dom元素属性（比如onclick），也叫DOM level 0 事件，（3）原生的addEventListener和jq的on和jq的click（DOM level 2 事件）。

2、绑定方法的执行顺序：html属性 > dom元素属性 > DOM level 2 事件

3、同一种绑定事件方式顺序：写在前面 > 写在后面。

4、html属性和dom元素属性绑定方法最终只有最后一个事件会执行。

GPU云服务器云服务器 jquery绑定事件on jquery_on()方法 jquery预绑定事件 jquery绑定hover事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105999.html

前端基础入门六(JQuery进阶)

摘要：获取元素距离的位置返回值为对象获取相对于其最近的有定位的父元素的位置。不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。注册简单事件表示给绑定事件，并且由自己触发，不支持动态绑定。 jQuery特殊属性操作 val方法 val方法用于设置和获取表单元素的值，例如input、textarea的值 //设置值 $(#name).val(张三); //获取值 $(#name)...

fnngj 2019-08-23 14:53 评论0 收藏0
jQuery笔记总结篇

摘要：希望在做所有事情之前，操作文档。不受层级限制子选择器在给定的父元素下匹配所有子元素。相邻选择器匹配所有紧接在元素后的元素。判断当前对象中的某个元素是否包含指定类名，包含返回，不包含返回下标过滤器精确选出指定下标元素获取第个元素。原文链接 http://blog.poetries.top/2016... 首先，来了解一下jQuery学习的整体思路 showImg(https://seg...

NoraXie 2019-08-22 10:39 评论0 收藏0
JQuery基础修炼-事件篇

摘要：目录第章事件介绍第章鼠标事件第章表单事件第章键盘事件第章事件的绑定和解绑第章事件对象的使用第章自定义事件与事件用交互操作中，最简单直接就是点击操作。提供了两个方法一个是方法用于监听用户单击操作，另一个方法是方法用于监听用户双击操作。目录第1章事件介绍第2章鼠标事件第3章表单事件第4章键盘事件第5章事件的绑定和解绑第6章事件对象的使用第7章自定义事件 cli...

yy13818512006 2019-08-02 15:55 评论0 收藏0
JQuery基础修炼-事件篇

摘要：目录第章事件介绍第章鼠标事件第章表单事件第章键盘事件第章事件的绑定和解绑第章事件对象的使用第章自定义事件与事件用交互操作中，最简单直接就是点击操作。提供了两个方法一个是方法用于监听用户单击操作，另一个方法是方法用于监听用户双击操作。目录第1章事件介绍第2章鼠标事件第3章表单事件第4章键盘事件第5章事件的绑定和解绑第6章事件对象的使用第7章自定义事件 cli...

hikui 2019-08-19 18:25 评论0 收藏0
jQuery入门笔记之（三）事件详解

摘要：可以传递三个参数表示一个或多个事件类型，比如。表示绑定到指定元素的处理函数。我们称它为简写事件。必须在中，并且使用作为事件触发元素，不然无效。和表示鼠标移入和移出的时候触发。按下返回按下返回和分别表示光标激活和丢失，事件触发时机是当前元素。转自个人博客在JavaScript 有一个非常重要的功能，就是事件驱动。如果你的网页需要与用户进行交互的话，就不可能不用到事件。它在页面完全加...

GitCafe 2019-08-19 17:17 评论0 收藏0