javascript - js事件委托的问题-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - js事件委托的问题

怪我咯 2017-04-10 16:35:04

[JavaScript讨论组]

1059

代码如下：


    item1
    item2
    item3
    item4
    item5

请问，为什么事件只冒泡到 a 标签上就结束了？并没有输出 LI？

换个问法：


    item1

我的理解是事件冒泡应该连续的输出 A LI UL ,但是这里只输出了 A，为什么，感觉我好像把事件冒泡理解错了，求解释

或者如何实现一个事件委托？

感谢大家，已经明白了,Event.target 指触发事件的对象，而 Event.currentTarget 指向的是绑定事件处理器的对象

代码稍作改进,这样才算是事件委托嘛：

var el = document.querySelector("ul");
    el.addEventListener("click",function(e){
        e.preventDefault();
        var target = e.target;
        while(target !== e.currentTarget){
            switch (target.nodeName){
                case "A": console.log("A标签点击");
                    break;
                case "LI": console.log("LI标签点击");
                    break;
            }
            target = target.parentNode;
        }
    }, false)

怪我咯

走同样的路，发现不同的人生

全部回复(2)

阿神2017-04-10 16:37:04 2楼

 var el = document.querySelector("ul");
 el.addEventListener("click",function(e){
     console.log(e.target.tagName);
     console.log(e.currentTarget.tagName);
 }, false)

你的事件监听是加在ul元素上的，
那么它作用是当ul下的任何一个子元素触发click事件时，按事件冒泡机制，绑定的事件回调将被触发
event.target指向触发click的元素，event.currentTarget指向绑定事件回调的DOM元素

那么li为什么没有输出呢？因为你没有添加任何监听在li元素上啦~~
咦~~事件冒泡不是会冒泡到li元素上的么？是的，冒泡阶段会触发li上的click事件，但是你对这个事件没兴趣，所以它越过你继续向上冒了；
冒泡是当下级元素被触发事件通知其上级的机制，如果有上级对你的事件感兴趣，那么绑定在其上的事件回调就会被执行；但是并不能修改事件由谁触发的这个事实，这个不容篡改，那么event.target就永远是触发事件的那个DOM元素

我们可以在li元素上添加个事件监听-如下代码，那么现在点击第1个li
将看到 A>LI>A>UL 这就是冒泡~~~~

 var el = document.querySelector("ul");
 el.addEventListener("click",function(e){
     console.log(e.target.tagName);
     console.log(e.currentTarget.tagName);
 }, false)
 var li = document.querySelector("li");
 li.addEventListener("click",function(e){
     console.log(e.target.tagName);
     console.log(e.currentTarget.tagName);
 },false);

事件代理机制中，你需要告诉代理你要监听那个元素或元素的筛选条件，当事件从指定的DOM元素上触发或符合条件的DOM元素上触发时，定义的事件回调就会被触发。是一个判断event.target的过程；
而不需要为每一个元素指定事件回调。