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.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
随机推荐
- Openwrt LuCI模块练习详细步骤
前言 又到了成胖子^_^每周一博的时间了.最近在学习openwrt luci方面的知识,为了贯穿整个知识体系,练习题目为: 通过页面配置周期性地往/tmp/addtest文件写入内容和时间戳 1.在w ...
- 解决在iOS8环境下,当用户关闭定位服务总开关时,无法将APP定位子选项加入定位权限列表的问题
关键点:- (void)locationManager:(CLLocationManager *)manager didChangeAuthorizationStatus:(CLAuthorizati ...
- HTTP详解1-工作原理
1. HTTP简介 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议.它可以使浏览器更加高效,使网络传输减少. ...
- openfire+asmack搭建的安卓即时通讯(二) 15.4.9
上期没有放成果图呢!忘了=-=,这就是上次的成果图,textview里面会显示登陆的名字(这个是默认管理员帐号=-=) 好吧,登陆了服务器我们就有了交互的功能啦可以说是前进了一大步呢!下面能我们就要试 ...
- NOIP2008 普及组T4 立体图 解题报告-S.B.S.(施工未完成)
题目描述 小渊是个聪明的孩子,他经常会给周围的小朋友们将写自己认为有趣的内容.最近,他准备给小朋友们讲解立体图,请你帮他画出立体图. 小渊有一块面积为m*n的矩形区域,上面有m*n个边长为1的格子,每 ...
- 利用HttpListener创建简单的HTTP服务
using System; using System.Collections.Generic; using System.IO; using System.IO.Compression; using ...
- linux下正向代理/反向代理/透明代理使用说明
代理服务技术对于网站架构部署时非常重要的,一般实现代理技术的方式就是在服务器上安装代理服务软件,让其成为一个代理服务器,从而实现代理技术.常用的代理技术分为正向代理.反向代理和透明代理.以下就是针对这 ...
- Adivisor
1.Adivisor是一种特殊的Aspect,Advisor代表spring中的Aspect 2.区别:advisor只持有一个Pointcut和一个advice,而aspect可以多个pointcu ...
- 04SpringMvc_映射器_BeanNameUrlHanderMapping
这篇文章我们讲的是映射器,映射器的作用是什么样的请求交给Action,如果我们没有在xml配置文件中进行配置,默认的就是BeanNameUrlHanderMapping. 我们讲一个案例增加用户的案例 ...
- Mac 使用SSH远程登录
一.打开ssh Mac Terminal是自带SSH的,可以用whereis来看看: $ whereis ssh 但是在现有进程中找不到ssh对应的进程: $ ps aux | grep ssh ap ...