事件委托

最新推荐文章于 2024-02-28 10:26:11 发布

se7en灬柒柒

最新推荐文章于 2024-02-28 10:26:11 发布

阅读量676

点赞数

分类专栏： javascript

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

事件委托

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <title></title>
</head>
<body>
    <ul id="myLinks">
        <li id="goSomewhere">Go somewhere</li>
        <li id="doSomething">Do something</li>
        <li id="sayHi">Say hi</li>
    </ul>
    <script type="text/javascript">
    window.onload= function() {
        var list = document.getElementById("myLinks");
        addHandler(list, "click", function(ev) {
            var oEvent = ev||event;
            var target = getTarget(oEvent);
            switch(target.id) {
                case "doSomething":
                    document.title = "I changed the document's title";
                    break;

                case "goSomewhere":
                    location.href = "http://www.baidu.com";
                    break;

                case "sayHi":
                    alert("hi");
                    break;
            }
        })
    }
    function getTarget(event)
    {
        return event.target || event.srcElement;
    }
    function addHandler(element, type, handler)
    {
        if(element.addEventListener)
        {
            element.addEventListener(type, handler, false);//IE9、ff、sa、op、ch
        }else if (element.attachEvent)
        {
            element.attachEvent("on" + type, handler);//IE、op
        }else
        {
            element["on" + type] = handle;
        }
    }
    </script>
</body>
</html>

委托（代理）事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的，

优点是：

（1）可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒

（2）可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适

缺点是：

事件代理的应用常用应该仅限于上述需求下，如果把所有事件都用代理就可能会出现事件误判，即本不应用触发事件的被绑上了事件。

实现事件模型bind与trigger

大致实现思路就是创建一个类或是匿名函数，在bind和trigger函数外层作用域创建一个字典对象，用于存储注册的事件及响应函数列表，bind时，如果字典没有则创建一个，key是事件名称，value是数组，里面放着当前注册的响应函数，如果字段中有，那么就直接push到数组即可。trigger时调出来依次触发事件响应函数即可。
　　

function Emitter() {
    this._listener = [];
    //_listener[自定义的事件名] = [所用执行的匿名函数1, 所用执行的匿名函数2]
}

//注册事件
Emitter.prototype.bind = function(eventName, callback) {
    //this._listener[eventName]没有值则将listener定义为[](数组)。
    listener.push(callback);
    this._listener[eventName] = listener;
}

 //触发事件
Emitter.prototype.trigger = function(eventName) {
    var args = Array.prototype.slice.apply(arguments).slice(1);
    //atgs为获得除了eventName后面的参数(注册事件的参数)
    var listener = this._listener[eventName];

    if(!Array.isArray(listener)) return;//自定义事件名不存在
    listener.forEach(function(callback) {
        try {
            callback.apply(this, args);
        }catch(e) {
            console.error(e);
        }
    })
}
//实例
var emitter = new Emitter();
    emitter.bind("myevent", function(arg1, arg2) {
        console.log(arg1, arg2);
    });

    emitter.bind("myevent", function(arg1, arg2) {
        console.log(arg2, arg1);
    });

    emitter.trigger('myevent', "a", "b");

事件广播（dispatchEvent）

一般我们在元素上绑定事件后，是靠用户在这些元素上的鼠标行为来捕获或者触发事件的，或者自带的浏览器行为事件，比如click，mouseover，load等等，有些时候我们需要自定义事件或者在特定的情况下需要触发这些事件。这个时候我们可以使用IE下fireEvent方法，高级浏览器（chrome,firefox等）有dispatchEvent方法。

ie下的例子：

//document上绑定自定义事件ondataavailable
document.attachEvent('ondataavailable', function (event) {
    alert(event.eventType);
});
var obj=document.getElementById("obj");
//obj元素上绑定click事件
obj.attachEvent('onclick', function (event) {
alert(event.eventType);
});
//调用document对象的createEventObject方法得到一个event的对象实例。
var event = document.createEventObject();
event.eventType = 'message';
//触发document上绑定的自定义事件ondataavailable
document.fireEvent('ondataavailable', event);
//触发obj元素上绑定click事件
document.getElementById("test").onclick = function () {
    obj.fireEvent('onclick', event);
};

高级浏览器（chrome,firefox等）的例子：

//document上绑定自定义事件ondataavailable
document.addEventListener('ondataavailable', function (event) {
    alert(event.eventType);
}, false);
var obj = document.getElementById("obj");
//obj元素上绑定click事件
obj.addEventListener('click', function (event) {
    alert(event.eventType);
}, false);
//调用document对象的 createEvent 方法得到一个event的对象实例。
var event = document.createEvent('HTMLEvents');
// initEvent接受3个参数：
// 事件类型，是否冒泡，是否阻止浏览器的默认行为
event.initEvent("ondataavailable", true, true);
event.eventType = 'message';
//触发document上绑定的自定义事件ondataavailable
document.dispatchEvent(event);
var event1 = document.createEvent('HTMLEvents');
event1.initEvent("click", true, true);
event1.eventType = 'message';
//触发obj元素上绑定click事件
document.getElementById("test").onclick = function () {
    obj.dispatchEvent(event1);
};

se7en灬柒柒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件委托

委托（代理）事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。这是靠事件的冒泡机制来实现的，优点是：（1）可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒（2）可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适缺点是：事件代理的应用常用应该仅限于上述需求下，如果把所有事件都用代理就可能会出现事件误判，即本不应用触发
复制链接

扫一扫