javascript DOM事件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yin_991/article/details/86682572

1、DOM事件的级别

DOM 0级事件

element.onclick=function(){}

DOM 2级事件

element.addEventListener('click',function(){},false)

DOM 3级事件

element.addEventListener('keyup',function(){},false);

2、DOM的事件模型

事件捕获    由上往下执行

事件冒泡    由下往上执行

3、DOM的事件流

事件捕获=>目标阶段=>事件冒泡

4、事件捕获/冒泡的具体流程

事件捕获流程：window => document => document.documentElement => document.body => ... => 目标元素

事件冒泡流程：目标元素 => document.body => document.documentElement => document => window

其中document指的是文档，document.documentElement指的是html元素

5、event对象的常见应用

event.preventDefault();    阻止默认行为

event.stopPropagation();   阻止冒泡行为

event.stopImmediatePropagation();  这个方法可以绑定在一个定义了多个事件的元素上，如果在这个元素的某个事件上写了这个方法，那么就会阻止这个元素的其他的事件的响应。

event.target      指的是响应事件的当前的元素

event.currentTarget   指的是注册事件的元素，即使触发的是子元素，event.currenTarget指向的也依然是注册事件的元素。

6、自定义事件

var eve=new Event('custome');       ||  var eve2=new CustomeEvent('custome',data);

ev.addEventListener('custome',function(){

      console.log();

});

ev.dispathEvent(eve);