事件對象

第一章: DOM2事件

1.addEventListener()

? 語法: element.addEventListener( event,function(){ },boolean);

? 參數(shù)1: 必寫 要添加的事件 這里直接用" "或者 ' ' 將事件名添加進(jìn)去就行, 如 'click' 'mouseover' 等等.

? 參數(shù)2: 必寫 事件處理程序的函數(shù)

? 參數(shù)3: 可選 true/false true : 捕獲 false/不寫: 冒泡(默認(rèn))

如給按鈕添加click事件,以下三個(gè)例題效果相同

把事件名和函數(shù)都寫在DOM2內(nèi):

例1:

btn.addEventListener('click', function( ){  
        console.log('click  1');
})

也可以把函數(shù)寫在DOM2事件外面, 并在DOM2內(nèi)引用:

如例2:

    function foo(){
        console.log('click  1');
}
    btn.addEventListener('click', foo );    

函數(shù)在外聲明,并在DOM2事件內(nèi)部賦值:

如例3:

    var foo;
    btn.addEventListener('click', foo = function( ){    
            console.log('click  1');
})

2.removeEventListener()

? 移除事件

? 語法以及參數(shù)和addEventListener相同

? 但要移除的事件,它的事件處理程序的函數(shù)名必須相同

?

第二章:event

?

實(shí)例:

<div class="div">                   //給div添加樣式: width:100px;height:100px;background:red;
    <button class="btn">點(diǎn)擊</button>
</div>

1.type:

被觸發(fā)的事件類型

返回類型string

var div = document.querySelector('.div');
var btn = document.querySelector('.btn');
    btn.addEventListener('click',function(event){
        console.log('btn事件');       //btn事件
        console.log(event.type);      //click
    })

2.target 和 currentTarget :

指的是目標(biāo)元素,最內(nèi)層元素

返回的是整個(gè)元素

div.addEventListener('click',function(event){   //給div添加點(diǎn)擊事件
    console.log(event.target);    
    console.log(event.currentTarget);   
})
若點(diǎn)擊的是div,沒點(diǎn)在按鈕上 ,倆個(gè)返回的都是 <div>..</div>
若點(diǎn)擊的是按鈕:
            target  <button class="btn">點(diǎn)擊</button>//返回的是div的最內(nèi)層元素btn
            currentTarget   <div>..</div> //返回的是當(dāng)前正在處理的元素,也就是add前面的元素

3.bubble:

是否是冒泡事件

返回布爾類型,是否是冒泡事件

btn.addEventListener('click',function(event){
  console.log(event.bubble);    //true;         //click事件是冒泡事件,所有返回true;    
})
btn.addEventListener('mouseenter',function(event){
  console.log(event.bubble);    //false;
})

4.stopPropagation:

一個(gè)方法 event.stopPropagation( );

取消事件的進(jìn)一步向其他元素節(jié)點(diǎn)捕獲或者冒泡

//例1:
btn.addEventListener('click',function(event){
   console.log('btn');  
   event.stopPropagation();             //給按鈕添加
})
div.addEventListener('click',function(event){       //給div添加第一個(gè)點(diǎn)擊事件
   console.log('div1');                 
})
div.addEventListener('click',function(event){       //給div添加第二個(gè)點(diǎn)擊事件
   console.log('div2');             
})

//例2:
btn.addEventListener('click',function(event){
   console.log('btn');  
})
div.addEventListener('click',function(event){       //給div添加第一個(gè)點(diǎn)擊事件
   console.log('div');  
   event.stopPropagation();             //給div添加
})
div.addEventListener('click',function(event){       //給div添加第二個(gè)點(diǎn)擊事件
   console.log('div2');             
})

5.stopImmediatePropagation

一個(gè)方法 event.stopImmediatePropagation( );

立即停止傳播,效果和stopPropagation一樣,但它也會(huì)取消同一元素的其他監(jiān)聽器捕獲或冒泡

//例3:
btn.addEventListener('click',function(event){
   console.log('btn');  
})
div.addEventListener('click',function(event){       //給div添加第一個(gè)點(diǎn)擊事件
   console.log('div1'); 
   event.stopImmediatePropagation();                
})
div.addEventListener('click',function(event){       //給div添加第二個(gè)點(diǎn)擊事件
   console.log('div2');             
})

可以看到例2和例3中,同樣是給div 和 btn 添加相同的事件,但event事件的類型不同,

例2中的stopProgation( ) 只能阻止它傳播給給其他元素節(jié)點(diǎn)捕獲或者冒泡,對于自身元素要還有其他的監(jiān)聽事件則不能阻止

例3中的stopImmediatePropagation( ) 既可以阻止前者,也能阻止后者;

6.preventDefault

一個(gè)方法 event.preventDefault( );

取消事件的默認(rèn)行為(如阻止submit事件的提交行為)

<form action="http://www.baidu.com">
    <input type="text" name="user">
    <input type="submit" value="提交">
</form>
<script>
    var form = document.querySelector("form");
    form.addEventListener("submit", function (event){
        event.preventDefault();  // 阻止默認(rèn)行為  點(diǎn)擊按鈕,不能提交
    });

若沒有event.preventDefault( ); 點(diǎn)擊提交按鈕,網(wǎng)頁則會(huì)跳轉(zhuǎn)到百度首頁

7.cancelable

表明是否可以取消事件的默認(rèn)行為

返回布爾類型

8.defaultPrevented

表明是否調(diào)用了preventDefault事件,即是否取消了事件的默認(rèn)行為

返回布爾類型

9.事件的觸發(fā)

可以在一個(gè)定時(shí)器內(nèi)放入點(diǎn)擊事件,從而達(dá)到模擬用戶點(diǎn)擊按鈕

的效果

btn.onclick = function (e){
        console.log("click...");
        console.log(e.isTrusted);
    }
    setInterval(function (){
        btn.click();  // 模擬用戶的點(diǎn)擊
    }, 500)

第三章:event事件的高級屬性

1.offsetX和offsetY

? 光標(biāo)相對于觸發(fā)元素邊界的X、Y坐標(biāo)

? 其實(shí)是光標(biāo)相對于觸發(fā)元素的==左上角==的坐標(biāo)。(把左上角的位置看做0，0)

2.screenX和screenY

? 當(dāng)前光標(biāo)相對于屏幕邊緣的x、y坐標(biāo)

? 其實(shí)就是相對于屏幕左上角的坐標(biāo)。(可以看出是絕對坐標(biāo))

3.clientX和clientY

當(dāng)前光標(biāo)相對于瀏覽器瀏覽器窗口客戶區(qū)域左上角的坐標(biāo)(客戶區(qū)域不包括狀態(tài)欄、菜單欄等。)

img3

第四章: 事件代理(委托)

? 事件委托的原理：

假設(shè)現(xiàn)在要處理多個(gè)具有并列關(guān)系元素的click事件，當(dāng)我點(diǎn)擊這些元素中的任何一個(gè)元素，則事件一定會(huì)通過冒泡的方式，冒泡到他的上層的父節(jié)點(diǎn)元素然后一直冒到window，所以這個(gè)時(shí)候我們就可以在他的上層元素中添加事件處理程序，來統(tǒng)一處理這些事件，在處理的過程中可以通過獲取target的id來知道是點(diǎn)擊的哪個(gè)具體的元素。這種方式就稱之為事件委托。

<ul id="item">
    <li id="item1">1</li>
    <li id="item2">2</li>
    <li id="item3">3</li>
    <li id="item4">4</li>
</ul>
<script>
    item.onclick=function(e){
        switch (e.target.id){                       //使用target來獲取目標(biāo)元素,也就是點(diǎn)擊的那個(gè)li 并通過id來判斷
            case "item1":
                console.log("你點(diǎn)擊了第一個(gè)li");
                break;
            case "item2":
                console.log("你點(diǎn)擊了第二個(gè)li");
                break;
            case "item3":
                console.log("你點(diǎn)擊了第三個(gè)li");
                break;
            case "item4":
                console.log("你點(diǎn)擊了第四個(gè)li");
                break;
        }
    }
</script>

注:

1. 完全可以考慮給document添加一個(gè)事件處理程序，用來處理頁面上發(fā)生的某種特定類型的事件。
2. 比較適合事件委托的事件：click 、 mousedown 、 mouseup 、 keydown 、 keyup 和 keypress;

2222