DOM事件

基本概念：DOM事件的级别
DOM事件模型
DOM事件流
描述DOM事件捕获的具体流程
Event对象的常见应用
自定义事件



1、事件级别
DOM0 element.onclick = function(){}
DOM2 element.addEventListener('click', function(){}, false)
DOM3 element.addEventListener('keyup', function(){}, false) or other
为什么没有1呢？DOM1设定的时候，没有涉及跟事件相关的改动

 

2、事件模型
捕获 和 冒泡

 

3、事件流
说白了就是浏览器，也就是当前页面与用户做交互的过程中，比如我点击了鼠标，左键，这个左键是怎么传到页面上，这就是事件流，他又是怎么响应的，一个完整的事件流分三个阶段
1）捕获
2）目标阶段：事件通过捕获，到达目标元素
3）冒泡

 

4、描述DOM事件捕获的具体流程
都知道事件捕获是从上到下，那么具体是从哪里开始到呢？其实一开始接收事件的是window,window接收完以后给到document,第三个才是html标签（怎么去表示当前html的节点，document.element）,再就是body，然后再一级一级往下传。与之相当就是冒泡，从当前元素到window的过程

 

5、Event对象的常见应用
event.preventDefault()：阻止默认事件，比如a标签
event.stopPropagation()：阻止冒泡，比如单击子元素的时候做一件事，父元素的那件事不做，就用这个
event.stopImmediatePropagation()：比如我一个按钮绑定了两个click事件，我想通过优先级的方式，a被点击的时候，不要再执行b，如果在a的里面用这个，b就不会再执行
event.currentTarget：比如事件委托的时候，当前绑定的事件元素
event.target：比如事件委托的时候，区分当前哪个元素被点击

  

6、自定义事件
var eve = new Event('custome');
ev.addEventListener('custome', function(){
　　console.log('custome');
})
ev.dispatchEvent(eve);

 

eg:捕获流程
<!--test.html-->
<body>
　　<div id="ev">
　　　　目标元素
　　</div>
　　<script type="text/javascript">
　　　　var ev = document.getElementById('ev');
　　　　/**
　　　　* 第三个参数 设置为true 表示在捕获阶段触发
　　　　* 默认是为false 表示在冒泡阶段触发
　　　　*/
　　　　window.addEventListener('click', function(){
　　　　　　console.log('window captrue');
　　　　}, true);

　　　　document.addEventListener('click', function(){
　　　　　　console.log('document captrue');
　　　　}, true);

　　　　// 怎么获取html元素 就是这个documentElement
　　　　document.documentElement.addEventListener('click', function(){
　　　　　　console.log('html captrue');
　　　　}, true);

　　　　document.body.addEventListener('click', function(){
　　　　　　console.log('body captrue');
　　　　}, true);

　　　　ev.addEventListener('click', function(){
　　　　　　console.log('ev captrue');
　　　　}, true);
　　</script>
</body>

 

 

如图，点击元素的时候，捕获的流程跟我们讲事件流捕获的时候是一样的

 

eg：自定义事件
<!--test.html--->
<body>
　　<div id="ev">
　　　　目标元素
　　</div>

　　<script type="text/javascript">
　　　　var ev = document.getElementById('ev');
　　　　var eve = new Event('test');
　　　　ev.addEventListener('test', function(){
　　　　　　console.log('test dispatch');
　　　　})
　　　　ev.dispatchEvent(eve);
　　</script>
</body>

 

 

刷新页面，自动打印了test dispatch

 

posted @ 2018-12-20 06:49  wzndkj  阅读(178)  评论(0)    收藏  举报