JS 事件的冒泡行为

最新推荐文章于 2023-03-09 01:29:40 发布

得陇望蜀

最新推荐文章于 2023-03-09 01:29:40 发布

阅读量276

点赞数

文章标签： javascript js html5

本文链接：https://blog.youkuaiyun.com/whtlife_20/article/details/106612343

版权

大家想象一下冒泡的物理行为，就是向上浮动，js中的冒泡行为亦是如此，执行子元素的某个事件时，行为向上传递，父元素也执行相同的行为 (行为相同，执行函数可以不相同)

语法格式：

stopPropagation()

实例：

<body>    
    <div id="div">        
        <button id="btn">按钮</button>    
    </div>    
    <script>        
        document.getElementById("btn").addEventListener("click",showBtn);//给按钮添加点击事件        
        document.getElementById("div").addEventListener("click",showDiv);//给div添加点击时间        
        function showBtn(event) {            
            alert("hello");            
	}        
	function showDiv() {            
	    alert("word");        
	}    
    </script>
</body>

浏览器中将依次弹出“hello”和“word”的提示框，

<body>    
    <div id="div">        
        <button id="btn">按钮</button>    
    </div>    
    <script>        
        document.getElementById("btn").addEventListener("click",showBtn);//给按钮添加点击事件        
        document.getElementById("div").addEventListener("click",showDiv);//给div添加点击时间        
        function showBtn(event) {            
            alert("hello");            
     event.stopPropagation();
 }        
 function showDiv() {            
     alert("word");        
 }    
    </script>
</body>