javaScript事件（一）事件流

一、事件

事件是文档或者浏览器窗口中发生的，特定的交互瞬间。

事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。

事件是javaScript和DOM之间交互的桥梁。

你若触发，我便执行——事件发生，调用它的处理函数执行相应的JavaScript代码给出响应。

典型的例子有：页面加载完毕触发load事件；用户单击元素，触发click事件。

二、事件流

事件流描述的是从页面中接收事件的顺序。

1、事件流感性认识

问题：单击页面元素，什么样的元素能感应到这样一个事件？

答案：单击元素的同时，也单击了元素的容器元素，甚至整个页面。

例子：有三个同心圆，给每个圆添加对应的事件处理函数，弹出对应的文字。单击最里面的圆，同时也单击了外面的圆，所以外面圆的click事件也会被触发。

 
       
     
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    #outer{
        position: absolute;
        width: 400px;
        height: 400px;
        top:0;
        left: 0;
        bottom:0;
        right: 0;
        margin: auto;
        background-color: deeppink;
    }
    #middle{
        position: absolute;
        width: 300px;
        height:300px;
        top:50%;
        left: 50%;
        margin-left: -150px;
        margin-top: -150px;
        background-color: deepskyblue;
    }
    #inner{
        position: absolute;
        width: 100px;
        height:100px;
        top:50%;
        left:50%;
        margin-left: -50px;
        margin-top: -50px;;
        background-color: darkgreen;
        text-align: center;
        line-height: 100px;
        color:white;
    }
    #outer,#middle,#inner{
border-radius:100%;
    }
</style>
<body>
<div id="outer">
   <div id="middle">
        <div id="inner">
            click me!
        </div>
    </div>
</div>
<script>
       var innerCircle= document.getElementById("inner");
        innerCircle.onclick= function () {
            alert("innerCircle");
        };
        var middleCircle= document.getElementById("middle");
        middleCircle.onclick=function(){
            alert("middleCircle");
        }
        var outerCircle= document.getElementById("outer");
        outerCircle.onclick= function () {
            alert("outerCircle");
        }
</script>
</body>
</html> 
       
     

效果如下：

2、事件流

事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。

1、两种事件流模型

事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流。

冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】

捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。

事件捕获的思想就是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="myDiv">Click me!</div>
</body>
</html>

上面这段html代码中，单击了页面中的<div>元素，

在冒泡型事件流中click事件传播顺序为<div>—》<body>—》<html>—》document

在捕获型事件流中click事件传播顺序为document—》<html>—》<body>—》<div>

note:

1）、所有现代浏览器都支持事件冒泡，但在具体实现中略有差别：

IE5.5及更早版本中事件冒泡会跳过<html>元素(从body直接跳到document)。

IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。

2）、IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。

3）、由于老版本浏览器不支持，很少有人使用事件捕获。建议使用事件冒泡。

2、DOM事件流

DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。

DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

事件捕获阶段：实际目标（<div>）在捕获阶段不会接收事件。也就是在捕获阶段，事件从document到<html>再到<body>就停止了。上图中为1~3.
处于目标阶段：事件在<div>上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。
冒泡阶段：事件又传播回文档。

note:

1）、尽管“DOM2级事件”标准规范明确规定事件捕获阶段不会涉及事件目标，但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两次机会在目标对象上面操作事件。

2）、并非所有的事件都会经过冒泡阶段。所有的事件都要经过捕获阶段和处于目标阶段，但是有些事件会跳过冒泡阶段：如，获得输入焦点的focus事件和失去输入焦点的blur事件。

两次机会在目标对象上面操作事件例子：

 
       
     
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    #outer{
        position: absolute;
        width: 400px;
        height: 400px;
        top:0;
        left: 0;
        bottom:0;
        right: 0;
        margin: auto;
        background-color: deeppink;
    }
    #middle{
        position: absolute;
        width: 300px;
        height:300px;
        top:50%;
        left: 50%;
        margin-left: -150px;
        margin-top: -150px;
        background-color: deepskyblue;
    }
    #inner{
        position: absolute;
        width: 100px;
        height:100px;
        top:50%;
        left:50%;
        margin-left: -50px;
        margin-top: -50px;;
        background-color: darkgreen;
        text-align: center;
        line-height: 100px;
        color:white;
    }
    #outer,#middle,#inner{
border-radius:100%;
    }
</style>
<body>
<div id="outer">
   <div id="middle">
        <div id="inner">
            click me!
        </div>
    </div>
</div>
<script>
       var innerCircle= document.getElementById("inner");
        innerCircle.onclick= function () {
            alert("innerCircle");
        };
        var middleCircle= document.getElementById("middle");
        middleCircle.onclick=function(){
            alert("middleCircle");
        }
        var outerCircle= document.getElementById("outer");
        outerCircle.onclick= function () {
            alert("outerCircle");
        }
</script>
</body>
</html>

运行效果就是会陆续弹出6个框，为说明原理我整合成了一个图：

3、事件流的典型应用事件代理

传统的事件处理中，需要为每个元素添加事件处理器。js事件代理则是一种简单有效的技巧，通过它可以把事件处理器添加到一个父级元素上，从而避免把事件处理器添加到多个子级元素上。

1、事件代理

事件代理的原理用到的就是事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素事件冒泡，并且父元素能够通过target（IE为srcElement）判断是哪个子元素，从而做相应处理。关于target更多内容请参考javaScript事件（四）event的公共成员（属性和方法）下面举例来说明。

传统事件处理，为每个元素添加事件处理器，代码如下：

 
       
     
<body>
<ul id="color-list">
<li>red</li>
<li>orange</li>
<li>yellow</li>
<li>green</li>
<li>blue</li>
<li>indigo</li>
<li>purple</li>
</ul>
<script>
(function(){
    var colorList=document.getElementById("color-list");
    var colors=colorList.getElementsByTagName("li");
    for(var i=0;i<colors.length;i++)
    {
        colors[i].addEventListener('click',showColor,false);
    };
    function showColor(e)
    {
        e=e||window.event;
        var targetElement=e.target||e.srcElement;
        alert(targetElement.innerHTML);
    }
})();
</script>
</body> 
       
     

事件代理的处理方式，代码如下：

<body>
<ul id="color-list">
<li>red</li>
<li>orange</li>
<li>yellow</li>
<li>green</li>
<li>blue</li>
<li>indigo</li>
<li>purple</li>
</ul>
<script>
(function(){
    var colorList=document.getElementById("color-list");
    colorList.addEventListener('click',showColor,false);
    function showColor(e)
    {
        e=e||window.event;
        var targetElement=e.target||e.srcElement;
        if(targetElement.nodeName.toLowerCase()==="li"){
        alert(targetElement.innerHTML);
        }
    }
})();
</script>
</body>

2、事件代理的好处

总结一下事件代理的好处：

将多个事件处理器减少到一个，因为事件处理器要驻留内存，这样就提高了性能。想象如果有一个100行的表格，对比传统的为每个单元格绑定事件处理器的方式和事件代理（即table上添加一个事件处理器），不难得出结论，事件代理确实避免了一些潜在的风险，提高了性能。
DOM更新无需重新绑定事件处理器，因为事件代理对不同子元素可采用不同处理方法。如果新增其他子元素（a,span,div等），直接修改事件代理的事件处理函数即可，不需要重新绑定处理器，不需要再次循环遍历。

3、事件代理的问题：【update20170502】

代码如下：事件代理同时绑定了li和span，当点击span的时候，li和span都会冒泡。

<li><span>li中的span的内容</span></li>

<script>
    $(document).on('click', 'li', function(e){
        alert('li li');
    });

    $(document).on('click', 'span', function(e){
        alert('li span');
    })
</script>

解决办法：

方法一：span的事件处理程序中阻止冒泡

 $(document).on('click', 'span', function(e){
        alert('li span');
        e.stopPropagation();
    })

方法二：li的事件处理程序中检测target元素

 $(document).on('click', 'li', function (e) {
        if (e.target.nodeName == 'SPAN') {
            e.stopPropagation();
            return;
        }
        alert('li li');
    });

4、事件代理的一个有趣应用【update20170502】

点击一个列表时，输出对应的索引

<script>
    var ul=document.querySelector('ul');
    var lis=ul.querySelectorAll('ul li');
    ul.addEventListener('click', function (e) {
        var target= e.target;
        if(target.nodeName.toUpperCase()==='LI'){
            alert([].indexOf.call(lis,target));
        }
    },false)
</script>

三、事件处理程序

前面提到，事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。响应某个事件的函数就叫事件处理程序（也叫事件处理函数、事件句柄）。事件处理程序的名字以"on"开头，因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload。

为事件指定事件处理程序的方法主要有3种。

1、html事件处理程序

事件直接加在html元素上。

首先，这种方法已经过时了。因为动作(javascript代码)和内容(html代码)紧密耦合，修改时即要修改html也要修改js。但是写个小demo的时候还是可以使用的。

这种方式也有两种方法，都很简单：

第一种：直接在html中定义事件处理程序及包含的动作。

<input type="button" value="click me!" onclick="alert('clicked!')"/>

第二种：html中定义事件处理程序，执行的动作则调用其他地方定义的脚本。

<input type="button" value="click me!" onclick="showMessage()"/>
<script>
function showMessage(){
    alert("clicked!");
}
</script>

note:

1）通过event变量可以直接访问事件本身，比如onclick="alert(event.type)"会弹出click事件。

2）this值等于事件的目标元素，这里目标元素是input。比如 onclick="alert(this.value)"可以得到input元素的value值。

2、DOM0级事件处理程序

把一个函数赋值给一个事件处理程序属性。

这种方法简单而且跨浏览器，但是只能为一个元素添加一个事件处理函数。

因为这种方法为元素添加多个事件处理函数，则后面的会覆盖前面的。

添加事件处理程序：

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.onclick=function(){
        alert("clicked!");
    }
</script>

分析：

/*
第一步：myBtn=document.getElementById("myBtn");取得btn对象
第二步：myBtn.onclick其实相当于给myBtn添加了一个onclick的属性。
第三步：myBtn.onclick=function(){
    alert("clicked!");
}
把函数赋值给onclick事件处理程序属性。
*/

删除事件处理程序：

    myBtn.onclick=null;

3、DOM2级事件处理程序

DOM2级事件处理程序可以为一个元素添加多个事件处理程序。其定义了两个方法用于添加和删除事件处理程序：addEventListener()和removeEventListener()。

所有的DOM节点都包含这2个方法。

这两个方法都需要3个参数：事件名，事件处理函数，布尔值。

这个布尔值为true,在捕获阶段处理事件，为false，在冒泡阶段处理事件，默认为false。

添加事件处理程序：现在为按钮添加两个事件处理函数，一个弹出“hello”,一个弹出“world”。

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.addEventListener("click",function(){
        alert("hello");
    },false);
    myBtn.addEventListener("click",function(){
        alert("world");
    },false);
</script>

删除事件处理程序：通过addEventListener添加的事件处理程序必须通过removeEventListener删除，且参数一致。

note:通过addEventListener添加的匿名函数将无法删除。下面这段代码将不起作用！

    myBtn.removeEventListener("click",function(){
        alert("world");
    },false);

看似该removeEventListener与上面的addEventListener参数一致，实则第二个参数中匿名函数是完全不同的。

所以为了能删除事件处理程序，代码可以这样写：

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    var handler=function(){
        alert("hello");
    }
    myBtn.addEventListener("click",handler,false);
    myBtn.removeEventListener("click",handler,false);
</script>

四、IE事件处理程序

1、实际应用场景

IE8及以下浏览器不支持addEventListener，在实际开发中如果要兼容到IE8及以下浏览器。如果用原生的绑定事件，需要做兼容处理，可利用jquery的bind代替。

2、IE8事件绑定

IE8及以下版本浏览器实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。

这两个方法都需要两个参数：事件处理程序名称和事件处理程序函数。由于IE8及更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。注意是事件处理程序名称而不是事件名称，所以要加上on，是onclick而不是click。

note:

IE11只支持addEventListener！

IE9，IE10对attachEvent和addEventListener都支持！

TE8及以下版本只支持attachEvent！

可以拿下面代码在IE各个版本浏览器中进行测试。

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    var handlerIE=function(){
        alert("helloIE");
    }
    var handlerDOM= function () {
        alert("helloDOM");
    }
    myBtn.addEventListener("click",handlerDOM,false);
    myBtn.attachEvent("onclick",handlerIE);
</script>

添加事件处理程序：现在为按钮添加两个事件处理函数，一个弹出“hello”,一个弹出“world”。

<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.attachEvent("onclick",function(){
        alert("hello");
    });
    myBtn.attachEvent("onclick",function(){
        alert("world");
    });
</script>

note:这里运行效果值得注意一下：

IE8以下浏览器中先弹出“world”，再弹出“hello”。和DOM中事件触发顺序相反。

IE9及以上浏览器先弹出“hello”，再弹出“world”。和DOM中事件触发顺序相同了。

可见IE浏览器慢慢也走上正轨了。。。

删除事件处理程序:通过attachEvent添加的事件处理程序必须通过detachEvent方法删除，且参数一致。

和DOM事件一样，添加的匿名函数将无法删除。

所以为了能删除事件处理程序，代码可以这样写：

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    var handler= function () {
        alert("hello");
    }
    myBtn.attachEvent("onclick",handler);
    myBtn.detachEvent("onclick",handler);
</script>

note:IE事件处理程序中还有一个地方需要注意：作用域。

使用attachEvent()方法，事件处理程序会在全局作用域中运行，因此this等于window。

而dom2或dom0级的方法作用域都是在元素内部，this值为目标元素。

下面例子会弹出true。

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.attachEvent("onclick",function(){
        alert(this===window);
    });
</script>

在编写跨浏览器的代码时，需牢记这点。

IE7\8检测：

 //判断IE7\8 兼容性检测
            var isIE=!!window.ActiveXObject;
            var isIE6=isIE&&!window.XMLHttpRequest;
            var isIE8=isIE&&!!document.documentMode;
            var isIE7=isIE&&!isIE6&&!isIE8;
             
            if(isIE8 || isIE7){
                li.attachEvent("onclick",function(){
                    _marker.openInfoWindow(_iw);
                })    
            }else{
                li.addEventListener("click",function(){
                    _marker.openInfoWindow(_iw);
                })
            }

五、事件对象

什么是事件对象？在触发DOM上的事件时都会产生一个对象。

1、认识事件对象

事件在浏览器中是以对象的形式存在的，即event。触发一个事件，就会产生一个事件对象event，该对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

例如：鼠标操作产生的event中会包含鼠标位置的信息；键盘操作产生的event中会包含与按下的键有关的信息。

所有浏览器都支持event对象，但支持方式不同，在DOM中event对象必须作为唯一的参数传给事件处理函数，在IE中event是window对象的一个属性。

2、html事件处理程序中event

<input id="btn" type="button" value="click" onclick=" console.log('html事件处理程序'+event.type)"/>

这样会创建一个包含局部变量event的函数。可通过event直接访问事件对象。

3、DOM中的事件对象

DOM0级和DOM2级事件处理程序都会把event作为参数传入。

根据习惯来：可以用e，或者ev或者event。

<body>
<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.onclick=function(event){
        console.log("DOM0 & click");
        console.log(event.type);    //click
    }
    btn.addEventListener("click", function (event) {
        console.log("DOM2 & click");
        console.log(event.type);    //click
    },false);
</script>
</body>

DOM中事件对象重要属性和方法。总结：【update 20170313】

属性：

type属性，用于获取事件类型
target属性用户获取事件目标事件加在哪个元素上。（更具体target.nodeName）

方法：

stopPropagation()方法用于阻止事件冒泡
preventDefault()方法阻止事件的默认行为移动端用的多

4、IE中的事件对象

第一种情况：通过DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。

<body>
<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.onclick= function () {
        var event=window.event;
       console.log(event.type); //click
    }
</script>
</body>

第二种情况：通过attachEvent()添加的事件处理程序，event对象作为参数传入。

<body>
<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.attachEvent("onclick", function (type) {
        console.log(event.type);    //click
    })
</script>
</body>

IE中事件对象重要属性和方法。总结：【update 20170313】

属性：

type属性，用于获取事件类型(一样)
srcElement属性用户获取事件目标事件加在哪个元素上。（更具体target.nodeName）

//兼容性处理
function showMsg(event){
    event=event||window.event;  //IE8以前必须是通过window获取event，DOM中就是个简单的传参
    var ele=event.target || event.srcElement; //获取目标元素，DOM中用target,IE中用srcElement
    alert(ele);
 }

cancelBubble属性用于阻止事件冒泡 IE中cancelBubble为属性而不是方法，true表示阻止冒泡。

returnValue属性阻止事件的默认行为 false表示阻止事件的默认行为

但是我有两个地方不懂。

1、通过DOM0级方法添加的事件处理程序中同样可以传入一个event参数，它的type和window.event.type一样，但是传入的event参数却和window.event不一样，为什么？

    btn.onclick= function (event) {
        var event1=window.event;
        console.log('event1.type='+event1.type);  //event1.type=click
        console.log('event.type='+event.type);    //event.type=click
        console.log('event1==event?'+(event==event1));  //event1==event?false
    }

2、通过attachEvent添加的事件处理程序中传入的event和window.event是不一样的，为什么？

<body>
<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.attachEvent("onclick", function (type) {
        console.log(event.type);    //click
        console.log("event==window.event?"+(event==window.event)); //event==window.event?false
    })
</script>
</body>

六、事件对象的公共成员

1、DOM中的event的公共成员

event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法不一样。但是，DOM中所有事件都有以下公共成员。【注意bubbles属性和cancelable属性】

属性/方法	类型	读/写	说明
bubbles	Boolean	只读	表明事件是否冒泡
stopPropagation()	Function	只读	取消事件的进一步捕获或冒泡。如果bubbles为true,则可以使用这个方法
stopImmediatePropagation()	Function	只读	取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3级事件中新增）
cancelable	Boolean	只读	表明是否可以取消事件的默认行为
preventDefault()	Function	只读	取消事件的默认行为。如果cancelable是true，则可以使用这个方法
defaultPrevented	Boolean	只读	为true表示已经调用了preventDefault()(DOM3级事件中新增)
currentTarget	Element	只读	其事件处理程序当前正在处理事件的那个元素（currentTarget始终===this,即处理事件的元素）
target	Element	只读	直接事件目标，真正触发事件的目标
detail	Integer	只读	与事件相关的细节信息
eventPhase	Integer	只读	调用事件处理程序的阶段：1表示捕获阶段，2表示处于目标阶段，3表示冒泡阶段
trusted	Boolean	只读	为true表示事件是由浏览器生成的。为false表示事件是由开发人员通过JavaScript创建的（DOM3级事件中新增）
type	String	只读	被触发的事件的类型
view	AbstractView	只读	与事件关联的抽象视图。等同于发生事件的window对象

1、对比currentTarget和target

在事件处理程序内部，对象this始终等于currentTarget的值，而target则只是包含事件的实际目标。

举例：页面有个按钮，在body（按钮的父节点）中注册click事件，点按钮时click事件会冒泡到body进行处理。

<body>
<input id="btn" type="button" value="click"/>
<script>
    document.body.onclick=function(event){
        console.log("body中注册的click事件");
        console.log("this===event.currentTarget? "+(this===event.currentTarget)); //true
        console.log("currentTarget===document.body?"+(event.currentTarget===document.body)); //true
        console.log('event.target===document.getElementById("btn")? '+(event.target===document.getElementById("btn"))); //true
    }
</script>
</body>

运行结果为：

2、通过type属性，可以在一个函数中处理多个事件。

原理：通过检测event.type属性，对不同事件进行不同处理。

举例：定义一个handler函数用来处理3种事件：click,mouseover,mouseout。

<body>
<input id="btn" type="button" value="click"/>
<script>
var handler=function(event){
    switch (event.type){
        case "click":
            alert("clicked");
            break;
        case "mouseover":
            event.target.style.backgroundColor="pink";
            break;
        case "mouseout":
            event.target.style.backgroundColor="";
    }
};
    var btn=document.getElementById("btn");
    btn.onclick=handler;
    btn.onmouseover=handler;
    btn.onmouseout=handler;
</script>
</body>

运行效果：点击按钮，弹出框。鼠标经过按钮，按钮背景色变为粉色；鼠标离开按钮，背景色恢复默认。

3、stopPropagation()和stopImmediatePropagation()对比

同：stopPropagation()和 stopImmediatePropagation()都可以用来取消事件的进一步捕获或冒泡。

异：二者的区别在于当一个事件有多个事件处理程序时，stopImmediatePropagation()可以阻止之后事件处理程序被调用。

举例：

 
       
     
<body>
<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.addEventListener("click",function(event){
        console.log("buttn click listened once");
//    event.stopPropagation();//取消注释查看效果
//    event.stopImmediatePropagation();//取消注释查看效果
    },false);
    btn.addEventListener("click",function(){
        console.log("button click listened twice");
    },false);
    document.body.onclick= function (event) {
        console.log("body clicked");
    }
</script>
</body> 
       
     

运行效果：

4、eventPhase

eventPhase值在捕获阶段为1，处于目标阶段为2，冒泡阶段为3。

常量	值
Event.CAPTURING_PHASE	1
Event.AT_TARGET	2
Event.BUBBLING_PHASE	3

可以通过下面代码查看：

var btn=document.getElementById("btn");
btn.onclick= function (event) {
console.log(event.CAPTURING_PHASE); //1
console.log(event.AT_TARGET); //2
console.log(event.BUBBLING_PHASE); //3
}

例子：

 
       
     
<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick= function (event) {
    console.log("按钮DOM0级方法添加事件处理程序eventPhase值为？"+event.eventPhase);
}
btn.addEventListener("click",function(event){
    console.log("按钮DOM2级方法添加事件处理程序，且addEventListener第三个参数为true时eventPhase值为？"+event.eventPhase);
},true);
btn.addEventListener("click",function(event){
    console.log("按钮DOM2级方法添加事件处理程序，且addEventListener第三个参数为false时eventPhase值为？"+event.eventPhase);
},false);
    document.body.addEventListener("click", function (event) {
        console.log("body上添加事件处理程序，且在捕获阶段eventPhase值为？"+event.eventPhase);
    },true);
document.body.addEventListener("click", function (event) {
    console.log("body上添加事件处理程序，且在冒泡阶段eventPhase值为？"+event.eventPhase);
},false);
</script> 
       
     

运行效果：

2、IE中event的公共成员

IE中的event的属性和方法和DOM一样会随着事件类型的不同而不同，但是也有一些是所有对象都有的公共成员，且这些成员大部分有对应的DOM属性或方法。

属性/方法	类型	读/写	说明
cancelBubble	Boolean	读/写	默认为false,但将其设置为true就可以取消事件冒泡（与DOM中stopPropagation()方法的作用相同）
returnValue	Boolean	读/写	默认为true，但将其设置为false就可以取消事件的默认行为（与DOM中的preventDefault()方法的作用相同）
srcElement	Element	只读	事件的目标（与DOM中的target属性相同）
type	String	只读	被触发的事件的类型

七、鼠标事件

DOM3级事件中定义了9个鼠标事件。

mousedown:鼠标按钮被按下（左键或者右键）时触发。不能通过键盘触发。
mouseup:鼠标按钮被释放弹起时触发。不能通过键盘触发。
click:单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。
dblclick:双击鼠标左键时触发。
mouseover:鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。
mouseout:鼠标移出目标元素上方。
mouseenter:鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发。
mouseleave:鼠标移出元素范围时触发，该事件不冒泡，即鼠标移到其后代元素时不会触发。
mousemove:鼠标在元素内部移到时不断触发。不能通过键盘触发。

note:

在一个元素上相继触发mousedown和mouseup事件，才会触发click事件。两次click事件相继触发才会触发dblclick事件。

如果取消了mousedown或mouseup中的一个，click事件就不会被触发。直接或间接取消了click事件，dblclick事件就不会被触发了。

1、事件触发的顺序

举例：通过双击按钮，看一下上面触发的事件。

 
       
     
<body>
<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.addEventListener("mousedown",function(event){
        console.log("mousedown");
    },false);
    btn.addEventListener("mouseup",function(){
        console.log("mouseup");
    },false);
    btn.addEventListener("click", function () {
        console.log("click");
    },false);
    btn.addEventListener("dblclick", function () {
        console.log("dblclick");
    },false);
</script>
</body> 
       
     

2、mouseenter和mouseover的区别

区别：

mouseover事件会冒泡，这意味着，鼠标移到其后代元素上时会触发。

mouseenter事件不冒泡，这意味着，鼠标移到其后代元素上时不会触发。

举例：

 
       
     
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #outer{
            position: absolute;
            width: 200px;
            height: 200px;
            top:0;
            left: 0;
            bottom:0;
            right: 0;
            margin: auto;
            background-color: pink;
        }
        #inner{
            position: absolute;
            width: 100px;
            height:100px;
            top:50%;
            left:50%;
            margin-left: -50px;
            margin-top: -50px;;
            background-color: orange;
            text-align: center;
            line-height: 100px;
        }
        #outer,#inner{
            border-radius:50%;
        }
    </style>
    <script src="jquery-2.1.1.min.js"></script>
</head>
<body>
<body>
<div id="outer">
        <div id="inner">
        </div>
</div>
</body>
<script>
var parentDiv=document.getElementById("outer");
parentDiv.addEventListener("mouseover", function () {
     console.log("父div的mouseover事件被触发");
},false);

//parentDiv.addEventListener("mouseenter", function () {
//    console.log("父div的mouseenter事件被触发");
//},false);
//parentDiv.addEventListener("mouseout", function () {
//    console.log("父div的mouseout事件被触发");
//},false);
//parentDiv.addEventListener("mouseleave", function () {
//    console.log("父div的mouseleave事件被触发");
//},false);
</script>
</body>
</html> 
       
     

note:

mouseover对应mouseout,mouseenter对应mouseleave。效果可以取消上面代码的注释来看。

jquery中hover API是把mouseenter 和mouseleave组合在一起来用的。

3、鼠标左键和右键

<script type="text/javascript">
document.onmousedown=function (ev)
{
    var oEvent=ev||event; //IE浏览器直接使用event或者window.event得到事件本身。
    alert(oEvent.button);// IE下鼠标的 左键是1 ，  右键是2   ff和chrome下 鼠标左键是0  右键是2
};
</script>

4、mouseover和mousemove的区别

一般情况下mouseover即可，特殊情况才用mousemove，mousemove更耗资源，比如要监控鼠标坐标的变化等。

待续。。。

本文作者 starof ,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处： http://www.cnblogs.com/starof/p/4106904.html 有问题欢迎与我讨论，共同进步。

javaScript基础事件

javaScript事件（一）事件流

一、事件

二、事件流

1、事件流感性认识

2、事件流

1、两种事件流模型

2、DOM事件流

3、事件流的典型应用事件代理

1、事件代理

2、事件代理的好处

3、事件代理的问题：【update20170502】

4、事件代理的一个有趣应用【update20170502】

三、事件处理程序

1、html事件处理程序

2、DOM0级事件处理程序

3、DOM2级事件处理程序

四、IE事件处理程序

1、实际应用场景

2、IE8事件绑定

五、事件对象

1、认识事件对象

2、html事件处理程序中event

3、DOM中的事件对象

4、IE中的事件对象

六、事件对象的公共成员

1、DOM中的event的公共成员

1、对比currentTarget和target

2、通过type属性，可以在一个函数中处理多个事件。

3、stopPropagation()和stopImmediatePropagation()对比

4、eventPhase

2、IE中event的公共成员

七、鼠标事件

1、事件触发的顺序

2、mouseenter和mouseover的区别

3、鼠标左键和右键

4、mouseover和mousemove的区别

猜你喜欢