JS中的事件冒泡

冒泡 捕获概念性的东西了解了,一直不知道有什么作用。因为以前直接获取dom元素,添加事件也没发现什么点一个按钮,其父级也没什么改变啊。虽然早就知道冒泡捕获,实际应用中也没出什么乱子,所以昨天才仔细看一遍。就有些不理解了,请看下面的例子两种形式添加均没变化,点击btn就是btn弹出你好,box什么也不显示

请输入代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="box">
            <input type="button" value="按钮1" id="btn1"  />
        </div>
        <script>
            window.onload=function(){
                var btn1=document.getElementById("btn1");
                var box=document.getElementById("box1");
//                btn1.onclick=function(){
//                    alert("你好");
//                };
//                box.onclick=function(){
//                    alert("hellow world")
//                }
btn1.addEventListener("click",function(){alert("你好")},false);
box.addEventListener("click",function(){alert("hellow world")},false);
            }
        </script>
    </body>
</html>
阅读 3.4k
4 个回答

代码写错了。

var box=document.getElementById("box");

如果效果没实现,查找错误第一部是看浏览器有没有报错。chrome下F12。这种小错误比你一步一步看代码快很多。
图片描述
这样你就可以自己发现这类简单问题,再自己思考了。

是这里出了个小错误:

var box=document.getElementById("box");

id名输错,所以获取不到元素

楼主的,这个要是只有一个就不用事件代理了,直接用上面的btn1的就可以了,要是多的时候再用事件代理来获取当前被点击的元素弹出提示

你获取box的id值的时候写错了。。。。。后面是(‘box’)。。。。。。。。。可以在审查元素里面看到的 。。 组织事件冒泡用 stopPropagation();(jq中)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题