JS中事件绑定的方式以及事件监听和事件的委托

在javascript中，到我目前的学习中总结得到的认知是在事件触发阶段主要是由于事件流：

我们在HTML中先设置一个div：

<div class="box"></div>

然后获取它：

var obox = document.querySelector(".box");

1,DOM0级事件处理阶段也就是基础的赋值式绑定的方法：

 obox.onclick = function(){console.log(1)}

在这个赋值式的方法中删除事件绑定就给事件设为空：

obox.onclick = null;

这个方法虽然简单没有兼容而且简单但是有个缺点就是会覆盖，比如：

obox.onclick = function(){console.log(1)}obox.onclick = function(){console.log(2)}

事件二会覆盖事件一的数据，所以也体现出了他的不能进行多事件的绑定。

所以我们就可以运用学习DOM的2级事件绑定也就是我们说的监听式绑定：

obox.addEventListener("click",fn1)function fn1(){console.log(1) }
    obox.addEventListener("click",function(){console.log(2)})

要记住在这里事件不加on。

接着我们删除事件绑定的方式：

obox.removeEventListener("click",fn1)

在这里我们通过句柄找到原来事件的事件处理函数，进行删除。

注意，在这里我们会接触到有关JS的兼容问题

DOM2级事件处理是所有DOM节点中的方法，可以重复绑定，但是浏览器兼容存在问题；

2.事件的监听：

非IE下：(这里的事件名不带on),第三个参数表示是在捕获阶段还是冒泡阶段。可以重复绑定事件，执行顺序按照绑定顺序来执行。

IE下：只有冒泡阶段,所以没有第三个参数；（这里的事件名需要加on）；

 obox.attachEvent("onclick",fn1)function fn1(){console.log(1)}obox.attachEvent("onclick",function(){console.log(2)})obox.detachEvent("onclick",fn1)console.log(obox.attachEvent)

在这里为了以后方便使用，我们就可以进行相关的封装：

function removeEvent(ele,type,cb){     //这里的函数使用于解除时间的绑定if(ele.removeEventListener){ele.removeEventListener(type,cb)   //非IE的情况下}else if(ele.detachEvent){ele.detachEvent("on"+type,cb)    //兼容IE}else{ele["on"+type] = null;       //前两种情况都不行的前提下}}

接下来就是绑定事件的封装函数：

function addEvent(ele,type,cb){if(ele.addEventListener){ele.addEventListener(type,cb)}else if(ele.attachEvent){ele.attachEvent("on"+type,cb)}else{ele["on"+type] = cb;}}

3.事件委托：

事件的委托就是将多个相同元素的相同事件，添加给页面上现存的共同的父元素，利用事件冒泡，配合事件源，找到真正点击的元素。通过e.target获取触发事件的事件源；

事件委托的优势在于节省了性能；可以给页面暂时不存在的元素绑定事件。

html代码如下:

<ul><li>link1</li><li abc="l">link2</li><li abc="l">link3</li><li abc="l">link4</li><li>link5</li></ul>

js的代码如下：

var oul = document.querySelector("ul")oul.onclick = function(eve){var e = eve || window.event;var t = e.target || e.srcElement;if(t.getAttribute("abc") == "l"){console.log(e.target.innerHTML)}   }

以上就是利用了事件委托机制，给一个判断if(t.getAttribute("abc") == "l")。先触发一个事件然后在绑定给：li标签提前自定义一个属性“abc”，给“abc”属性值为l的时候；利用事件冒泡原理，将绑定在多个子元素身上的相同事件，绑定在页面上现存的父元素身上。

在这里我们可以简单了解一下事件流的三个状态：捕获阶段，目标阶段，以及冒泡阶段。

转载于:https://www.cnblogs.com/zhuangch/p/11508195.html

JS中事件绑定的方式以及事件监听和事件的委托相关推荐

vue中使用饿了么input组件监听回车事件不起作用
vue使用element-ui的el-input监听不了回车事件,原因是element-ui自身封装了一层input标签之后,把原来的事件隐藏了,加上.native可以监听到组件根元素的原生事件转载 ...
js中，实现对键盘按键的监听：
<script>function keyUp(e) { var currKey=0,e=e||event; currKey=e.keyCode||e.which||e.charCode; ...
skylin TerraExplorer自定义飞行路线如何监听结束事件
关于skylin的事件监听,特别是flyto事件,往往在执行下一个事件时当前事件才算结束,所以用常规方法是不可行的,设置时间的监听也不太靠谱,可以对事件开始后飞行节点的数量计数判断是否结束,下面是参考 ...
JavaScript三种事件绑定的方式(DOM的0级、2级、3级事件处理程序)
JS事件绑定的方式: ①.行内绑定 ②.动态绑定 ③.事件监听一.行内绑定[DOM0级事件处理程序]: 例:<标签属性列表事件="事件的处理程序" /> 虽然可以 ...
chromedp网络监听_动态爬虫三：监听网络事件 + 监听js事件
一: 概述上两篇文章介绍了cdp协议和chromedp库,从这篇文章开始动手实战一下,我们要拿到页面上更多的网络请求,最直接的想法就是类似于开发者工具里的network,只有一有网络请求就显示在列表 ...
使用js监听文件下载事件，解决导出excel文件名为.do的bug
目录: 1. 简单粗暴使用XHR,不考虑IE,带下载中的灰度弹窗 2. 苟一苟,直接使用`window.location`,不过除了保存文件外,没有别的点击提醒,不能防止重复点击. 3. 下载的文件名 ...
事件绑定、事件监听、事件委托
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等 ...
js如何监听元素事件是否被移除_JavaScript 监听元素是否进入/移出可视区域
JavaScript 监听元素是否进入/移出可视区域常规操作防抖节流 IntersectionObserver 兼容的代码常规操作通常的做法是,监听srcoll事件,根据元素的offset来判 ...
浅析 postMessage 方法介绍、如何接收数据（监听message事件及其属性介绍）、使用postMessage的安全注意事项、具体使用方式（父子页面如何互发消息、接收消息）
postMessage 是 html5 引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档.多窗口.跨域消息传递,多用于窗口间数据通信,这也 ...

JS中事件绑定的方式以及事件监听和事件的委托

JS中事件绑定的方式以及事件监听和事件的委托相关推荐

最新文章

热门文章