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

如下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. cxf整合spring错误为:cvc-complex-type.2.4.c

    cxf整合spring,报错信息如下: Multiple annotations found at this line:- cvc-complex-type.2.4.c: The matching w ...

  2. Linux中的定时任务at、crontab

    at at命令可以用来在某一时段执行一次任务,只会执行一次,不会重复执行. at命令是由atd服务来控制的,使用之前先查看atd服务是否正常: $ /etc/init.d/atd status * a ...

  3. 设计一个程序能够将某一个目录下面的所有文件名打印出来---File类的使用

    ,设计一个程序能够将某一个目录下面的所有文件名打印出来 运用到的方法有:返回一个字符串数组,这些字符串指定此抽象路径名表示的目录中的文件和目录:list()           测试此抽象路径名表示的 ...

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

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

  5. asp .net 模板引擎 使用 Razor 生成html静态页面

    刚开始不是理解 写完之后 觉得还蛮简单的 分为这几个步骤 1.获取页面模板Html 2.获取数据 3.解析模板和数据,生成静态页Html代码 4.生成静态文件 模板形式是mvc的模式,会mvc 看一下 ...

  6. throws Exception方法异常处理机制

    public class T4 { private String sex; public String getSex() { return sex; } public void setSex(Stri ...

  7. 怎样通过js 取消input域的hidden属性使其变的可见

    document.getElementById(ID).setAttribute("hidden",false);厉害了 我的哥!

  8. postman 第1节 安装启动(转)

    安装: 1.mac app安装 浏览器访问https://www.getpostman.com/apps,选择Get the Mac App,下载安装即可 2.chrome app安装 浏览器访问ht ...

  9. Nginx keepalived实现高可用负载均衡详细配置步骤

    Keepalived是一个免费开源的,用C编写的类似于layer3, 4 & 7交换机制软件,具备我们平时说的第3层.第4层和第7层交换机的功能.主要提供loadbalancing(负载均衡) ...

  10. Nand Flash驱动(实现初始化以及读操作)

    简单制作一个Nand Flash驱动(只需要初始化Flash以及读Flash) 打开2440芯片手册,K9F2G08U0M芯片手册(因为2440中Nand Flash是用的256MB(2Gb)内存,8 ...