利用事件代理，获取事件中多个标签/图片中某一个

Dogee 发布于2019-08-26 10:23 / 3351人阅读

摘要：事件捕获会从开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。父元素子元素事件代理原理事件冒泡机制。当子结点触发事件时，事件流会向父节点传播，并触发父节点上的事件。

场景:一个页面中的导航栏/图片下拉框，具有多个相同的标签节点，可以获取点击的某一个，并封装对应的方法函数（不考虑IE）
需要考虑的步骤:
（1）事件代理的原理（事件冒泡）
（2）函数中需要考虑的几点（默认行为，this指向）

1.事件捕获和事件冒泡
DOM是一种树形结构，事件会在元素结点和根结点之间传递，途经的结点会收到该事件，传递过程可以称为事件流。
事件流分为三个阶段：

捕获阶段

目标阶段

冒泡阶段

事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。
事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。
window->document->HTML->body->父元素->子元素

2.事件代理
（1）原理：事件冒泡机制。当子结点触发事件时，事件流会向父节点传播，并触发父节点上的事件。
（2）优点：

代码简洁，当动态增加结点时，无需做额外操作

减少绑定注册事件，减少浏览器内存消耗

3.函数实现
（1）实现一次事件冒泡

   /*
    *
    * 事件冒泡
    *
    */
    function bindEvent(elem, type, fn) {
         elem.addEventListener(type, fn);
    }
    var paras = document.getElementById("para")
    var contains = document.getElementById("contain")
    var p1s = document.getElementById("p1")
    console.log(paras, contains, p1s)
    bindEvent(p1s, "click", function(e) {
        e.preventDefault()
        //阻止事件冒泡 e.stopPropagation() e.cancelBubble = true IE
        console.log("p")
    })
    bindEvent(paras, "click", function(e) {
        console.log("para")
    })

可以看到，当点击标签的时候，结点的父元素也触发了对应的方法。
（2）实现事件代理

   /*
    *
    * 事件代理
    *
    */
    function eventProxy(elem, type, proxyElem, fn) {
        if(fn === null) { // 不使用事件代理
            fn = proxyElem;
            proxyElem = null;
        }
        elem.addEventListener(type, function(e) {
            var target;
            if(proxyElem) { // 使用事件代理的情况
                target = e.target;
                console.log(target)
                if (target.matches(proxyElem)) {
                    fn.call(target, e); // 改变函数this执行上下文到目标结点
                }
            } else { // 不使用事件代理的情况
                fn(e);
            }
        })
    }
    var proxyContainer = document.getElementById("proxy");
    eventProxy(proxyContainer, "click", "a" , function(e) {
        e.preventDefault();
        console.log(this.innerHTML); // 获取当前结点信息
    })

可以看到，通过事件代理的方式，将事件绑定在父节点上，并可以区分被点击分子节点的信息。

超融合服务器私有云多个事件处理事件代理事件的一个 js 标签绑定事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106101.html

jQuery笔记总结篇

摘要：希望在做所有事情之前，操作文档。不受层级限制子选择器在给定的父元素下匹配所有子元素。相邻选择器匹配所有紧接在元素后的元素。判断当前对象中的某个元素是否包含指定类名，包含返回，不包含返回下标过滤器精确选出指定下标元素获取第个元素。原文链接 http://blog.poetries.top/2016... 首先，来了解一下jQuery学习的整体思路 showImg(https://seg...

NoraXie 2019-08-22 10:39 评论0 收藏0
JavaScript-面试

摘要：表示没有对象，即该处不应该有值。闭包的形成允许使用内部函数，可以将函数定义和函数表达式放在另一个函数的函数体内。使用闭包可以减少全局环境的污染，也可用延续变量的生命。所以在闭包不用之后，将不使用的局部变量删除，使其被回收。 1.javaScript的数据类型有什么 Undefined、Null、Boolean、Number、String 2.检测数据类型有什么方法 typeof typ...

fantix 2019-08-23 10:37 评论0 收藏0
前端面试题目汇总

摘要：线程在执行过程中与进程还是有区别的。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。关于js 1.原型链 2.AJAX请求数据时解决缓存的办法3.js的继承 ...

lastSeries 2019-08-21 11:42 评论0 收藏0
JavaScript 基础知识 - DOM篇(一)

摘要：前言本篇文章是基础知识的篇，如果前面的基础知识入门篇看完了，现在就可以学习了。基本概念分为三个部分。在这个基础上使用一些新特性，高级浏览器支持，低级浏览器不支持。在对象中的属性是一个布尔值，只有和。 showImg(https://segmentfault.com/img/remote/1460000012581493?w=1920&h=1080); DOM 前言本篇文章是JavaS...

cuieney 2019-08-22 13:40 评论0 收藏0
异步、DOM、事件、页面加载和优化面试题及知识点简单总结

摘要：异步编程，不同于同步编程的请求响应模式，其是一种事件驱动编程，请求调用函数或方法后，无需立即等待响应，可以继续执行其他任务，而之前任务响应返回后可以通过状态通知和回调来通知调用者。异步与单线程知识点：什么是异步(对比同步) 同步：一行一行按顺序依次执行代码，当前代码任务耗时执行会阻塞后续代码的执行。这是一种典型的请求-响应模型，当请求调用一个函数或方法后，需等待其响应返回，然后执...

jasperyang 2019-08-21 16:57 评论0 收藏0