常见场景:页面有多个相同的按钮需要绑定同样的事件逻辑。

如下HTML,实现:点击每个按钮,当它的 data-id不为null的时候输出它的data-id(实际业务中会有更复杂的逻辑)

    <ul id="parent">
<li class="btn" data-id="1">按鈕1</li>
<li class="btn" data-id="2">按鈕2</li>
<li class="btn" data-id="null">按鈕3</li>
<li class="btn" data-id="3">按鈕4</li>
<li class="btn" data-id="null">按鈕5</li>
</ul>

实现方案一:(缺点 1 for循环影响性能,2每次循环都会在内部创建一个事件,3 如果 li 是动态追加的会导致事件失效。)

var btns=document.getElementsByClassName("btn");//扩展 可以有多种获取DOM方法
for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){
var id=this.getAttribute("data-id");
if(id!="null"){
console.log(id);
}
}
}

实现方案二:(解决了方案一种的2,3缺点,但是还有for循环!IOS下事件委托失效解决方案)

var btns=document.getElementsByClassName("btn");
function handleClick(){
var id=this.getAttribute("data-id");
if(id!="null"){
console.log(id);
}
}
for(var i=0;i<btns.length;i++){
btns[i].addEventListener("click",handleClick,false);
}

实现方案三:(完美解决方案1种的所有缺点)

涉及知识点:addEventListener,event

var parent=document.getElementById("parent");
function handleClick(){
var e=window.event||arguments[0];
var target=e.srcElement||e.target;
if(target.nodeName.toLowerCase() == 'li'){
var id=target.getAttribute("data-id");
if(id!="null"){
console.log(id);
}
}
}
parent.addEventListener("click",handleClick,false);

方案三的升级版:注册绑定事件方便复用

// 1、通用綁定事件
function bind(elem,eventType,callback){
if(elem.addEventListener){
elem.addEventListener(eventType,callback,false);
}else{
elem.attachEvent("on"+eventType,function(){
callback.call(elem);
});
}
} var parent=document.getElementById("parent");
function handleClick(){
var e=window.event||arguments[0];
var target=e.srcElement||e.target;
if(target.nodeName.toLowerCase() == 'li'){
var id=target.getAttribute("data-id");
if(id!="null"){
console.log(id);
}
}
}
bind(parent,"click",handleClick);

JS中如何巧妙的用事件委托的更多相关文章

  1. js事件、Js中的for循环和事件的关系、this

    一.js事件  1.事件 用户在网页中所触发的行为 鼠标滑动种类很多,键盘.表单特列: 点击:onclick 鼠标进入:onmouseenter 鼠标离开:onmouseleave 鼠标悬浮:onmo ...

  2. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  3. JS中的DOM操作和事件

    [DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...

  4. js中一次性注册多个事件

    在js中,如果想一次性给一个控件或者标签初测多个事件的方法: 假如有个<input>标签: <input id=”inputValue” value=”www.baidu.com”/ ...

  5. js中按下回车触发事件

    方法一:document.onkeydown = function (e) { // 回车提交表单// 兼容FF和IE和Opera var theEvent = window.event || e; ...

  6. js中容易被忽视的事件问题总结

    一:跨平台事件 什么叫跨平台事件?即在不同的浏览器上执行同一事件,所使用的方法不同. 什么是EventUtil对象?有什么作用?即将所有与事件相关的函数,融合在一起的一个容器,方便管理事件对象,它没有 ...

  7. Js中的onblur和onfocus事件

    html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作.本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用. 一. ...

  8. Js中的onblur和onfocus事件应用介绍

    html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用 html页面中,诸如按钮.文本框等可视元素都具有拥有和失 ...

  9. js中for循环点击事件(闭包)

    <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...

随机推荐

  1. java基础(数据类型,运算符)

    java基础之数据类型(变量) java中存在的数据有常量和变量 常量:在程序执行的过程中其值不可以发生改变 常量的分类 字面值常量 字面值常量的分类 常量 描述 字符串常量 用双引号括起来的内容 整 ...

  2. Python 文档 涉及词汇

    Python  is an interpreted, interactive, object-oriented programming language that combines remarkabl ...

  3. oracle撤销表空间和回滚段

    /* 撤销表空间 */ 通过使用撤销技术,能够为Oracle数据库提供以下功能: * 使用ROLLBACK语句撤销事务 * 进行数据库恢复 * 提供数据的读一致性 Oracle强烈建议DBA在Orac ...

  4. Java中"==" 和 equals 的区别

    "=="比较的是地址值 equals 比较的是内容 看例子能够更加清晰的理解 eg: String s1="java",s2="java"; ...

  5. 以打印日志为荣之logging模块详细使用

    啄木鸟社区里的Pythonic八荣八耻有一条: 以打印日志为荣 , 以单步跟踪为耻; 很多程序都有记录日志的需求,并且日志中包含的信息既有正常的程序访问日志,还可能有错误.警告等信息输出,python ...

  6. hdu1695 GCD(莫比乌斯入门题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1695 题意: 给出n.m.k ,求出1<=x<=n, 1<=y<=m 且gcd ...

  7. PKIX path building failed

    百度这个问题,很多人都说是证书问题.至于是什么证书呢?搞了老半天原来是 /Java/jre/lib/security/cacerts不正确.换了个jdk版本就解决这个问题了. 可靠的jdk1.8下载链 ...

  8. C# checked和unchecked详解

    1.对基元类型执行的许多算术运算都可能造成溢出,有如下代码: Byte b=100; b=(Byte)(b+200); 简单的解读上面的代码: 第一步,将所有的操作数都扩大至32位或者64位(根据操作 ...

  9. 10个经典的Java面试题集合(转载)

    1.Java的HashMap是如何工作的? HashMap是一个针对数据结构的键值,每个键都会有相应的值,关键是识别这样的值. HashMap 基于 hashing 原理,我们通过 put ()和 g ...

  10. 慎用kill -9,kill -15的作用

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt334 Perl语言专家Randal Schwartz在一篇短文里这样写: n ...