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();