需要注意的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. 烂泥:CentOS安装及配置TFTP服务器

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 为什么要学习有关TFTP服务器的安装及配置呢?主要是为了后续学习有关linux系统的无人值守安装做准备. TFTP简单文件传输协议,使用UDP的69端口 ...

  2. IE6-9中tbody的innerHTML不能赋值bug

    IE6-IE9中tbody的innerHTML不能赋值,重现代码如下 <!DOCTYPE html> <html> <head> <meta charset= ...

  3. Linux ethtool命令

    一.简介 ethtool 是用于查询及设置网卡参数的命令. 二.常用选项 ethtool ethx //查询ethx网口基本设置,其中 x 是对应网卡的编号,如eth0.eth1等等 ethtool ...

  4. Geoserver发布WMS服务出错分析

    使用Geoserver发布一个空间表,在图层预览的过程中没有任何问题,但是当我根据这个空间表传创建视图再发布wms服务,访问时就会报错,错误信息如下: Caused by: java.sql.SQLE ...

  5. 该怎么快速完成ZBrush中脸部的雕刻

    骨骼,是一门基础艺术,几百年来一直为伟大的艺术大师所研究,它曾经,也将一直是创作现实且可信角色的关键,提高骨骼知识更将大大提高雕刻技能. 若有疑问可直接访问:http://www.zbrushcn.c ...

  6. Rem实现自适应初体验

    第一次做移动端的页面,遇到的第一个问题就是移动端的轮播图.其实轮播图的插件有很多,但是完全满足需求的并不容易找. 需求: 1.实现基本的触屏轮播图效果 2.传入非标准比例的图片,可以自动平铺(有时候图 ...

  7. 【转】UVALive 5964 LCM Extreme --欧拉函数

    题目大意:求lcm(1,2)+lcm(1,3)+lcm(2,3)+....+lcm(1,n)+....+lcm(n-2,n)+lcm(n-1,n)解法:设sum(n)为sum(lcm(i,j))(1& ...

  8. 【转】${sessionScope.user}的使用方法

    EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${ ...

  9. mac和centos下git安装

    mac下面的git安装,这篇文章写的很详细了http://www.cnblogs.com/ccdev/archive/2012/09/12/2682098.html 谈谈centos下的安装.我用的是 ...

  10. java 14 -10 Calendar类以及练习

    Calendar:它为特定瞬间与一组诸如 YEAR.MONTH.DAY_OF_MONTH.HOUR 等 日历字段之间的转换提供了一些方法, 并为操作日历字段(例如获得下星期的日期)提供了一些方法. 1 ...