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实现)的更多相关文章

  1. js事件冒泡和事件委托

    js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...

  2. js动态添加事件-事件委托

    作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...

  3. 怎么理解js中的事件委托

    怎么理解js中的事件委托 时间 2015-01-15 00:59:59  SegmentFault 原文  http://segmentfault.com/blog/sunchengli/119000 ...

  4. js事件委托

    什么是事件委托:通俗的讲,onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也 ...

  5. JS事件对象与事件委托

    事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...

  6. js中的事件委托或是事件代理详解

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  7. js性能优化-事件委托

    js性能优化-事件委托 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少 ...

  8. javascript 事件委托,jq,js模拟事件

    <!DOCTYPE> <html> <head> <title></title> <script src="Scripts/ ...

  9. JS事件委托学习(转)

    JS 事件委托就是利用冒泡原理,把事件加到父级上触发,执行效果. 好处: 1.提高性能 2.新添加的元素还会有之前的事件     <</</</</li></ ...

  10. JS事件委托的原理和应用

    js事件委托也叫事件代理,实际上事件委托就是通过事件冒泡实现的,所谓的事件就是onclick,onmouseover,ondown等等,那么委托呢?委托就是指本来这个事是要你自己做的,但是你却让别人帮 ...

随机推荐

  1. handsontable-utilities

    搜索值 鼠标右键 讲了四个功能:1.row header是否可以右键(rowheader:true):2.删除右键列表的某些值(通过数组定义):3.自定义右键列表和功能(callback,item两个 ...

  2. handsontable-cell features

    数据验证:在columns中设置validator,进行同步或异步验证,还可添加beforeValidate, afterValidate函数,allowInvalid:true可以不用验证 var ...

  3. Android-Sqlite-OOP方式操作增删改查

    之前写的数据库增删改查,是使用SQL语句来实现的,Google 就为Android开发人员考虑,就算不会SQL语句也能实现增删改查,所以就有了OOP面向对象的增删改查方式 其实这种OOP面向对象的增删 ...

  4. Python学习-10.Python函数定义(二)

    在Python中定义函数的时候,可以使用参数默认值的方式定义函数 例子: def welcome(who,state='is',action='talking'): print(who,state,a ...

  5. Kubernetes 自动伸缩 auto-scaling

    使用 Kubernetes 的客户能够迅速响应终端用户的请求,交付软件也比以往更快.但是,当你的服务增长速度比预期更快时,计算资源不够时,该怎么处理呢? 此时可以很自豪地说: Kubernetes 1 ...

  6. C# 多线程task

    1.异步和多线程的区别?没什么太大区别.异步是目的,使用多线程实现.想想AJAX异步加载,不就是不想让浏览器界面卡住嘛,所以在程序中对于某些单独的操作,比如写日志,我们不想等它完成后再执行其它操作(因 ...

  7. JS中移除非数字,最多保留一位小数

    //去除非数字 var clearNoNum = function (item) { if (item!=null && item!=undefined) { //先把非数字的都替换掉 ...

  8. Mycat SqlServer 技术栈 实现 主从分离

    先说明下版本:SqlServer2008R2 + MyCat 1.6 现在主从分离 一主一从 用的是 代码 写死的方式  转换下思路 一主两从 或者多从 怎么实现 负载均衡 或者 按权重调用相应库呢 ...

  9. python--类与类之间的关系,(魔术方法)特殊成员方法

    1.依赖关系 类与类之间存在这几种关系:1.依赖关系 2.关联关系 3.组合关系 4.聚合关系 5.继承关系 6.实现关系 我们来设置下面两个场景 玩电脑和打僵尸 class Person: def ...

  10. 使用apache-fileupload处理文件上传与上传多个文件 二(60)

    一 使用apache-fileupload处理文件上传 框架:是指将用户经常处理的业务进行一个代码封装.让用户可以方便的调用. 目前文件上传的(框架)组件: Apache----fileupload ...