事件对象(示例、封装函数EventUtil())

2018-06-24 00:11:38来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

事件对象

什么是事件对象?

在触发DOM上的事件时都会产生一个对象。

事件对象event

1.DOM中的事件对象

(1)\type属性用于获取事件类型

(2)\target属性用于获取事件目标

(3)\stopPropagation()方法用于阻止事件冒泡

(4)\preventDefault()方法用于阻止事件的默认行为

2.IE中的事件对象

(1)\type属性用于获取事件类型

(2)\srcElement属性 用于获取事件目标

(3)\cancelBubble属性 true阻止事件冒泡

(4)\returnValue属性 false阻止事件的默认行为

封装函数eventUtil():

var eventUtil = {
    getEvent:function (event) {
        return event?event:window.event;
    },
    getType: function (event) {
        return event.type;
    },
    getTarget:function (event) {
        return event.target||event.srcElement;
    },
    //阻止冒泡
    stopPropagation:function (event) {
        if(event.stopPropagation){
            event.stopPropagation();
        }else {
            event.cancelBubble=true;
        }
    },
    //阻止事件默认行为;
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else {
            event.returnValue = false;
        }
    },
    //添加具柄;
    addHandler: function (element, type, Handler) {
        if (element.addEventListener) {
            element.addEventListener(type, Handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, Handler);
        } else {
            element["on" + type] = Handler;
        }
    },
    //删除具柄;
    removeHandler: function (element, type, Handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, Handler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, Handler);
        } else {
            element["on" + type] = null;
        }
    }
};

示例:

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="eventUtil.js"></script>
    <script src="test1.js"></script>
</head>
<body>
<div id="div">
    <input type="button" value="click1" id="btn1">
    <a href="https://www.baidu.com" id="a">百度</a>
</div>
</body>
</html>

js:

window.onload = function () {
    var btn1 = document.getElementById("btn1");
    var a = document.getElementById("a");
    var div = document.getElementById("div");
    function show() {
        alert("btn clicked");
    }
    eventUtil.addHandler(div,"click",function () {
        alert("我是父盒子");
    });
    eventUtil.addHandler(btn1,"click",show);
    eventUtil.addHandler(a,"click",function (e) {
        e = eventUtil.getEvent(e);
        alert(eventUtil.getTarget(e));
        eventUtil.stopPropagation(e);
        eventUtil.preventDefault(e);
    });
    eventUtil.removeHandler(btn1,"click",show);
};

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:小tips:JS严格模式(use strict)下不能使用arguments.callee的

下一篇:vue引入jquery插件