JS中的事件监听

淡淡的烟草味﹌ 2022-06-09 10:37 248阅读 0赞

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