js事件代理
需要注意的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事件代理的更多相关文章
- js事件代理(委托)
JavaScript事件代理(委托)一般用于以下情况: 1. 事件注册在祖先级元素上,代理其子级元素.可以减少事件注册数量,节约内存开销,提高性能. 2. 对js动态添加的子元素可自动绑定事件. 之前 ...
- JS 事件代理
事件处理器:onclick.onmouseover.... 在传统的事件处理中,你需要为每一个元素添加或者是删除事件处理器.然而,事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越 ...
- 封装Js事件代理方法
// 封装事件代理 function delegateEvent(element, tag, event, listener) { // 判断是否支持addEventlistener if(eleme ...
- 关于JS事件冒泡与JS事件代理(事件委托)
连接:https://blog.csdn.net/supercoooooder/article/details/52190100 核心代码: <ul id="parentUl" ...
- js中的事件委托或是事件代理详解
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
- JS中事件代理与委托
在javasript中delegate这个词经常出现,看字面的意思,代理.委托.那么它究竟在什么样的情况下使用?它的原理又是什么?在各种框架中,也经常能看到delegate相关的接口.这些接口又有什么 ...
- JS中的事件委托(事件代理)
一步一步来说说事件委托(或者有的资料叫事件代理) js中事件冒泡我们知道,子元素身上的事件会冒泡到父元素身上. 事件代理就是,本来加在子元素身上的事件,加在了其父级身上. 那就产生了问题:父级那么多子 ...
- [转] js中的事件委托或是事件代理详解
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
- 【转】js中的事件委托或是事件代理详解
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
随机推荐
- hdu 2089 不要62--数位dp入门
不要62 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Problem Des ...
- [转]Flash ActionScript2.0面向对象游戏开发-推箱子
本文转自:http://www.alixixi.com/Dev/W3C/Flash/2007/2007070868666.html 概述: Flash ActionScript2.0是一种面向对向的编 ...
- 分享十个JavaScript在线调试工具
测试Javascript可能是网页开发中最让人忧伤的工作.这里我找一些比较好的工具来帮助大家进行测试工作.这10款是我精选的基于浏览器的JavaScript在线调试工具,希望你们对你们有用. 1.Op ...
- C#委托与C语言函数指针及函数指针数组
C#委托与C语言函数指针及函数指针数组 在使用C#时总会为委托而感到疑惑,但现在总新温习了一遍C语言后,才真正理解的委托. 其实委托就类似于C/C++里的函数指针,在函数传参时传递的是函数指针,在调用 ...
- Java虚拟机详解02----JVM内存结构
主要内容如下: JVM启动流程 JVM基本结构 内存模型 编译和解释运行的概念 一.JVM启动流程: JVM启动时,是由java命令/javaw命令来启动的. 二.JVM基本结构: JVM基本结构图: ...
- Java虚拟机详解01----初识JVM
主要内容如下: JVM的概念 JVM发展历史 JVM种类 Java语言规范 JVM规范 一.JVM的概念: JVM: Java Virtual Machine,意为Java虚拟机. 虚拟机: 指通过软 ...
- uGUI练习(四) Light UI
练习目标 在我之前的文章 Unity 2D Sprite Lighting ,讲到在2D Sprite中可以使用灯光,非常高兴的是,在Unity的新UI系统中我们也可以使用灯光 步骤 1.创建一个Pa ...
- Visio使用遇到的问题
1.UML Background Add-on --------------------------- 此 UML 形状所在的绘图页不是 UML 模型图的一部分. 该形状设计用于利用 UML 模型图模 ...
- lcx转发 【解决内网没法链接3389 的问题】
要求我自己在外网 然后监听1111端口,将1111端口数据流量转发至2222端口 被入侵主机上 将本地的2222端[愿3389 主机修改了远程连接的端口]口流量转发至外网ip的1111端口 2222为 ...
- RecyclerView (一) 基础知识
RecyclerView是什么? RecyclerView是一种新的视图组,目标是为任何基于适配器的视图提供相似的渲染方式.它被作为ListView和GridView控件的继承者,在最新的suppor ...