事件委托(js实现)
1.事件委托的作用
事件委托的意义:,事件就是onclick,onmouseover,onmouseout等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。利用冒泡的原理,把事件加到父级上,触发执行效果。
也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。
2.下面是网上择抄的一个例子:
<ul id="ul">
<li>aaaaaaaa</li>
<li>bbbbbbbb</li>
<li>cccccccc</li>
</ul>
js部分:
window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li"); for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover = function(){
this.style.background = "red";
}
aLi[i].onmouseout = function(){
this.style.background = "";
}
}
}
这样我们就可以做到li上面添加鼠标事件。
但是如果说我们可能有很多个li用for循环的话就比较影响性能。
下面我们可以用事件委托的方式来实现这样的效果。html不变
首先看看在jquery中的写法:
$('#ul').on('mouseover','li',function(){
$(this).css('background','red');
});
$('#ul').on('mouseout','li',function(){
$(this).css('background','');
});
jquery的写法非常简单,快捷,但是jquery写多了,就快连js也忘了怎么写。
window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li"); /*
这里要用到事件源:event 对象,事件源,不管在哪个事件中,只要你操作的那个元素就是事件源。
ie:window.event.srcElement
标准下:event.target
nodeName:找到元素的标签名
*/
oUl.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//alert(target.innerHTML);
alert(target.nodeName);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "red";
}
}
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//alert(target.innerHTML);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "";
}
}
}
3.事件委托说到底是用了target来添加事件处理,但是由于ie永远不按标准走,上面已经对其做了兼容,
ie:window.event.srcElement
标准下:event.target 在这里先说说target与currentTarget的区别
标准情况下,target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级)。
网上的一个例子:
<div id="outer" style="background:#099">
click outer
<p id="inner" style="background:#9C0">click inner</p>
<br>
</div> <script type="text/javascript">
function G(id){
return document.getElementById(id);
}
function addEvent(obj, ev, handler){
if(window.attachEvent){
obj.attachEvent("on" + ev, handler);
}else if(window.addEventListener){
obj.addEventListener(ev, handler, false);
}
}
function test(e){
alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);
}
var outer = G("outer");
var inner = G("inner");
//addEvent(inner, "click", test);
addEvent(outer, "click", test);
</script>
上面的示例中,当在outer上点击时,e.target与e.currentTarget是一样的,都是div;当在inner上点击时,e.target是p,而e.currentTarget则是div。
如果在ie中,window.event.srcElement就等于标准下的e.target
那么e.currentTarget呢?IE9之前都不兼容currentTarget
下面是两种兼容方法
1)修改this指针,并在IE下将ad1赋值给event.currentTarget
<a id="ad1" data-at="1" href="">
<span id="span1">demo</span>
</a>
<script>
var ad1 = document.getElementById("ad1");
var addListener = (function() {
if(document.attachEvent) {
return function(element, event, handler) {
element.attachEvent('on' + event, function() {
var event = window.event;
event.currentTarget = element;
event.target = event.srcElement;
handler.call(element, event);
});
};
}
else {
return function(element, event, handler) {
element.addEventListener(event, handler, false);
};
}
}()); addListener(ad1,"click",function(e){
var currentTarget = e.currentTarget;
var at =0;
if(currentTarget.dataset){
at = currentTarget.dataset.at
}else{
at = currentTarget.getAttribute("data-at");
}
alert(at)
})
</script>
2)向上寻找父元素
<script>
var ad1 = document.getElementById("ad1");
ad1.onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.tagName.toLowerCase != "a"){
target = target.parentNode
}
alert(target.id) // ad1
var at = 0;
if(target.dataset){
at = target.dataset.at
}else{
at = target.getAttribute("data-at");
}
}
</script>
事件委托(js实现)的更多相关文章
- js事件冒泡和事件委托
js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...
- js动态添加事件-事件委托
作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...
- 怎么理解js中的事件委托
怎么理解js中的事件委托 时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/119000 ...
- js事件委托
什么是事件委托:通俗的讲,onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也 ...
- JS事件对象与事件委托
事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...
- js中的事件委托或是事件代理详解
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
- js性能优化-事件委托
js性能优化-事件委托 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少 ...
- javascript 事件委托,jq,js模拟事件
<!DOCTYPE> <html> <head> <title></title> <script src="Scripts/ ...
- JS事件委托学习(转)
JS 事件委托就是利用冒泡原理,把事件加到父级上触发,执行效果. 好处: 1.提高性能 2.新添加的元素还会有之前的事件 <</</</</li></ ...
- JS事件委托的原理和应用
js事件委托也叫事件代理,实际上事件委托就是通过事件冒泡实现的,所谓的事件就是onclick,onmouseover,ondown等等,那么委托呢?委托就是指本来这个事是要你自己做的,但是你却让别人帮 ...
随机推荐
- pro2
#include<iostream> double sum(int n,dounle[]) { double array[100]; foe(int i=0;i<100;i++; ...
- Tempdb--Row version
Trigger:在SQL SERVER 2005之前,触发器需要使用日志来获取DELETED AND INSERTED的数据,因此会打乱日志顺序写的模式,造成磁盘压力,在SQL Server2005 ...
- python, C++, C# 计算速度简单对比
有个简单的运算, ; ; ; i < n ; i ++) { ; j < n; j ++) { lResult += (ulong) ( i * j ); } } return lResu ...
- .NET Framework 历史版本(2017年)
.NET简介 这个平台相信我们都知道,不过随着技术发展,现在的.NET平台也今非昔比. .NET平台类似Java平台,是微软于2000年推出的Windows操作系统的应用软件开发框架,发展至今形成巨大 ...
- 对java位运算之异或运算的一点记录
首先,异或运算是,每个位上的数不同为1,相同为0. 其次,对两个数值变量的值进行三次异或运算就等于是交换了两个变量的值. 例如: int a = 4; int b = 10; a = a ^ b; b ...
- 接口和抽象类的使用场景以及多类继承存在的问题(c#)
我们首先来看下抽象class能发挥优势的使用场景. 假设有一个Cars基类,具体型号的Car继承该基类,并实现自己独有的属性或方法. public class Cars { public string ...
- WPF XamlObjectWriterException:无法创建未知类型"Grid"
using (FileStream fs = new FileStream("UnitFile/Report2.xaml", FileMode.Open)) { rootEleme ...
- django系列8.1--django的中间件01 自定义中间件的5个方法
一.Django中的中间件 Django中间件定义: Middleware is a framework of hooks into Django's request/response process ...
- python中的内置函数,递归,递归文件显示(二),二分法
1.部分内置函数 repr()显示出字符串的官方表示形式,返回一个对象的string形式 # repr 就是原封不动的输出, 引号和转义字符都不起作用 print(repr('大家好,\n \t我叫周 ...
- 【OCP题库-12c】最新CUUG OCP 071考试题库(69题)
69.(31-1)choose the best answer: Evaluate the following query: SELECT INTERVAL '300' MONTH, INTERVAL ...