六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 113|回复: 0

JavaScript事件绑定方法

[复制链接]

升级  4.8%

156

主题

156

主题

156

主题

进士

Rank: 4

积分
524
 楼主| 发表于 2013-1-24 06:46:02 | 显示全部楼层 |阅读模式
简单实用版:                                                                                        
function bind(elm, evType, fn, useCapture) { if (elm.addEventListener) {  elm.addEventListener(evType, fn, useCapture);//DOM2.0  return true; }else if (elm.attachEvent) {  var r = elm.attachEvent('on' + evType, fn);//IE5+  return r; }else {  elm['on' + evType] = fn;//DOM 0 }} 
Dean Edwards版:                                                                                                   
功能非常强悍,解决IE的this指向问题,event总是作为第一个参数传入,跨浏览器就更不在话下。
function bind(element, type, handler) { //为每一个事件处理函数分派一个唯一的ID if (!handler.$$guid) handler.$$guid = addEvent.guid++; //为元素的事件类型创建一个哈希表 if (!element.events) element.events = {}; //为每一个"元素/事件"对创建一个事件处理程序的哈希表 var handlers = element.events[type]; if (!handlers) {  handlers = element.events[type] = {};  //存储存在的事件处理函数(如果有)  if (element["on" + type]) {   handlers[0] = element["on" + type];  } } //将事件处理函数存入哈希表 handlers[handler.$$guid] = handler; //指派一个全局的事件处理函数来做所有的工作 element["on" + type] = handleEvent;};//用来创建唯一的ID的计数器addEvent.guid = 1;function removeEvent(element, type, handler) { //从哈希表中删除事件处理函数 if (element.events && element.events[type]) {  delete element.events[type][handler.$$guid]; }};function handleEvent(event) { var returnValue = true; //抓获事件对象(IE使用全局事件对象) event = event || fixEvent(window.event); //取得事件处理函数的哈希表的引用 var handlers = this.events[event.type]; //执行每一个处理函数 for (var i in handlers) {  this.$$handleEvent = handlers[i];  if (this.$$handleEvent(event) === false) {   returnValue = false;  } } return returnValue;};//为IE的事件对象添加一些“缺失的”函数function fixEvent(event) { //添加标准的W3C方法 event.preventDefault = fixEvent.preventDefault; event.stopPropagation = fixEvent.stopPropagation; return event;};fixEvent.preventDefault = function() { this.returnValue = false;};fixEvent.stopPropagation = function() { this.cancelBubble = true;}; 
HTML5版:                                                                                                 
var addEvent=(function(){ if(document.addEventListener){  return function(el,type,fn){   if(el.length){    for(var i=0;i<el.length;i++){     addEvent(el[i],type,fn);    }   }else{    el.addEventListener(type,fn,false);   }  }; }else{  return function(el,type,fn){   if(el.length){    for(var i=0;i<el.length;i++){     addEvent(el[i],type,fn);    }   }else{    el.attachEvent(‘on‘+type,function(){     return fn.call(el,window.event);    });   }  }; }})(); 
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表