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" onclick="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标签就不会执行打开链接这个动作了