JS 事件的冒泡行为

大家想象一下冒泡的物理行为,就是向上浮动,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>

此时加上了event.stopPropagation()方法,将不再执行父元素div的点击事件,只执行一次按钮的点击事件,即阻止了事件的冒泡行为。

你可能感兴趣的:(javascript,js,html5)