需要注意的blog:http://blog.csdn.net/majian_1987/article/details/8591385

一篇博客看懂  http://blog.csdn.net/majian_1987/article/details/8591385

事件代理中明白ul li中的index。

var targetNode = document.getElementById('list').getElementsByTagName('li');
var i = ;
var targetLength = targetNode.length;
for (i; i < targetLength; i++) {
targetNode[i].onclick = (function(num) {
return function() {
alert(num);
}
})(i);
}
window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
oUl.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
var that=target;
var index;
for(var i=;i<aLi.length;i++)if(aLi[i]===target)index=i;
if(index>=)alert('我的下标是第'+index+'个');
target.style.background = "red";
} }

}

我以前只知道jquery的detegate方法可以给已知元素和未知元素添加事件,现在看看on这个方法的时候,也就知道了。

$("ul").delegate("li", "click", function () {
alert($(this).text());
});

on的参数和delete的参数是相反的。

$('#data-list').on('click', 'li', function() {
$('#data-show').html($(this).html());
});

live已经放弃了

bind与delegate 与on

bind绑定就是50的话,绑定50个,不能对未来的元素绑定,所以和普通的click方法是一样的。

delegate的话,可以对未来的元素绑定,亦可以代理。

on更全面一些。

只能说这是一篇很好的文章:http://www.jb51.net/article/67166.htm

js原生的事件代理:

http://www.oschina.net/question/54100_25614

https://www.douban.com/note/466024519/?type=like

自己第一次写原生的事件代理:

<ul id='list'>
<li>first</li>
<li>second</li>
<li>third</li>
<li>four</li>
<li>five</li>
</ul>
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);//DOM2.0
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);//IE5+
return r;
}
else {
elm['on' + evType] = fn;//DOM 0
}
}
var ss = $('#list')[];
var box =function(){
alert(this.innerHTML);
}
addEvent(ss,'click',box);

不过这个chrome和IE下this只的ul。

这个原生的你看下:http://www.xiaobai8.com/Blog/464.html

上边的这个还是没有解决在父类代理的情况下,怎么获取li的索引的问题 ,获取当前li的this的问题。

下面自己写的这个解决了获得this的问题,但是没有解决索引的问题。我们可以又获取到的dom对象变为jquey对象获取索引方法。

function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);//DOM2.0
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);//IE5+
return r;
}
else {
elm['on' + evType] = fn;//DOM 0
}
}
var ss = $('#list')[];
var box =function(e){
var ev= e || window.e;
var target=ev.target||ev.srcElement;//事件源
var $li=target.nodeName.toLowerCase();
if($li==="li"){
alert(target.innerHTML);
};
}
addEvent(ss,'click',box);

js事件代理的更多相关文章

  1. js事件代理(委托)

    JavaScript事件代理(委托)一般用于以下情况: 1. 事件注册在祖先级元素上,代理其子级元素.可以减少事件注册数量,节约内存开销,提高性能. 2. 对js动态添加的子元素可自动绑定事件. 之前 ...

  2. JS 事件代理

    事件处理器:onclick.onmouseover.... 在传统的事件处理中,你需要为每一个元素添加或者是删除事件处理器.然而,事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越 ...

  3. 封装Js事件代理方法

    // 封装事件代理 function delegateEvent(element, tag, event, listener) { // 判断是否支持addEventlistener if(eleme ...

  4. 关于JS事件冒泡与JS事件代理(事件委托)

    连接:https://blog.csdn.net/supercoooooder/article/details/52190100 核心代码: <ul id="parentUl" ...

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

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

  6. JS中事件代理与委托

    在javasript中delegate这个词经常出现,看字面的意思,代理.委托.那么它究竟在什么样的情况下使用?它的原理又是什么?在各种框架中,也经常能看到delegate相关的接口.这些接口又有什么 ...

  7. JS中的事件委托(事件代理)

    一步一步来说说事件委托(或者有的资料叫事件代理) js中事件冒泡我们知道,子元素身上的事件会冒泡到父元素身上. 事件代理就是,本来加在子元素身上的事件,加在了其父级身上. 那就产生了问题:父级那么多子 ...

  8. [转] js中的事件委托或是事件代理详解

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

  9. 【转】js中的事件委托或是事件代理详解

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

随机推荐

  1. Warning:mailcious javascript detected on this domain来由

    http://www.thenewslens.com/post/144232/ 这是原文介绍,可能国内要用网络加速器才能查看. 以下是国外的一些文档介绍:Cyberspace Administrati ...

  2. CEPH块设备创建及快照

    1.创建image rbd create foo --size 1024 {--image-format 2}//创建一个名为foo的image,大小为1024M,当需要克隆快照时,需要添加大括号中的 ...

  3. 【Android Demo】获取指定网页的页面源代码

    1.直接上效果图 2.代码 主要就是工具类HtmlService.java: import java.io.ByteArrayOutputStream; import java.io.InputStr ...

  4. C#委托与C语言函数指针及函数指针数组

    C#委托与C语言函数指针及函数指针数组 在使用C#时总会为委托而感到疑惑,但现在总新温习了一遍C语言后,才真正理解的委托. 其实委托就类似于C/C++里的函数指针,在函数传参时传递的是函数指针,在调用 ...

  5. UESTC 288 青蛙的约会 扩展GCD

    设两只青蛙跳了t步,则此时A的坐标:x+mt,B的坐标:y+nt.要使的他们在同一点,则要满足: x+mt - (y+nt) = kL (p是整数) 化成: (n-m)t + kL = x-y (L ...

  6. HDU 2082 找单词 --生成函数

    跟上题是一个思路:http://www.cnblogs.com/whatbeg/p/3728545.html 只不过是上一题的扩展. 代码: #include <iostream> #in ...

  7. Android Handler处理机制 ( 三 ) ——Handler,Message,Looper,MessageQueue

    在android中提供了一种异步回调机制Handler,使用它,我们可以在完成一个很长时间的任务后做出相应的通知 handler基本使用: 在主线程中,使用handler很简单,new一个Handle ...

  8. 30Springd的包扫描——<context:component-scan base-package=” ”/>

    在context中配置 如:在base-package指明一个包: <context:component-scan base-package="cn.edu.dao"/> ...

  9. 3110 PHP常见问题

    1.中文显示 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&g ...

  10. Mac 使用SSH远程登录

    一.打开ssh Mac Terminal是自带SSH的,可以用whereis来看看: $ whereis ssh 但是在现有进程中找不到ssh对应的进程: $ ps aux | grep ssh ap ...