jQuery 的事件绑定和事件委托(事件代理)

Dax
• 阅读 1533

简单以jQuery的 on() 方法为例说明:

API:

1 .on( events [, selector ] [, data ][, handler])  

如果on()方法的selector 参数为空,事件处理程序就被称为直接绑定。每当在被绑定元素上(如下例中被绑定的document元素,译者注)发生事件时,无论这个事件发生在这个元素上还是从内层元素经冒泡而来,该处理程序都会被调用。

并且,如果on()方法的selector 参数为空,它与bind()方法相同——只能绑定页面已有元素的事件。

事件绑定:

代码:

这是一个div
  表现:

事件委托:

如果on()方法的selector 参数不为空,事件处理程序就被称为委托。当事件直接发生在被绑定的元素上(如下例中绑定到document上,译者注)时,该程序不会被调用,而只有当事件发生在与选择器匹配的内部元素上(如下例中click事件发生在button上,译者注)时,才会调用该程序。

jQuery的事件委托是将事件从事件的发生者(即event target)一直向上冒泡到绑定了事件处理程序的元素上(例如从最内层元素向上冒泡到最外层元素),并为冒泡“沿路”过程中匹配的所有选择器执行事件处理程序。

这是一个div
  表现:

事件处理程序只会被绑定到当前已被选定的元素上(如上例中的document元素上,译者注),这些元素在调用on()方法时必须已经存在——同bind()。

为了确保这些元素已经存在并能被选中,请将代码放置到标签之前或者在$(function(){ ... })内执行事件绑定。或者,使用事件委托来绑定事件处理程序

事件委托的优点:

1.能处理来自内层子元素的事件,且子元素可以是稍后时间生成在dom中的;

2.通过选择一个在绑定事件委托处理程序时,已经存在的元素,进而绑定它下面的其他子元素的事件;使用事件委托来避免需要频繁的添加和删除事件处理程序的操作

3.除了可以处理尚未创建的内层子元素的事件,事件委托的另一个优点是:当需要监听很多元素时,事件委托的性能更好

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
放学路上 放学路上
2年前
微信小程序事件传参与vue传参的不同
1、vue点击事件传参(day)的写法:2、微信小程序写法(1)事件传参(2)获取参数dayprocess(e)console.log(e.currentTarget.dataset.day)3、总结:微信小程序不支持事件传参,可以通过把参数绑定在元素上,通过currentTarget.dataset获取参数。
Stella981 Stella981
3年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。0.元素定位方法主要有:id定位:find\_element\_by\_id('')name定位:find\_element\_by\_name('')class定位:find\_element\_by\_class\_name(''
Stella981 Stella981
3年前
Jquery使用经验总结
注明:以下jquery经验版本均自jquery1.7版本。一.jQuery事件总结1.1ready事件和window.onload事件$(document).ready();和window.onload 的方法有相似功能,但是又有区别。加载时机
可莉 可莉
3年前
06. react 初次见面
    React元素的事件处理和DOM元素的很相似。但是有一点语法上的不同:React事件绑定属性的命名采用驼峰式写法,而不是小写。如果采用JSX的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)    例如,传统的HTML:<buttononclick"activateLas
Stella981 Stella981
3年前
JQuery中对option的添加、删除、取值
jQuery获取Select选择的Text和Value:1\.$("select\_id").change(function(){//code...});  //为Select添加事件,当选择其中一项时触发2\.varcheckText$("select\_id").find("option:selected").text();  
Stella981 Stella981
3年前
JavaScript事件详解
1.事件传播机制:事件冒泡,事件捕获。2.注册事件处理程序方式:设置html标签属性为事件处理程序,文档元素的事件处理程序属性,名字由“on”后面跟着事件名组成,例如:onclick,onmouseover,用法如下1<d
Stella981 Stella981
3年前
Noark入门之异步事件
引入异步事件主要是为了各模块的解耦,每当完成一个动作时,向系统发布一个事件,由关心的模块自己监听处理,可选择同步处理,异步处理,延迟处理。何时发布事件,当其他模块关心此动作时<br比如获得道具时,任务系统模块要判定完成进度,BI模块需要上报等等都可以监听此事件,已达模块解耦0x00事件源一个实现xyz.noark.core.event