一、前言

  说实话,真问我什么是事件委托,我肯定gg,还好查了一下,原来就是我之前练习过的DOM2级事件的应用。

二、什么是事件委托?

  事件委托就是当事件触发时,把要做的事委托给父元素(或父元素的父元素)来处理。也就是:利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作。使用事件委托技术能让你避免对特定的每个节点添加事件监听器。

三、事件委托作用

  1.减少事件注册,节省内存

    -table可以代理所有td的click事件

    -ul可以代理所有li的click事件

  2.能为之后新增的DOM元素自动添加事件(事件委托给了父级,只要是子级,就能代理)

    -新增的li不用绑定事件

    -删除li时,不需要解绑

案例演示:

场景1:当多个li标签需要添加 mouseover 变色时

效果如下图:

ul{
width: 200px;
line-height: 30px;
}
li.checked{
background-color: aqua;
}
<h2>去哪儿开房?</h2>
<ul>
<li>你家</li>
<li>我家</li>
<li>如家</li>
</ul>

不用事件委托需要遍历添加事件

window.onload = function(){
let oLi = document.getElementsByTagName('li');
for(let i=0,len=oLi.length;i<len;i++){   // 遍历所有li
oLi[i].onmouseover = function () {
this.classList.add('checked')
}
oLi[i].onmouseout = function () {
this.classList.remove('checked')
}
}
}

使用事件委托

window.onload = function(){
let oUl = document.getElementsByTagName('ul')[0]; //事件委托给li的父级
function beenChecked(e) { //e是event事件
e.target.classList.add('checked') //e.target是事件源
}
function notChecked(e) {
e.target.classList.remove('checked')
}
oUl.addEventListener('mouseover',beenChecked) // 第三参数默认false,事件冒泡
oUl.addEventListener('mouseout',notChecked)
}

场景2:新增的li标签,自动添加该事件

<button id="btn">新增一条li</button>
<h2>去哪儿开房?</h2>
<ul>
<li>你家</li>
<li>我家</li>
<li>如家</li>
</ul> <script>
window.onload = function(){
let btn = document.getElementById('btn')
let oUl = document.getElementsByTagName('ul')[0];
btn.onclick=function () {
let oLi = document.createElement('li');
oLi.innerHTML = '全家'
oUl.appendChild(oLi); //新增li
}
function beenChecked(e) {
e.target.classList.add('checked')
}
function notChecked(e) {
e.target.classList.remove('checked')
}
oUl.addEventListener('mouseover',beenChecked) // 默认事件冒泡
oUl.addEventListener('mouseout',notChecked)
}
</script>

四、缺点

  1.事件的委托基于冒泡,对于onfocus和onblur事件不支持。

  2.层级过多,冒泡过程中,可能会被某层阻止掉(建议就近委托)

  只要事件不支持冒泡或者途中有 event.stopPropagation() 等,那么委托就会失败,所以并不适用直接在document上进行委托。

JS事件委托(事件代理,dom2级事件)的更多相关文章

  1. dom0级事件和dom2级事件

    dom0级事件 <a href="#" id="hash" onclick="fn();fn1();"> <button ...

  2. 测试DOM0级事件和DOM2级事件的堆叠

    1. 问题 如果大家看过北风网CJ讲师的Javascript视频教程,就可以看到其封装了一个很强的事件添加和删除函数,如下所示 function addEvent(obj, evtype, fn) { ...

  3. DOM0、DOM2级事件

    JavaScript DOM0.DOM2级事件 1.DOM0级事件:on+事件类型 在html行内直接绑定,也就是通过行内js绑定的例如<span onclick="alert('1' ...

  4. 关于DOM事件流、DOM0级事件与DOM2级事件

    一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...

  5. DOM1级问题与DOM2级事件

    前几天有小伙伴问过我一个问题,为什么有DOM 0级事件以及DOM2级事件,但是却没有DOM1级事件呢?那我们今天就来说一说DOM的级别问题. 同时推荐伙伴们可以看看尚学堂有关JavaScript BO ...

  6. 【20190226】JavaScript-知识点记录:dom0级事件,dom2级事件

    DOM0级事件处理程序: 通过将元素的事件处理程序属性(如onclick)的值设置为一个函数来指定事件处理程序的方法称为DOM0级方法,它被认为是元素的方法,这时候的事件处理程序是在元素的作用域中运行 ...

  7. 关于DOM2级事件的事件捕获和事件冒泡

    DOM2级事件中addEventListener的执行机制,多个addEventListener同时添加时的执行先后规律: W3C的DOM事件触发分为三个阶段:①.事件捕获阶段,即由最顶层元素(一般是 ...

  8. 2015-03-12——简析DOM2级事件

    DOM2级事件 事件的几种类型:对象事件,鼠标事件,键盘事件,表单事件,W3CDOM事件,以及针对浏览器的事件. 对象事件:window对象,也是javascript对象.load  适用于windo ...

  9. 事件流程以及dom2级事件绑定

    事件流程分为三个阶段:捕获阶段.目标阶段.冒泡阶段. 捕获阶段:事件从最顶层元素开始执行,一层层往下,直到精确元素. 目标阶段:事件在精确元素上执行. 冒泡阶段:事件从精确元素开始执行,一层层往上,直 ...

随机推荐

  1. django post get

    GET请求和POST请求 GET请求: 1. 浏览器请求一个页面 2. 搜索引擎检索关键字的时候 POST请求: 1. 浏览器向服务端提交数据,比如登录/注册等 判断提交方式: if request. ...

  2. 一、dynamic

    一.dynamic使用: 从一直使用动态类型写接口 返回动态类型出现情况 1.返回接口每次不知道包含那些列(实体类解决) 2.操作的数据类型 不可知(参与数值计算-实体类解决明确类型) Dynamic ...

  3. 《TED演讲的秘密》:TED组织者总结的演讲技巧集锦。三星推荐。

    对演讲感兴趣的可以看看.对TED内容感兴趣的也可以翻翻,书中有不少作者认为演讲技巧比较经典(一般来说内容上也有特色)的TED演讲的二维码.三星推荐.http://t.cn/RvFStu7

  4. Sass函数:random()函数

    random() 函数是用来获取一个随机数 >> random() 0.03886 >> random() 0.66527 >> random() 0.8125 & ...

  5. 应用程序无法正常启动(0xc000007b)。请单击“确定”关闭应用程序

    一开始是报缺少dll,随便在电脑里找个同名的dll放下面就报这个错误,网上查的都没有用.后来又找了一个dll,问题就解决了,所以是dll不对造成的.

  6. 【串线篇】Mybatis之模糊查询

    TeacherDao.xml sql语句:teacherName like #{name} 测试传值: teacher.setName(“%a%“):

  7. mysql 数据库连接状态查询

    查看当前数据库进程 show processlist

  8. oracle跟踪

    select sql_text --sql文本的前1000个字符 ,first_load_time --初次载入时间 ,last_load_time --最后载入时间 ,s.sql_fulltext ...

  9. Spring---条件注解@Conditional

    1.概述 1.1.Spring4  提供了一个更通用的  基于条件的Bean的创建,即使用@Conditional注解: 1.2.案例 package com.an.config; import co ...

  10. spring boot 热部署devtools实现(成功,主要是添加依赖后配置setting)

    1.devtools spring为开发者提供了一个名为spring-boot-devtools的模块来使Spring Boot应用支持热部署,提高开发者的开发效率,无需手动重启Spring Boot ...