JavaScript 事件代理需要注意的地方

我们知道，如果给 form 里面的 button 元素绑定事件，需要考虑它是否会触发 form 的 submit 行为。除此之外，其它场合给 button 元素绑定事件，你几乎不用担心这个事件会有什么非预期的附加效果，很自然地会这样写事件处理代码：

var button = document.querySelector('button')
button.addEventListener('click', function (e) {
 console.log('点击了按钮')
})

你之所以放心这么写，是因为这个 button 元素没有使用事件代理，即没有代理任何子元素的事件。

事件代理的意思是，你要为一个元素绑定事件，但你不是直接把事件绑定到这个元素自己身上，而是绑定到这个元素的父元素上。当子元素的某个事件（比如点击事件）触发时，它的父元素相同的事件也会触发（我们常说的事件冒泡），此时我们说父元素代理了子元素的事件。

举个例子，比如一个 button 元素中包含一个齿轮图标：

<button>
 <svg>
 <use xlink:href="#gear" rel="external nofollow" ></use>
 </svg>
</button>

当用户点击齿轮图标，必然要触发 click 事件，但你并不会直接绑定事件到 svg 或 use 元素上，而是绑定到它们的父元素 button 上。即：

document.querySelector('button').addEventListener('click', function (e) {
 console.log('点击了按钮')
})

这种情况，我们可以说，button 元素代理了它的所有子元素的 click 事件。

但是，出现这种事件代理的情况时，我们就得小心了。

为了更直观地说明问题，我们把“父”元素上升到顶层的 document 元素：

document.documentElement.addEventListener('click', function (e) {
 console.log('我被点击了')
})

只要网页中任意一个位置被点击了，都会触发绑定在 document 元素上的点击事件。​ 想要知道事件具体是发生在哪个元素上面，可以通过事件对象提供的 target 属性来判断。

document.documentElement.addEventListener('click', function (e) {
 console.log(e.target)
})

我们很容易知道事件具体是发生在哪个元素身上的。于是在上面的示例中，如果父元素 document 想在按钮被点击时做点什么事情，我们很自然地会这么写：

document.documentElement.addEventListener('click', function (e) {
 if (e.target.tagName === 'BUTTON') {
 console.log('按钮被点击了')
 }
})

这时问题就出现了，按钮即使被点击了 if 条件也不一定成立，即也不一定会输出“按钮被点击了”。因为用户在按钮上的某个位置点击了，根据用户点击的位置，e.target 可能是下面三种情况：

  • BUTTON 元素
  • SVG 元素
  • USE 元素

实际的情况是这样的：

我们真正的意图是，只要点击是发生在按钮上面，不论是按钮的哪个位置，我们都应视为按钮被点击了。 嗯，简单，我们再改一下，这样写：

document.documentElement.addEventListener('click', function (e) {
 if (['BUTTON', 'SVG', 'USE'].includes(e.target.tagName.toUpperCase())) {
 // 点击的是按钮
 }
})

这样似乎没什么问题，也确实可以达到目的，但看上去总是有些别扭。因为这种情况对于最上层的 document 来说，得知道每个子元素的情况，本来我只需要关心离我最近的 button 元素就可以了。

根据 OOP 对内封装的思想，button 元素内部的事情应该在内部消化掉，其子元素对外不可见，应该只暴露 button 元素本身。依据这个思想和事件冒泡的特点，我们就有了比较好的解决办法：只需要禁止 button 内部元素的事件响应（包括事件冒泡）而只允许 button 元素本身的事件发生就行。有两种方式可以实现这个目的。

一种是使用 CSS 禁止 button 内部元素的事件响应：

button > * {
 pointer-events: none;
}

另一种是使用 JS 来阻止 button 内部元素的事件响应（包括事件冒泡）：

document.querySelector('button > svg').addEventListener('click', function (e) {
 e.stopPropagation()
 e.preventDefault()
})

document.querySelector('button').addEventListener('click', function (e) {
 console.log(e.target.tagName)
})

这两种方式都能达到我们预期的效果：

综上，针对特定元素进行事件处理时，如果该元素有事件代理的情况，就要小心处理它所代理的子元素。

以上就是JavaScript 事件代理需要注意的地方的详细内容，更多关于JavaScript 事件代理的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 关于JavaScript数组去重的一些理解汇总

    前言 做前端开发几年,在项目中用到数组去重的机会倒不是很多,但是在面试的时候却经常被问到,个人理解,这道题真正考的是对JavaScript的基础的掌握,因为有很多种方式可以做到.这次就根据这道题,将相关的知识理解透彻. 一.ES6中的new Set方式 先看看MDN上对Set的描述: Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用. Set对象是值的集合,你可以按照插入的顺序迭代它的元素. Set中的元素只会出现一次,即 Set 中的元素是唯一的. 关键字:任何类型都可以存储

  • JavaScript事件循环及宏任务微任务原理解析

    首先看一段代码: 打印顺序是什么? 正确答案:script start, script end, promise1, promise2, setTimeout 其中涉及到事件循环(event loop),宏任务(macrotask),微任务(microtask) 一.事件循环 Event Loop 程序中设置两个线程:一个负责程序本身的运行,称为"主线程":另一个负责主线程与其他进程(主要是各种I/O操作)的通信,被称为"Event Loop线程"(可以译为&quo

  • 浅谈javascript事件环微任务和宏任务队列原理

    JS 事件环 JS 程序的运行是离不开事件环机制的,这个机制保证在发生某些事情的时候我们有机会执行一个我们事先预定好的函数,事情发生的时候 JS 会将相应的函数入栈执行然后出栈,但是关于事件环我们还有一些未知的东西,例如,setTimeout 我们习惯称他为定时器,但是可能很多人没有意识到,这个东西和我们常用的一些事件没什么不同,只不过我们通常所说的事件大多需要用户触发,而 setTimeout 不用用户自己触发,而是指定时间之后触发:那么问题来了,如果我们将时间设置为 0 会发生什么?会立即执

  • 浅析JavaScript 函数柯里化

    柯里化 (Currying)是把接收多个参数的原函数变换成接受一个单一参数(原来函数的第一个参数的函数)并返回一个新的函数,新的函数能够接受余下的参数,并返回和原函数相同的结果. ES6的方式实现柯里化的通用 function currying(fn,...rest1){ return function(...rest2){ //这里用apply 是为把数组形式的参数直接传入原函数 null是因为不需要改变this return fn.apply(null,rest1.concat(rest2)

  • JavaScript常用工具函数库汇总

    对象或数组的深拷贝 /** * 对象或数组的深拷贝 * @param {*} cloneObj 被克隆的对象 * @param {*} targetObj 克隆的目标对象 * @param {*} isOverride 若属性重复,是否覆盖被克隆对象的属性 */ function deepClone(cloneObj, targetObj, isOverride = true) { const _toString = Object.prototype.toString if (_toString

  • JS事件循环机制event loop宏任务微任务原理解析

    首先看一段代码 async function (){ await f2() console.log('f1') } async function f2(){ console.log('f2') } console.log('正常1') f1() setTimeout(()=>{ console.log('定时器') }) console.log('正常2') 正确的打印顺序应该是:正常1,f2 ,正常2,f1,定时器 为什么会出现这样打印顺序呢 首先javascript是一门单线程语言,在最新的

  • JavaScript 判断数据类型的4种方法

    本文提供四种方法判断js数据类型,这里记录了它们之间的差异,分别是 typeof 运算符.instanceof 运算符.constructor 属性.Object.prototype.toString 方法. 一.使用 typeof 判断数据类型 console.log('测试 Number ->', typeof 1); // number console.log('测试 Boolean ->', typeof true); // boolean console.log('测试 String

  • 谈谈JavaScript中的函数

    JS中的函数简介 JS中的函数是一种通过调用来完成具体业务的一段代码块.最核心的目的是将可重复执行的操作进行封装,然后供调用方无限制的调用. JS中的函数的定义 JS中函数定义,有如下两种形式: 方式1 function f1(){} //函数声明,f1为函数名,可以将其理解为变量f1指向一个函数 function f2(){return 100;}//函数允许有返回值 function f3(a,b){}//函数中可以定义多个参数,无需指定变量类型 方式2 var f4=function(){

  • JavaScript 事件代理需要注意的地方

    我们知道,如果给 form 里面的 button 元素绑定事件,需要考虑它是否会触发 form 的 submit 行为.除此之外,其它场合给 button 元素绑定事件,你几乎不用担心这个事件会有什么非预期的附加效果,很自然地会这样写事件处理代码: var button = document.querySelector('button') button.addEventListener('click', function (e) { console.log('点击了按钮') }) 你之所以放心这

  • JavaScript事件代理和委托详解

    JavaScript事件代理和委托详解

    在javasript中,代理.委托经常出现. 那么它究竟在什么样的情况下使用?它的原理又是什么? 这里介绍一下javascript delegate的用法和原理,以及Dojo,jQuery等框架中delegate的接口. JavaScript事件代理 事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数. 这主要得益于浏览器的事件冒泡机制,下面我们具体举个例子来解释如何使用这个特性. 这个例子主要取

  • 深入分析Javascript事件代理

    很久很久以来,总感觉事件发生与事件代理到之间没什么鸟区别. 最近,又看了一下,感觉区别其实真不大!看怎么理解吧. 要搞清楚什么是事件代理,就需要先搞清楚什么是代理. 从商业角度来讲,代理就是:我有货,你没货,但丫我没时间.没精力全部卖掉,而你一天闲的蛋疼,只剩下时间了.于是,我委托你帮我买,然后哥给你提成.这个过程中,你实际上相当于也有了货. OK,怎么从字面来理解事件代理一词的含义?后文有讲. 一 先看一个真实的,新手绑定onclik事件的例子 如果按照之前的我,我会怎么给每一个li标签,添加

  • 浅析javascript中的事件代理

    本文的主要内容是根据前不久面试某家公司Web前端开发岗位,面试时做的一道数组去重问题的解题思路进行整理的,分享给大家. 题目本身很简单:一个ul中有一千个li,如何给这一千个li绑定一个鼠标点击事件,当鼠标点击时alert出这个li的内容和li的位置坐标xy, <ul id="ulItem"> <li id="li1">1</li> <li id="li2">2</li> <li

  • 详解js的事件代理（委托）

    JavaScript事件代理(委托)一般用于以下情况: 1. 事件注册在祖先级元素上,代理其子级元素.可以减少事件注册数量,节约内存开销,提高性能. 2. 对js动态添加的子元素可自动绑定事件. 之前一直用各种js库的事件代理,如 jQuery,非常方便实用.今天尝试用原生 js 实现该功能. var addEvent = (function () { if (document.addEventListener) { return function (element, type, handler

  • javascript中的事件代理初探

    javascript中的事件代理初探

    事件在javascript中一直是最强大的对象之一.javascript提供了addEventListener和attachEvent两个方法来为DOM节点绑定事件,jquery作了进一步封装,提供了兼容各个浏览器的bind方法.现在来看,这种传统的事件绑定方式存在着以下不足: 1.可能需要绑定很多的EventHander. 假如页面中某个表有100行,现在必须为每一行绑定一个click事件.那么就必须绑定100个EventHandler,这对页面性能来说有着极大的负担,因为需要创建更多的内存来

  • JavaScript的事件代理和委托实例分析

    JavaScript的事件代理和委托实例分析

    在JavaScript中,经常会碰到要监听列表中多项li的情形,假设我们有一个列表如下: 复制代码 代码如下: <ul id="list">   <li id="item1">item1</li>   <li id="item2">item2</li>   <li id="item3">item3</li>   <li id="

  • JavaScript通过事件代理高亮显示表格行的方法

    本文实例讲述了JavaScript通过事件代理高亮显示表格行的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Highlight Rows</title> <style type

  • JavaScript事件的委托(代理)的用法示例详解

    JavaScript事件的委托(代理)的用法示例详解

    目录 简介 示例:事件委托 写法1:事件委托 写法2:每个子元素都绑定事件 示例:新增元素 写法1:事件委托 写法2:每个子元素都绑定事件 简介 说明 本文用示例介绍JavaScript中的事件(Event)的委托(代理)的用法. 事件委托简介 事件委托,也叫事件代理,是JavaScript中绑定事件的一种常用技巧.就是将原本需要绑定在子元素的响应事件委托给父元素或更外层元素,让外层元素担当事件监听的职务. 事件代理的原理是DOM元素的事件冒泡. 事件委托的优点 1.节省内存,减少事件的绑定 原

  • javascript数据代理与事件详解分析

    javascript数据代理与事件详解分析

    目录 数据代理与事件 回顾Object.defineProperty方法 何为数据代理 Vue中的数据代理 事件的基本使用 事件的修饰符 键盘事件 数据代理与事件 星光不负赶路人,满身花香蝶自来 回顾Object.defineProperty方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>回顾Object.defineproperty方法<

随机推荐