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{
				width: 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