Rumah > hujung hadapan web > tutorial js > JS事件委托实例详解

JS事件委托实例详解

小云云
Lepaskan: 2018-03-13 14:59:37
asal
2112 orang telah melayarinya

本文主要和大家分享JS事件委托实例详解,先看看解析,事件委托:也称事件代理 就是利用冒泡的原理 把加事件加到父级上,触发执行效果。

  首先呢,你一定写过这样的程序,有一个列表,当鼠标移入每个li,背景颜色变红,于是我们写出了这样的代 码:

(我给的代码一般都写的重点代码,html大家可以自行写哈。)

window.onload =  oUl = document.getElementById('ull' aLi = document.getElementsByTagName('li'); 
    ( i =0;i < aLi.length;i++=
Salin selepas log masuk

当然这样一看代码也没什么问题,通过循环给每个li加事件,但想一想如果我们有很多个li,是不是要加很多次事件,这样其实是非常耗性能的。那么我们会想,能不能只加一个事件就能实现呢。当然是能的,不然我就不会在这扯了。

     那就是通过冒泡原理进行事件委托,我们可以把事件只加给父级oUL,这样不管移入哪个li,都会触发父级的移入事件,(对冒泡不太理解的,可以参考我的JS冒泡的文章),但这个时候也有个问题,因为我的需求是,让对应的li变颜色,不是让整个列表变,它怎么知道我鼠标移入的是哪个LI,这个时候万能的事件对象中的一个属性就要出场了,就是事件源 (不管事件绑定在那个元素中 都指的是实际触发事件的那个的目标),就是能获取到你当前鼠标所在的LI,

不过这个有兼容性问题, IE和标准下不同,标准指的就是比较新版本的那些浏览器了

IE:window.event.srcElement
标准:event.target

所以需要做下兼容,也很简单。

下面看下整体代码:

window.onload = function(){ 
    var oUl = document.getElementById('ull');     var aLi = document.getElementsByTagName('li');

  oUl.onmouseover = function(ev){ 
     var event = ev||window.event;  // 获取event对象     var target = ev.target || ev.srcElement; // 获取触发事件的目标对象    
     if(target.nodeName.toLowerCase() == 'li'){  //判断目标对象是不是li
         target.style.background = 'red';
     }

  }
代码中加了一个标签名的判断,主要原因是如果不加判断,当你鼠标移入到父级oUL上面的时候,整个列表就会变红,这不是我们想要的结果,所以要判断一下。
Salin selepas log masuk
target.nodeName 弹出的名字是大写的,所以需要转换大小写再比较。
Salin selepas log masuk

 

整个需求这样就完成了,而且当列表很多的时候大大的提高了性能。

其实事件委托还有第二个优点:就是新添加的元素还会有之前的事件

假定我们又有一个需求,点击某个按钮,可以在列表中再创建一个li,这个时候一般方法,因为新创建的li没有加事件,所以是不具备移入变红的功能的,但是用事件委托的方法,新的li,同样有这个事件。原理也很容易相同,因为事件是加在父亲上面的,父亲在,事件在,大家可以自己测试一下。

相关推荐:

细说什么是js中的事件冒泡和事件捕获以及事件委托

事件捕获和冒泡以及事件委托对比分析

Javascript事件委托相关详解

Atas ialah kandungan terperinci JS事件委托实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan