zoukankan      html  css  js  c++  java
  • Js DOM 详解

    DOM事件类

    基本概念 DOM事件的级别

    1.DOM0 element.onclick = function(){}
    
    2.DOM2 element.addEventListener("click",function(){},false)
    
    3.DOM3 element.addEventListener("key",function(){},falses)
    

    一、DOM事件模型

    
    1.捕获 
    2.冒泡
    
    
    
    

    二、DOM事件流

    当浏览器和用户交互的时候
    
    事件捕获 - 目标 - 冒泡
    
    
        
    

    三、描述DOM事件捕获的具体流程

    具体流程: window - document - html - boby - element
    
    

    四、Event对象的常见应用

    elent.preventDefault() 阻止默认事件
    elent.stopPropagation() 阻止冒泡流
    elent.stopImmediatePropagation() 可以阻止当前事件向祖辈元素的冒泡传递,也就是说该事件不会触发执行当前元素的任何祖辈元素的任何事件处理函数。
    
    elent.currentTarge()  当前被点击的元素
    elent.target()  
    当前被绑定的元素 (父元素)
    
    

    五、自定义事件

    var eve = new Event("custome");
    
    ev.addEventListener("custome",function(){
        
        console.log("custome");
    })
    
    触发:
    
    ev.dispatchEvent(eve);
    
    

    代码演示

    <body>
    
    	<div id="ev">
    
    		<style type="text/css">
    			
    			#ev{
    				 300px;
    				height:100px;
    				background: red;
    				color: #fff;
    				text-align: center;;
    				line-height: 100px;
    			}
    		</style>
    		
    		目标元素
    
    	</div>
    	<script type="text/javascript">
    		
    		// 捕获的流程 window-document - body - html - ev
    
    		// **如果是冒泡 把 true 改为false
    
    		// window
    
    		var ev = document.getElementById("ev");
    
    		window.addEventListener("click",function(){
    
    			console.log("window captrue");
    
    		},true);
    
    		// document
    
    		document.addEventListener("click",function(){
    
    			console.log("document captrue");
    
    		},true);
    
    		// body
    
    		document.documentElement.addEventListener("click",function(){
    
    			console.log("body captrue");
    		},true)
    
    		// html
    
    		document.documentElement.addEventListener("click",function(){
    
    			console.log("html captrue");
    		},true)
    
    		// body
    
    		document.documentElement.addEventListener("click",function(){
    
    			console.log("body captrue");
    		},true)
    
    		// click
    
    		ev.addEventListener("click",function(){
    
    			console.log("ev captrue");
    		},true)
    
    		// 自定义事件
    
    		var ev = new Event("test");
    
    		ev.addEventListener("test",function () {
    
    			console.log("test dispath");
    		})
    
    		ev.dispatchEvent(eves);
    
    
    	</script>
    </body>
    
    

    当点击触发div时候,事件发生的顺序为:

    window captrue
    js.dom.html:54 document captrue
    js.dom.html:62 body captrue
    js.dom.html:69 html captrue
    js.dom.html:76 body captrue
    js.dom.html:83 ev captrue
    
  • 相关阅读:
    蒟蒻Orion还要学的东西!
    一些技巧 && 常数优化 && 出现の错误 [绝赞更新中!]
    [US Open 2004][luogu2342] 叠积木 [带权并查集]
    省选算法学习·一些数列相关的数学知识 [数学]
    [BJOI2019] 奥术神杖 [取log+AC自动机+dp]
    [BJOI2019] 删数 [dp转贪心结论+线段树]
    [2018国家集训队][UOJ449] 喂鸽子 [dp+组合数学]
    [2018集训队作业][UOJ424] count [笛卡尔树+括号序列+折线法+组合数学]
    [2018集训队作业][UOJ450] 复读机 [DP+泰勒展开+单位根反演]
    [SDOI2014][BZOJ3533] 向量集 [线段树+凸包]
  • 原文地址:https://www.cnblogs.com/liangfengbo/p/7439717.html
Copyright © 2011-2022 走看看