zoukankan      html  css  js  c++  java
  • 关于0级DOM /2级DOM 事件的执行顺序

    在DOM事件流中,触发分为三个阶段
    捕捉 ---- 目标 ----- 冒泡
    最下面的html案例中,进行了阶段的测试,以及每个事件流的触发顺序
    0级DOM事件 为:

    <input type="text" name='input1' id='input2' value="input3">
    
    document.getElementById('button2').onclick = function () {
    		alert(2);
    	}
    

    2级别DOM事件为:

    // 捕捉阶段
    document.getElementById('button2').addEventListener('click',function(){alert(3)},true);
    // 冒泡阶段
    document.getElementById('button2').addEventListener('click',function(){alert(4)},false);
    

    触发顺序为:2 3 4

    <!doctype html>
    <html>
    <head></head>
    <body>
    	<form name='form1'>
    	<div>
    	<div>
    	<input type="text" name='input1' id='input2' value="input3">
    	<input type="button" name ='button1' id='button2' value="button3" onclick="alert(1)">
    	</form>
    	<form name='form2'>
    	</form>
    	</div>
    	</div>
    </body>
    <script type="text/javascript">
    	// 结果触发流程   2 3 4
    	// 0 级别  DOM事件 替代了onclick原始事件模型
    	document.getElementById('button2').onclick = function () {
    		alert(2);
    	}
    	// 2 级 DOM 事件  标准事件模型
    	// 捕捉阶段
    	document.getElementById('button2').addEventListener('click',function(){alert(3)},true);
    	// 冒泡阶段
    	document.getElementById('button2').addEventListener('click',function(){alert(4)},false);
    </script>
    </html>
    
  • 相关阅读:
    组件之间通信(父传子)
    flex布局
    ffmpeg解析TS流(转)
    swift之?和!的含义(转)
    Swift之画圆角添加多个枚举值方法
    swift之singleton
    swift之闭包
    Swift之fallthrough
    Selector
    Settings Bundle
  • 原文地址:https://www.cnblogs.com/osinger/p/6015331.html
Copyright © 2011-2022 走看看