JQuery事件委托

JavaScript(jQuery)中的事件委托

一:什么是事件委托?

    事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件。

二:为什么要用事件委托?

    1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能。为什么呢?因为,每个事件处理函数都是对象,对象会占用内存,内存中的对象越多,性能就越差。此外,必须事先指定所有的事件处理程序而导致的DOM访问次数,会延迟整个页面的交互就绪时间。

    2.对有很多个数据的表格以及很长的列表逐个添加事件,简直就是噩梦。所以事件委托,能极大地提高页面的运行性能,减少开发人员的工作量。

三:JavaScript中的例子

      我们以下面的HTML代码为例,用事件委托的方式实现当鼠标单击某个li元素的时候,li元素的背景变成红色。


 下面是JavaScript代码:


单击列表4,实现效果:




 三:jQuery中的例子


    jQuery中的事件委托方式比较丰富,就以同样的例子来说:


   1、用on方法,代码如下:

1

2.用delegate()方法,代码如下:


on()方法和delegate()方法对于事件委托的写法很像。并且执行事件委托的时候只有子元素(本文中的li)会触发事件,而代为执行的父元素(本文中为ul)不会触发事件,所以我们不需要盘判断触发事件的元素节点名,这一点明显优于原生的JavaScript。

3.用bind()方法,代码如下:


bind()方法同原生的JavaScript实现方法一样,当父元素代子元素执行事件时,父元素也会触发事件,所以我们需要判断一下触发事件的元素名。此外,用bind()方法给元素绑定事件的时候要注意,它只能给已经存在DOM元素添加事件,不能给未来存在DOM

元素添加添加事件。如果要频繁地添加DOM元素,并且给新添加的DOM元素绑定事件的话,用live(),delegate(),on()等方法。鉴于jQuery从1.7之后就不推荐live()和delegate()方法了,所以大家还是使用on()方法吧。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,875评论 1 11
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 5,216评论 0 8
  • http://www.jb51.net/article/57827.htm bind: 3.0- 表格中要绑定单击...
    beforerFE阅读 5,147评论 0 1
  • $HTML, HTTP,web综合问题 1、前端需要注意哪些SEO 2、 的title和alt有什么区别 3、HT...
    Hebborn_hb阅读 10,103评论 0 20
  • 你走的第二十七天,还有86天。 我和你在一起,又分离。 我爱你!
    rainll阅读 1,040评论 0 0