JavaScript(jQuery)中的事件委托

转载 2018年04月15日 12:45:52

一:什么是事件委托?

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

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

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

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

三:JavaScript中的例子

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

复制代码
1  <ul id = "lists">
2          <li>列表1</li>
3          <li>列表2</li>
4          <li>列表3</li>
5          <li>列表4</li>
6          <li>列表5</li>
7          <li>列表6</li>
8  </ul>
复制代码

 下面是JavaScript代码:

复制代码
 1         var lists = document.getElementById("lists");
 2 
 3         lists.addEventListener("click",function(event){
 4 
 5             var target = event.target;
 6             //防止父元素ul也触发事件
 7             if(target.nodeName == "LI"){
 8                target.style.backgroundColor = "red";
 9             }
10         })
复制代码

单击列表4,实现效果:

未单击之前单击列表4之后

 三:jQuery中的例子

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

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

复制代码
1  $(function(){
2             $("#lists").on("click","li",function(event){
3                 var target = $(event.target);
4                 target.css("background-color","red");
5             })
6         })
复制代码

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

复制代码
1         $(function(){
2             $("#lists").delegate("li","click",function(event){
3                 var target = $(event.target);
4                 target.css("background-color","red");
5             })
6         })
复制代码

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

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

复制代码
1        $(function(){
2             $("#lists").bind("click","li",function(event){
3                 var target = $(event.target);
4                 if(target.prop("nodeName")=="LI"){
5                 target.css("background-color","red");}
6             })
7         })
复制代码

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

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

 

javascript事件委托理解,jQuery .on()方法一步到位实现事件委托

本篇文章借鉴自:博客园文章,只为自己巩固下事件委托方面的知识 概述: 什么叫事件委托?他还有一个名字叫做事件代理,(时间代理 === 事件委托,现在才知道这两个是一个意思) 高程3上讲:事件委托即是利...
  • orange0111
  • orange0111
  • 2016-11-13 22:52:36
  • 1279

JS和JQuery中的事件委托 学习笔记

事件委托其实并不是一个很高级的技巧,比如在一个页面里面,当只存在两个按钮的时候,可能你给按钮添加监听是这样的:(本文不考虑浏览器兼容性,关于事件的兼容性可参考前面的学习笔记) 按钮1 ...
  • u011366705
  • u011366705
  • 2015-07-23 01:06:24
  • 2717

浅谈事件委托和this的用法

浅谈事件委托和this用法详解事件委托 事件委托是一种由其它元素而非事件目标元素来响应事件产生的行为的思想。比如用ul元素来处理其子元素li的事件。有多种方法来处理事件委托。标准方法来源于原生浏览器...
  • hengs_dream
  • hengs_dream
  • 2016-07-30 22:29:10
  • 1135

jquery的事件委托

111111 111111 $("ul").on("click","a",function(e){ console.log(e.currentTarget) }) 事...
  • THEANARKH
  • THEANARKH
  • 2016-04-23 02:19:25
  • 4788

事件委托-tab切换

HTML结构代码: 首页 关于 我的 联系 div1 div2 div3 div4 CSS样式代码: *{ margin...
  • qq_35051603
  • qq_35051603
  • 2017-06-19 16:35:45
  • 224

jQuery的事件委托方法on、live、delegate之间有什么区别?

jQuery的事件委托方法on、live、delegate之间有什么区别? 首先什么是事件委派? 事件委派(委托): 事件委托就是利用冒泡的原理,把事件加到父元素或祖先元素上,...
  • xuxu_qkz
  • xuxu_qkz
  • 2017-10-25 16:48:53
  • 1605

使用 jquery 事件委托的 on 方法

使用 jquery 事件委托的 on 方法
  • creatorYC
  • creatorYC
  • 2015-12-04 16:52:34
  • 695

JavaScript面试问题:事件委托和this

JavaScript不仅门槛低,而且是一门有趣、功能强大和非常重要的语言。各行各业的人发现自己最混乱的选择是JavaSscript编程语言。由于有着各种各样的背景,所以不是每个人都对JavaScrip...
  • u011043843
  • u011043843
  • 2015-06-08 09:35:57
  • 1663

jquery绑定事件优化网页性能(使用on进行事件委托)

自身认知限制,在之前做项目使用jquery框架的时候会直接使用$(obj).click(function(){})(click可以换成其他的事件)为目标对象绑定事件,并没有觉得有什么不妥。今天看了一篇...
  • ernijie
  • ernijie
  • 2016-06-14 13:57:45
  • 2058

事件委托和jQuery事件绑定

事件委托 什么是事件委托?用现实中的理解就是:100个学生在同一天的中午都要收取快递,这100个学生难道都会在门口等着么?不会,他们会委托门卫代收,然后门卫再逐个将包裹交到学生手中。在jQuery中...
  • fly_zxy
  • fly_zxy
  • 2016-02-17 20:01:44
  • 2424
收藏助手
不良信息举报
您举报文章:JavaScript(jQuery)中的事件委托
举报原因:
原因补充:

(最多只允许输入30个字)