04.javascript事件绑定

  1. 云栖社区>
  2. 博客列表>
  3. 正文

04.javascript事件绑定

清山 2011-01-02 16:02:00 浏览284 评论0

摘要: 一、传统的方法: // 例1:查找第一个<form>元素并为其绑定submit事件处理函数 document.getElementsByTagName(“form”)[0].onsubmit = function(e){ return stopDefault( e );//停止表单提交的默认行为 }; // 例2:为页面body元素绑定键盘敲击事件 document.

一、传统的方法:

// 例1:查找第一个<form>元素并为其绑定submit事件处理函数 document.getElementsByTagName(“form”)[0].onsubmit = function(e){ return stopDefault( e );//停止表单提交的默认行为 }; // 例2:为页面body元素绑定键盘敲击事件 document.body.onkeypress = myKeyPressHandler; // 例3:为页面加载完毕绑定事件 window.onload = function(){ … };   

二、W3C的方法(IE不支持):

// 例1:查找第一个<form>元素并为其绑定submit事件处理函数 document.getElementsByTagName(“form”)[0].addEventListener(‘click’,function(e){ return stopDefault( e );//停止表单提交的默认行为 }, false); // 例2:为页面body元素绑定键盘敲击事件 document.body.addEventListener(‘keypress’, myKeyPressHandler, false); // 例3:为页面加载完毕绑定事件 window.addEventListener(‘load’, function(){ … }, false);

三、IE绑定的方法:

// 例1:查找第一个<form>元素并为其绑定submit事件处理函数 document.getElementsByTagName(“form”)[0].attachEvent(‘onclick’,function(){ return stopDefault(); //停止表单提交的默认行为 },); // 例2:为页面body元素绑定键盘敲击事件 document.body.attachEvent(‘onkeypress’, myKeyPressHandler); // 例3:为页面加载完毕绑定事件 window.attachEvent(‘onload’, function(){ … });  

四、通用的方法:

 function addEvent(element, type, handler) { if (!handler.$$guid) { handler.$$guid = addEvent.guid++; //为每一个事件处理函数赋予一个独立的ID } //为元素建立一个事件类型的散列表 if (!element.events) { element.events = {}; } //为没对元素/事件建立一个事件处理函数的散列表 var handlers = element.events[type]; if (!handlers) { handlers = element.events[type] = {}; //存储已有的事件处理函数(如果已存在一个) if (element["on" + type]) { handelers[0] = element["on" + type]; //在散列表中存储该事件的处理函数 handelers[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) { event.preventDefault = fixEvent.preventDefault; event.stopPropagation = fixEvent.stopPropagation; return event; } fixEvent.preventDefault = function () { this.returnValue = false; } fixEvent.stopPropagation = function () { this.cancelBubble = true; } } } }

用云栖社区APP,舒服~

【云栖快讯】新手小白必看!编程语言系列讲座火爆进行中,与行业资深专家一起学习Python、C++、JavaScript、Java!从入门到进阶  详情请点击

网友评论

清山
文章502篇 | 关注3
关注
共享带宽提供地域级带宽共享和复用功能,支持同地域下所有弹性公网IP共享带宽,进而让绑定弹性公... 查看详情
基于全网公开发布数据、传播路径和受众群体画像,利用语义分析、情感算法和机器学习,分析公众对品... 查看详情
阿里云函数计算(Function Compute)是一个事件驱动的全托管计算服务。通过函数计... 查看详情
为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效... 查看详情
阿里云飞天战略营全新发布

阿里云飞天战略营全新发布