DOM事件基础（一）

1.DOM0级事件

 

在了解DOM0级事件以前，咱们有必要先了解下HTML事件处理程序，也是最先的这一种的事件处理方式，代码以下：

 

<button type="button" onclick="showFn()"></button>

<script>

    function showFn() {

        alert('Hello World');

    }

</script>

优势：不须要操做dom来完成事件的处理

缺点;与HTML JS强耦合一旦修改须要改html和js两个部分

 

那么什么是DOM0级处理事件呢？DOM0级事件就是将一个函数赋值给一个事件处理属性，好比：

<button id="btn" type="button"></button>

<script>

var btn = document.getElementById("btn");

btn.onclick = function(){

alert("hello world")

}

 

//btn.onclick = null 解绑事件

以上代码咱们给button定义了一个id，经过JS获取到了这个id的按钮，并将一个函数赋值给了一个事件处理属性onclick，                           这样的方法即是DOM0级处理事件的体现。

咱们能够经过给事件处理属性赋值null来解绑事件。

 

DOM0级事件处理程序的缺点在于一个处理程序没法同时绑定多个处理函数，好比我还想在按钮点击事件上加上另一个                          函数。

</script>

 

 2.DOM2级事件

 

DOM2级事件在DOM0级事件的基础上弥补了一个处理程序没法同时绑定多个处理函数的缺点，容许给一个处理程序添加多个处                理函数。代码以下：

<input type="button"  id="btn"/>

<script>

var btn = document.getElementById("btn");

 

function showfn(){

alert("hello world")

}

 

btn.addEventListener("click",showFn,false);

// btn.removeEventListener('click', showFn, false); 解绑事件

 

DOM2级事件定义了addEventListener和removeEventListener两个方法，

分别用来绑定和解绑事件，方法中包含3个参数，分别是绑定的事件处理属性名称（不包含on）、

处理函数和是否在捕获时执行事件处理函数。若是咱们还须要添加一个鼠标移入的方法，只须要：

 

btn.addEventListener("mouseover",showFn,false);

 

这样点击按钮和鼠标移入时都将触发showFn方法。

 

须要注意的是IE8级如下版本不支持addEventListener和removeEventListener，须要用attachEvent和detachEvent来实                            现：

 

btn.attachEvent('onclick', showFn); // 绑定事件 

btn.detachEvent('onclick', showFn); // 解绑事件

这里咱们不须要传入第三个参数，由于IE8级如下版本只支持冒泡型事件。

 

3.DOM3级事件

 

DOM3级事件在DOM2级事件的基础上添加了更多的事件类型，所有类型以下：

 

UI事件，当用户与页面上的元素交互时触发，如：load、scroll

焦点事件，当元素得到或失去焦点时触发，如：blur、focus

鼠标事件，当用户经过鼠标在页面执行操做时触发如：dbclick、mouseup

滚轮事件，当使用鼠标滚轮或相似设备时触发，如：mousewheel

文本事件，当在文档中输入文本时触发，如：textInput

键盘事件，当用户经过键盘在页面上执行操做时触发，如：keydown、keypress

合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart

变更事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified

同时DOM3级事件也容许使用者自定义一些事件。

 

DOM事件流

 

上文中讲到了addEventListener的第三个参数为指定事件是否在捕获或冒泡阶段执行，设置为true表示事件在捕获阶段执                            行，设置为true表示事件在捕获阶段执行，而设置为false表示事件在冒泡阶段执行。

那么什么是事件冒泡和事件捕获呢?

 

1.事件冒泡

 

所谓事件冒泡就是事件像泡泡同样从最开始生成的地方一层一层往上冒，好比上图中a标签为事件目标，点击a标签后同时                         也会触发p、li上的点击事件，一层一层向上直至最外层的html或document。

下面是代码示例：

<div id="box">

<a id="child">事件冒泡</a>

</div>

<script>

var box = document.getElementById("box");

child = document.getElementById("child");

 

child.addEventListener("click",function(){

alert("我是目标事件")

},false);

 

child.addEventListener("click",function(){

alert("事件冒泡至div");

},false);

 

上面的代码运行之后点击a标签,首先会弹出"我是目标事件",而后会弹出"冒泡至div"

这就说明事件自下向上冒泡

 

那么咱们该如何阻止事件冒泡呢?

这里涉及到了Event对象中的stopPropagation方法:

 

child.addEventListener("click",function(e){

alert("我是目标事件");

e.stopPropagation();

},false);

加上stopPropagation方法后,咱们再次点击a标签就不会触发div上的click事件了.

 

2.事件捕获

 

和事件冒泡相反，事件捕获是自上而下执行，咱们只须要将addEventListener的第三个参数改成true就行。

 

<div id="box">

     <a id="child">事件冒泡</a>

</div>

 

<script>

 var box = document.getElementById('box'),

 child = document.getElementById('child');

 

 child.addEventListener('click', function() {

     alert('我是目标事件');

 }, true);

 

 box.addEventListener('click', function() {

    alert('事件冒泡至DIV');

 }, true);

 

 此时咱们点击a标签，首先弹出的是'事件冒泡至DIV'，其次弹出的是'我是目标事件'，正好与事件冒泡相反