JavaScript中事件委托(事件代理)详解
在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢?
事件委托在生活中的例子:
有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收。
事件委托在JavaScript中:
比如要给一个dom节点添加一个点击事件,但是现在事件不加在该dom节点本身,而是加在它的父节点身上,利用它父节点触发事件,给该dom节点实现事件效果。
实现原理:
事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件 举个例子:页面上有这么一个节点树,div>ul>li>a
;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div
,有这样一个机制,那么我们给最外面的div加点击事件,让里面的ul,li,a实现事件效果,所以都会触发,这就是事件委托,委托它们父级代为执行事件。
利用事件委托的作用
节省资源,提高效率 在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间 如果使用事件委托,则只会与dom节点进行一次交互,有效的减少了和dom交互次数,节省资源,提高效率
对于新创建的dom节点,也可以拥有事件
使用场景:
- 重复的给dom节点添加事件
- 给dom树中尚未创建的元素(动态创建)添加事件
使用js添加事件委托
先给出一个例子1:
<ul id="ul">
<li>周一去游玩</li>
<li>周二去上班</li>
<li>周三去休息</li>
<li>周四去吃饭</li>
</ul> //利用事件委托给每一个li标签添加点击事件
<script>
var ul = document.querySelector("#ul");
ul.onclick = function(){
alert("快醒醒,每天都要上班的!")
}
</script>
例子中利用父级ul做事件处理,当li被点击时,由于冒泡原理,事件就会冒泡到ul上,因为ul上有点击事件,所以事件就会触发
在例子1中,所有的事件代码都相同,那么如果不同呢? 例子2:
<ul id="ul">
<li>周一去游玩</li>
<li class="work-day">周二去上班</li>
<li>周三去休息</li>
<li>周四去吃饭</li>
</ul>
<script>
var ul = document.querySelector("#ul");
ul.onclick = function(e) {
var e = event || window.event;
var target = e.srcElement || e.target;
if(target.className == "work-day"){
alert("good boy");
}else{
alert("快醒醒,每天都要上班的!");
}
}
</script>
这个例子中就会针对于class属性等于"word-day"的li元素做出不同的事件,其他事件则为默认事件
jQuery的事件委托
$(function () {
$('#ul').on('click', 'li', function () {
if ($(this).hasClass('work-day')) {
alert("good boy");
} else {
alert("快醒醒,每天都要上班的!");
}
})
});
总结:
合理使用事件委托可以帮助我们节省资源,提高效率;也可以给dom中尚未创建的节点添加事件(可以自己尝试一下)。
适合用事件委托的事件:
- click
- mousedown
- mouseup
- keydown
- keyup
- keypress
需要小心的是:mouseover和mouseout虽然也有事件冒泡,但是需要特别的注意,因为需要经常计算它们的位置,处理起来不太容易。
不适合用事件委托的事件:
- mousemove(每次都要计算它的位置,非常不好把控)
- focus,blur等(本身就没用冒泡的特性,自然就不能用事件委托了)
JavaScript中事件委托(事件代理)详解的更多相关文章
- JavaScript中typeof和instanceof深入详解
这次主要说说javascript的类型判断函数typeof和判断构造函数原型instanceof的用法和注意的地方. typeof 先来说说typeof吧.首先需要注意的是,typeof方法返回一个字 ...
- JavaScript 中 apply 、call 的详解
apply 和 call 的区别 ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法,它们的应用非常广泛,它们的作用也是一模一样,只是传参的形式有区别而已. 原文作者:林 ...
- JavaScript中定义类的方式详解
本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的exte ...
- JavaScript中var关键字的使用详解
作用 声明作用:如声明个变量. 语法 ? 1 var c = 1; 省略var 在javascript中,若省略var关键字而直接赋值,那么这个变量为全局变量,哪怕是在function里定义的. ? ...
- Javascript中的this关键字用法详解
在javascript里面,this是一个特殊的对象,它不像其他编程语言那样,是存储在实例中的值,直接指向此实例. 而是作为一个单独的指针,在不同的情况之下,指向不同的位置,这也是为什么我们会将它搞混 ...
- javascript中6种基本数据类型详解
javascript中有5中数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number和String,还有一种复杂数据类型——object,object本质是由一组键值 ...
- JavaScript中继承的实现方法--详解
最近看<JavaScript王者归来>中关于实现继承的方法,做了一些小总结: JavaScript中要实现继承,其实就是实现三层含义:1.子类的实例可以共享父类的方法:2.子类可以覆盖父类 ...
- JavaScript中的面向对象编程,详解原型对象及prototype,constructor,proto,内含面向对象编程详细案例(烟花案例)
面向对象编程: 面向:以什么为主,基于什么模式 对象:由键值对组成,可以用来描述事物,存储数据的一种数据格式 编程:使用代码解决需求 面向过程编程: 按照我们分析好的步骤,按步 ...
- Javascript中的apply与call详解
JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别. 一.方法定义 1.call 方法 语法:call([thisObj[,arg1[, arg2[, [,.arg ...
- JavaScript 中的Object的使用详解笔记(一)
昨天的学习笔记,今天更新上.第三遍看oop,还是理解的比较到位了. 1.JavaScript的组成:ECMAScript(最新6) + DOM + BOM 2.数组与对象的应用: object的基 ...
随机推荐
- VueScroller 使用
下载插件 npm install vue-scroller -D 引入插件: import Vue from 'vue'import VueScroller from 'vue-scroller' ...
- Java 基础知识点小结
小知识点 所有的程序,都要定义在类里面: 异常 定义方法时,使用 throws 可以用来捕获方法体内没有捕获的异常,然后以 SomeException 抛出异常 java是解释型语言.java虚拟机能 ...
- 好玩图像pil处理
pil库的学习总结 #__author:'lwq'#date: 2018/11/15 from PIL import Image,ImageFilter,ImageDraw,ImageFont ### ...
- HDU 3533 Escape(大逃亡)
HDU 3533 Escape(大逃亡) /K (Java/Others) Problem Description - 题目描述 The students of the HEU are maneu ...
- ES6删除对象中的某个元素
const form = { id: '011', name: '测试一', description: '测试demo' } // 目标: 取到删除description属性的对象, 即下文的data ...
- vitual dom实现(转)
1. 通过JavaScript来构建虚拟的DOM树结构,并将其呈现到页面中: 2. 当数据改变,引起DOM树结构发生改变,从而生成一颗新的虚拟DOM树,将其与之前的DOM对比,将变化部分应用到真实的D ...
- 自动车牌识别(ALPR)---https://blog.csdn.net/ELEVEN_ZOU/article/details/80893579
1.基本功能:从一张或者一系列的图片中提取车牌信息,比如车牌号码.车牌颜色等信息. 2.功能扩展:车型.车品牌.车牌类型等. 3.应用方向:电子交易系统(停车自动收费.收费站自动支付等).交通执法.交 ...
- 【Code Tools】Java微基准测试工具JMH之入门篇
一.JMH是什么 JMH是一个Java工具,用于构建.运行和分析用Java和其他语言编写的以JVM为目标的 nano/micro/milli/macro 基准测试. 二.基本注意事项 1)运行JMH基 ...
- Maven发布jar包到私库
首先修改maven的配置文件settings.xml,增加servers标签,配好maven服务器的账号密码 <servers> <server> <id>rele ...
- echarts常用方法,legend状态支持两张图片切换(四)
在UI设计的时候,可能我们在使用echarts时,legend是用图片渲染的,未选中的legend是用置灰的图片展示的.即彩色图片,置灰图片交互切换. 主要代码如下: //图例事件 let lgdt ...