js事件绑定

浏览数：27 / 时间：2015年06月09日

js 中事件绑定不同的浏览器使用不同的方法,如何做到兼容所有的浏览器呢?
火狐浏览器支持document.addEventListener ,但是不支持document.attachEvent.
chrome支持document.addEventListener,不支持document.attachEvent
IE支持document.addEventListener,不支持document.attachEvent
为了兼容多浏览器,我们进行了封装:

var addEvent = (function () {
    if (document.addEventListener) {
        return function (type, element, fun) {
            element.addEventListener(type, fun, false);
        }
    }
    else if (document.attachEvent) {
        return function (type, element, fun) {
            element.attachEvent(‘on‘ + type, fun);
        }
    }
    else {
        return function (type, element, fun) {
            element[‘on‘ + type] = fun;
        }
    }
})();
var removeEvent = (function () {
    if (document.removeEventListener) {
        return function (type, element, fun) {
            element.removeEventListener(type, fun, false);
        }
    }
    else if (document.detachEvent) {
        return function (type, element, fun) {
            element.detachEvent(‘on‘ + type, fun);
        }
    }
    else {
        return function (type, element, fun) {
            element[‘on‘ + type] = null;
        }
    }
})();

下面是阻止事件冒泡的方法:

/***
 * 阻止事件冒泡
 * @param event
 */
var cancelBubble = function cancelBubble(event) {
    if (event === undefined) {
        event = window.event;
    }
    if (event.stopPropagation === undefined) {
        event.cancelBubble();
    } else {
        event.stopPropagation();
    }
};

测试页面:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
    <script src="common_util.js" type="application/javascript"></script>
</head>
<body>
<div id="outDiv"  style="width: 200px;height: 50px;background-color: #9a9afb" >
    <input type="button" id="myBtn" value="点我啊" />
</div>
<input type="button" id="cancelBtn" value="取消按钮事件" />
<script type="application/javascript">
    var count=1;
    var button_func=function (event) {
        cancelBubble(event);
        console.log(‘this is button ‘+(count++));
    };
    addEvent(‘click‘,com.whuang.hsj.$$id(‘outDiv‘), function (event) {
        console.log(‘this is div‘+(count++));
    })
    addEvent(‘click‘,com.whuang.hsj.$$id(‘myBtn‘), button_func);
    addEvent(‘click‘,com.whuang.hsj.$$id(‘cancelBtn‘), function (event) {
        removeEvent(‘click‘,com.whuang.hsj.$$id(‘myBtn‘),button_func);
    })
</script>
</body>
</html>