js事件，封装函数，阻止冒泡及默认事件，事件源对象

最新推荐文章于 2020-11-17 09:59:11 发布

原创最新推荐文章于 2020-11-17 09:59:11 发布 · 306 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种封装事件绑定方法addEvent()的技巧，该方法兼容多种浏览器，包括IE。文章详细解释了如何使用此方法绑定点击事件，并提供了阻止默认事件及事件冒泡的方法。此外，还对比了不同浏览器下事件源对象的区别。

封装绑定事件的方法addEvent()

function addEvent(elem,type,handle){
    if(elem.addEventListener){         //可绑定多个方法
        elem.addEventListener(type,handle,false)
    }else if(elem.attachEvent){        //兼容ie  不仅可绑定多个方法，
                                        //同样的方法名都可以绑定多个
        elem.attachEvent('on' + type, function(){
            handle.call(elem);    //ie中此方法指向window，因此需要改变一下
        })
    }else{
        elem['on' + type] = handle;    //通用 但只能绑定一个方法
    }
}

使用时只需：
addEvent(div1, ‘click’, fun);

阻止默认事件：
1、return false 以对象属性方式注册的事件才生效
例如：

document.oncontextmenu = function(){       //右键菜单事件
    console.log("a");
    return false;
}

2、e.preventDefault()

document.oncontextmenu = function(e){       //w3c标准 ie9以下不兼容
    e.preventDefault();
}

3、e.returnValue = false

document.oncontextmenu = function(e){       //兼容ie
    e.returnValue = false;
}

阻止冒泡：
1、event.stopPropagation() w3c标准 ie9以下不兼容

2、event.cancleBubble = true ie独有方法

事件源对象：
1、event.target 火狐
2、event.srcElement ie
谷歌两个都兼容