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的基 ...
随机推荐
- Java中BufferedReader、InputStreamReader、Scanner和System.in区别
Java中获取键盘输入值的方法以前写算法都是C/C++写的,现在用Java写,虽然算法是独立于语言的,但是Java从键盘获取输入确实有些不一样.在C/C++中我们可以用scanf和cin来获取用户从键 ...
- opencv学习之路(33)、SIFT特征点提取(一)
一.简介 二.OpenCV中的SIFT算法接口 #include "opencv2/opencv.hpp" #include <opencv2/nonfree/nonfree ...
- Vue学习——使用vue-cli搭建一个简单的本地vue项目
前提 安装好node.js.npm.vue-cli.为什么要先安装这些,建议查看https://www.cnblogs.com/jixue/p/10673875.html,这个对于vue-cli理解很 ...
- ARDUINO入门按键通信试验
1.1按键实验 1.需要学习的知识: 1) Arduino 的输入口配置方法,配置函数的用法 通过pinMode()函数,可以将ADUINO的引脚配置(INPUT)输入模式 2) 搞懂什么是抖动 机械 ...
- 浏览器解析JavaScript的原理
JavaScript的特点一般都知道的就是解释执行,逐行执行,就是从上到下依次执行. JavaScript的执行之前,其实还是有一些操作的,只是没有表现出来 JavaScript的执行过程: 1.语法 ...
- ejs常用功能函数
利用<%- include filename %>加载其他页面模版: 1.缓存功能,能够缓存已经解析好的html模版: 2.<% code %>用于执行其中javascript ...
- vue 开发环境搭建
https://www.cnblogs.com/goldlong/p/8027997.html 1,按照nodeJS. 2,nodejs 包含npm. 3, 执行: npm install -g @v ...
- 调参贝叶斯优化(BayesianOptimization)
from sklearn.datasets import make_classification from sklearn.model_selection import cross_val_score ...
- 访问github慢的解决方案
问题描述 打开https://github.com很慢. 解决办法 1.打开文件C:\Windows\System32\drivers\etc\hosts 2.添加如下内容: 151.101.44.2 ...
- js回调函数以及同步与异步
1. 背景介绍javascript的单线程特性由于javascript语言是一门“单线程”的语言,所以,javascript就像一条流水线,仅仅是一条流水线而已,要么加工,要么包装,不能同时进行多个任 ...