javascript - 工作笔记 （事件绑定）
浏览数：15 /
时间：2015年06月08日
背景：
目前所做的项目，只能使用的是原生的javascript。对于javascript的事件绑定想必大家都懂得语法：
1，在标签中使用属性调用方法：<div onclick="AAAA();"></div>
2，在javascript中对标签对象绑定数据：
<div id="test"></div>
var item = document.getElementById("test");
item.onclick = function(){};
//方式一（不能绑定多个事件，如果有多个，后面会覆盖前面）
//无兼容性问题
item.attachEvent("onclick", function(){});
//附加事件,不会覆盖，触发时依次执行，IE特有
item.addEventListener();
//同上，IE9,Firefox,Safari,Chrome和Opera都支持这个
在使用中，经常会使用到绑定事件，为了兼顾一些浏览器的兼容性，在事件处理的时候，不得不多做些处理。
后来在网上看到了一位网友对于事件绑定的封装，感觉很不错，于是就借鉴来了，嘿嘿。
JavaScript Code
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
function addEvent(elementment, type, handler) {
if(!handler.$$guid) handler.$$guid = addEvent.guid++;// 为每个事件处理函数赋予一个独立的ID if(!elementment.events) elementment.events = {};// 为元素建立一个事件类型的散列表 var handlers = elementment.events[type];// 为每对元素/事件建立一个事件处理函数的散列表 if(!handlers) { handlers = elementment.events[type] = {}; if(elementment["on" + type]) {// 存储已有的事件处理函数(如果已存在一个) handlers[0] = elementment["on" + type]; } } handlers[handler.$$guid] = handler;// 在散列表中存储该事件函数 elementment["on" + type] = handleEvent;// 赋予一个全局事件处理函数来出来所有工作 } addEvent.guid = 1;// 创建独立ID的计数器 function removeEvent(elementment, type, handler) { if(elementment.events && elementment.events[type]) {// 从散列表中删除事件处理函数 delete elementment.events[type][handler.$$guid]; } } function handleEvent(event) { var returnValue = true; event = event || fixEvent(window.event);// 获取事件对象(IE使用全局的事件对象) var handlers = this.events[event.type];// 获取事件处理函数散列表的引用 for(var i in handlers) {// 依次执行每个事件处理函数 this.$$handerEvent = handlers[i]; if(this.$$handerEvent(event) === false) { returnValue = false; } } return returnValue; } // 增加一些IE事件对象缺乏的方法 function fixEvent(event) { event.preventDefault = fixEvent.preventDefault; event.stopPropagation = fixEvent.stopPropagation; return event; } fixEvent.preventDefault = function() { this.returnValue = false; } fixEvent.stopPropagation = function() { this.cancelBubble = true; } |
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
