zoukankan      html  css  js  c++  java
  • 事件冒泡(event bubbling)与事件捕捉(event capturing)

    事件捕捉:

    单击<div>元素就会以下列顺序触发click 事件。
    

    Document => Element html => Element body => Element div

    事件冒泡:

    单击<div>元素就会以下列顺序触发click 事件。
    

    Element div => Element body => Element html => Document

    示例:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style type="text/css">
    		#i1{
    			height: 500px;
    			 400px;
    			background-color: pink;
    		}
    		#i2{
    			height: 400px;
    			 300px;
    			background-color: red;
    		}
    		#i3{
    			height: 300px;
    			 200px;
    			background-color: green;
    		}
    	</style>
    </head>
    <body>
    <div id="i1">
    	<div id="i2">
    		<div id="i3"></div>
    	</div>
    </div>
    <script type="text/javascript">
    	var myi1 = document.getElementById("i1");
    	var myi2 = document.getElementById("i2");
    	var myi3 = document.getElementById("i3");
    	myi1.addEventListener('click', function(){console.log('i1')}, false);
    	myi2.addEventListener('click', function(){console.log('i2')}, false);
    	myi3.addEventListener('click', function(){console.log('i3')}, false);
    	// 默认参数为 false, false 为冒泡, true 为捕捉
    </script>
    </body>
    </html>
    

    执行结果:
    i3
    i2
    i1

    执行顺序

    以上面代码为例,更改addEventListener参数,得到不同的结果:

    说明addEventListener从上级元素向下寻找,遇到true就先执行,遇到false就继续向下一级寻找,直到没有下一级

  • 相关阅读:
    Activity 与ListActivity的区别
    自定义标题栏
    解决小程序无法触发SESSION问题
    js数组与字符串经常用的几种简单的方法
    python程序与进制的执行过程
    常问的 web前端 问题
    如何判断页面滑到了屏幕最底部
    http请求状态保持的四种方法
    vue知识点归纳与总结(笔记)
    Nginx常用命令及使用场景
  • 原文地址:https://www.cnblogs.com/dbf-/p/10775874.html
Copyright © 2011-2022 走看看