javascript事件详解笔记：

一、事件流

     1、事件流：

               描述的是页面中接受事件的顺序,有事件冒泡、事件捕获两种。

     2、事件冒泡：

               由最具体的元素接收，然后逐级向上传播到最不具体的元素的节点（文档）。 

     3、事件捕获：

               最不具体的节点先接收事件，而最具体的节点应该是最后接收事件。 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>事件</title>

</head>

<body>

<div id="div1">

    <button id="btn1">按钮</button>

</div>

</body>

</html> 

1、事件冒泡情况——这种情况使用得最多：

    点击按钮后，最先由button#btn1接收，然后传递给它的父级div#div1，然后再上级上html,再上级是document,最顶级是window.

    所有浏览器都支持 window 对象。它表示浏览器窗口。 

    所有Javascript全局对象、函数以及变量均自动成为 window 对象的成员。(全局变量是 window 对象的属性,全局函数是 window 对象的方法)。HTML DOM 的 document 也是 window 对象的属性之一.


2、事件捕获情况：

    点击按钮后最先由document接收，然后是div#div1,然后是button#btn1

二、事件处理

     1、HTML事件处理：

               直接添加到HTML结构中。 

<div id="div">

    <button id="btn1" οnclick="myAlert(‘hello')">按钮</button>

</div>

<script type="text/javascript">

    function myAlert(str){

        alert(str);

    }

</script> 

    

     2、DOM0级事件处理

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

<div id="div">

    <button id="btn1">按钮</button>

</div>

<script type="text/javascript">

    var button = document.getElementById("btn1");

    button.onclick = function(){

            alert("hello");

        }

    button.onclick = null; //清除事件

</script> 

这种方式的缺点是，当有多个事件函数同名时前者会被后者覆盖掉，如 

button.onclick = function(){alert(“hello——1"); }

button.onclick = function(){alert(“hello——2"); }

button.onclick = function(){alert(“hello——3"); } 

//最终只会执行最后一个

     3、DOM2级事件处理——最方便，使用得多

  •                addEventListener(“事件名”, “事件处理函数”, “布尔值”);

  •                true:事件捕获；

  •                false:事件冒泡；

  •                removeEventListener(); 

var button = document.getElementById("btn1");

    button.addEventListener('click',myAlert1);

    button.addEventListener('click',myAlert2);

    function myAlert1(){

        alert("DOM2级事件处理 1");

    }

    function myAlert2(){

        alert("DOM2级事件处理 2");

    }

button.removeEventListener('click',myAlert1);//移除事件 

这种方式会依次把事件执行； 

     4、IE事件处理程序(版本小于等于8的情况)

               attachEvent——作用和用法与addEventListener一样(只是需要在事件前加on，如onclick)

               detachEvent——作用和用法与removeEventListener一样

     5、根据浏览器来应用：

var button = document.getElementById("btn1");

    if(button.addEventListener){

        button.addEventListener('click',myAlert1);

    }else if(button.attachEvent){

    button.attachEvent('onclick',myAlert1);

    }else{

        button.onclick = myAlert1();

    }

    function myAlert1(){

        alert("DOM2级事件处理 1");

    } 

三、事件对象（event/e）

     1、事件对象：

               在触发DOM事件的时候都会产生一个对象； 

     2、事件对象event：

               1) type: 获取事件类型

               2) target: 获取事件目标 

 

var button = document.getElementById("btn1");

    button.addEventListener('click',myAlert);

    function myAlert(event){

        console.log(event.type);//==>click

        console.log(event.target.id);//==>btn1

    } 

    

   3) stopPropagation(): 阻止事件冒泡（向上传递） 

阻止冒泡前：

var button = document.getElementById("btn1");

 button.addEventListener('click',myAlert);

    function myAlert(event){

     console.log(“button元素触发”);

    } 

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

    div.addEventListener('click',   myAlert2);

    function myAlert2(){

        console.log("div元素触发");

    } 


执行后：

button元素触发

div元素触发

//事实上经常是点击按钮后并不想触发div元素事件 

阻止冒泡后：

  function myAlert(event){

        console.log("button元素触发");//==>btn1

        event.stopPropagation();

    } 



//执行结果

button元素触发 

   4) preventDefault(): 阻止事件默认行为

<a href="#" id="aa">我是链接</a>

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

    aa.addEventListener('click', clickA);

    function clickA(event){

        event.preventDefault();

    }


//a标签的默认行为是打开链接，而加入了这个     event.preventDefault();之后再点击a标签就不会执行打开链接这个动作了