浅谈JavaScript--事件委托与事件监听
事件监听
该方法用于向指定元素添加事件句柄(代码块),且不会覆盖已存在的事件句柄。
即可以向同一个元素添加同一个事件多次。
添加事件
语法:
element.addEventListener(event,function,useCapture);
- event:事件的类型。如'click','mousedown'等。谷歌浏览器下不用加'on'前缀。
- function:事件触发时调用的函数。
- useCapture:布尔类型,用于描述事件时冒泡还是捕获,可选。默认false,即冒泡传递。
<div id="box"></div>
<script>
var box = document.getElementById('box');
box.onclick = function() {
alert('box');
}
box.onclick = function() {
alert('box2!');
}
</script>
此时后面的事件会覆盖前面的事件,即点击box时只弹出'box2!'
事件监听写法:
<div id="box"></div>
<script>
var box = document.getElementById('box');
box.addEventListener('click', function() {
alert('box');
})
box.addEventListener('click', function() {
alert('box2');
})
</script>
此时即点击box,先弹出'box',接着弹出'box2!'。
移除事件
语法:
element.removeEventListener(event,functionName);
移除由addEventListener()方法添加的事件,移除与添加的必须为同一个函数。
兼容性
在ie8及更早版本不支持以上方法
请使用:
element.attachEvent(event,function); //添加
element.detachEvent(event,function); //删除
注意给事件加'on'前缀。
跨浏览器解决方案
function addEventListener(obj,eve,fun){
if(obj.addEventListener){
obj.addEventListener(eve,fun);
}else if(obj.attachEvent){
eve="on"+eve;
obj.attachEvent(eve,fun);
}else{
obj['on'+eve]=fun;
}
}
事件委托
情景:前期绑定了事件,后期有添加了节点,而新添加的节点却没有相应的事件。用事件委托解决。
通常事件是直接添加在触发的元素上,事件委托则是吧事件委托给该元素的父级。
原理:利用冒泡原理,把事件添加到父级上,触发执行效果。
<div id="box">
<p>我是原来的节点1</p>
<p>我是原来的节点2</p>
</div>
<script>
var box = document.getElementById('box');
var p = document.getElementsByTagName('p');
var child3 = document.createElement('p');
child3.innerHTML = '我是新添加的节点3';
box.appendChild(child3);
for (var i = 0; i < p.length; i++) {
p[i].onclick = function() {
console.log(this.innerHTML)
}
}
var child4 = document.createElement('p');
child4.innerHTML = '我是新添加的节点4';
box.appendChild(child4);
</script>
此时点击box下的所有p元素,前3个都可以获取到innerHTML,第4个却不能
用事件委托的方法去写:
<div id="box">
<p>我是原来的节点1</p>
<p>我是原来的节点2</p>
</div>
<script>
var box = document.getElementById('box');
var p = document.getElementsByTagName('p');
var child3 = document.createElement('p');
child3.innerHTML = '我是新添加的节点3';
box.appendChild(child3);
//----------------区别分割线----------------------------
box.onclick = function(e) { //委托给父级
var e = e || window.event; //兼容处理
var target = e.target || e.srcElement; //兼容处理
if (target.nodeName.toLowerCase() == 'p') { //触发事件的目标节点
console.log(target.innerHTML);
}
}
//----------------区别结束------------------------------
var child4 = document.createElement('p');
child4.innerHTML = '我是新添加的节点4';
box.appendChild(child4);
</script>
此时点击box下的所有p元素,都可以获取到innerHTML。
上述方法中target返回事件的目标节点,即本应触发该事件的节点。需要做兼容处理
浅谈JavaScript--事件委托与事件监听的更多相关文章
- 浅谈VUE,使用watch方法监听父组件传到子组件的数据。
props:['updateData'], data(){ return{ form: { _name:'', }, } }, 第一步接收数据: props:['updateData'] 第二步动 ...
- 浅谈JavaScript的事件(事件委托)
事件处理程序为Web程序提供了系统交互,但是如果页面中的事件处理程序太多,则会影响页面的性能.每个函数都是对象,都会占用内存,内存中对象越多,性能越差.需要事先为DOM对象指定事件处理程序,导致访问D ...
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
- javascript的事件冒泡,阻止事件冒泡和事件委托, 事件委托是事件冒泡的一个应用。
首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...
- 浅谈javascript函数节流
浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...
- js中的事件委托或是事件代理
JavaScript(jQuery)中的事件委托 https://www.cnblogs.com/zhoushengxiu/p/5703095.html js中的事件委托或是事件代理详解 https: ...
- js中的事件委托和事件代理详解
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
- JS事件委托或者事件代理原理以及实现
事件委托(事件代理)原理:简单的说就是将事件交由别人来执行,就是将子元素的事件通过冒泡的形式交由父元素来执行. 为什么要用时间委托? 在JavaScript中,添加到页面上的事件处理程序数量将直接关系 ...
- js中的事件委托(事件代理)详解
本文转载:https://www.cnblogs.com/liugang-vip/p/5616484.html#!comments js中的事件冒泡.事件委托是js 中一些需要注意的小知识点,这里结合 ...
随机推荐
- Codeforces 478D Red-Green Towers:dp
题目链接:http://codeforces.com/problemset/problem/478/D 题意: 给你r个红方块和g个绿方块,让你用这些方块堆一个塔. 最高层有1个方块,每往下一层块数+ ...
- SQL语言方方面面
1 数据库和SQL 1.1 数据库 DB, DBMS DBMS的种类: 层次性数据库, 关系型数据库, 非关系型数据库 RDBMS, 关系数据库管理系统 1.2 数据库的结构 RDBMS常见的系统结构 ...
- Android中高效的显示图片之二——在非UI线程中处理图片
在“加载大图”文章中提到的BitmapFactory.decode*方法,如果源数据是在磁盘.网络或其它任何不是在内存中的位置,那么它都不应该在UI线程中执行.因为它的加载时间不可预测且依赖于一系列因 ...
- 基于libRTMP的流媒体直播之 AAC、H264 推送
这段时间在捣腾基于 RTMP 协议的流媒体直播框架,其间参考了众多博主的文章,剩下一些细节问题自行琢磨也算摸索出个门道,现将自己认为比较恼人的 AAC 音频帧的推送和解析.H264 码流的推送和解析以 ...
- 每天一个linux命令(10):touch命令
版权声明更新:2017-05-14博主:LuckyAlan联系:liuwenvip163@163.com声明:吃水不忘挖井人,转载请注明出处! 1 文章介绍 本文介绍了Linux下面的mv命令. 2. ...
- bzoj 4766: 文艺计算姬 矩阵树定理
题目: 给定一个一边点数为\(n\),另一边点数为\(m\),共有\(n*m\)条边的带标号完全二分图\(K_{n,m}\) 计算其生成树个数 \(n,m,p \leq 10^{18} ,p为模数\) ...
- js中eval详解
先来说eval的用法,内容比较简单,熟悉的可以跳过 eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. ...
- bzoj 1711 Dining吃饭 —— 最大流
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1711 食物一列,牛拆点,饮料一列. 代码如下: #include<cstdio> ...
- OpenStack、CloudStack、Eucalyptus和vCloud Director四大主流云平台怎么选?
软件产品开发公司Altoros Systems的IT基础设施设计师Vadim Truksha在美国<网络世界>上发表一篇文章,详细对比了CloudStack.Eucalyptus.vClo ...
- 2006年清华:N的阶乘
题目描述: 输入一个正整数N,输出N的阶乘. 输入: 正整数N(0<=N<=1000) 输出: 输入可能包括多组数据,对于每一组输入数据,输出N的阶乘 样例输入: 4 5 15 样例输出: ...