JS中的事件監聽

1、簡單事件（重複事件會被覆蓋）

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

box.onclick = function () {
    alert( "你是誰" );
};

box.onclick = function () {
    alert( "你管我是誰，要覆蓋你" );
};

輸出：//你管我是誰，要覆蓋你

2、添加事件監聽

非IE瀏覽器：（第三個參數爲true時，事件捕獲時觸發）

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

btn.addEventListener( "click", fun);

btn.addEventListener( "click", function(){
    console.log("今天天氣不錯2");
} );

btn.addEventListener( "click", function () {
    console.log( "今天天氣不錯3" );
});

btn.removeEventListener( "click", fun );//事件移除，寫函數名稱，不寫匿名函數

輸出：//今天天氣不錯2
輸出：//今天天氣不錯3

IE瀏覽器

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

btn.attachEvent( "onclick", function () {
    console.log( "今天天氣不錯1" );
});

btn.attachEvent( "onclick", fun );

btn.attachEvent( "onclick", function () {
    console.log( "今天天氣不錯3" );
});

btn.detachEvent( "onclick", fun );//移除事件，參數必須與設置時完全一致

輸出：//今天天氣不錯2
輸出：//今天天氣不錯3

3、事件委託（給父元素設置事件）

box.onclick = function ( e ) {

    var e = e || event; //e是事件對象

    //console.log(this);//this指向事件源，無法得出真正觸發事件的元素

    var tar = e.target || e.srcElement;//真正觸發事件的元素

    if ( tar.nodeName.toLowerCase() == "p" ) {

        console.log( "我是p標籤" );

    } else if ( tar.nodeName.toLowerCase() == "span" ) {

        console.log( "我是span標籤" );

    } else if ( tar.className == "topbar" ) {

        console.log( "我的類名爲：topbar" );

    }
};

4、阻止事件冒泡

普通瀏覽器： e.stopPropagation();

IE瀏覽器： window.event.cancelBubble = true;

取消默認效果： e.preventDefault();