时间:2021-05-28
事件绑定分为两种:
一种是传统事件绑定(内联模型/脚本模型);上一章内容;
一种是现代事件绑定(DOM2级模型);现代事件绑定在传统事件绑定基础上提供了更强大的功能;
一 传统事件绑定的问题
二 W3C事件处理函数
// "DOM2级事件"定义了两个方法,用于添加事件和删除事件的处理程序:addEventListener()和removeEventListener();
三 IE事件处理函数
// IE中实现了与DOM中类似的两个方法:attachEvent()和detachEvent();
// 这两个方法接收相同的参数:事件名和函数;
// 在使用这两组函数的时候,区别:// 1.IE不支持捕获,只支持冒泡;// 2.IE添加事件不能屏蔽重复的函数;// 3.IE中的this指向的是window而不是DOM对象;// 4.在传统事件上,IE是无法接受到event对象的;但使用了attachEvent()却可以; window.attachEvent('onload',function(){ var box = document.getElementById('box'); box.attachEvent('onclick',toBlue); }); function toRed(){ var that = window.event.srcElement; that.className = 'red'; that.detachEvent('onclick',toRed); that.attachEvent('onclick',toBlue); } function toBlue(){ var that = window.event.srcElement; that.className = 'blue'; that.detachEvent('onclick',toBlue); that.attachEvent('onclick',toRed); } // PS:IE不支持捕获; // IE不能屏蔽; // IE不能传递this,可以call过去;// 在传统绑定上,IE是无法像W3C那样通过传参接受event对象;但如果使用了attachEvent()却可以; box.onclick = function(evt){ alert(evt); // undefined; } box.attachEvent('onclick',function(evt){ alert(evt); // object; alert(evt.type); // click; });// 兼容IE和W3C的事件切换器函数; function addEvent(obj,type,fn){ // 添加事件处理程序兼容; if(obj.addEventListener){ obj.addEventListener(type,fn); }else if(obj.attachEvent){ obj.attachEvent('on'+type,fn); } } function removeEvent(obj,type,fn){ // 移除事件处理程序兼容; if(obj.removeEventListener){ obj.removeEventListener(type,fn); }esle if(obj.detachEvent){ obj.detachEvent('on'+type,fn); } } function getTarget(evt){ // 得到事件目标; if(evt.target){ return evt.target; }else if(window.event.srcEleemnt){ return window.event.srcElement; } }四 事件对象补充
2.阻止事件的默认行为
// 一个超链接的默认行为就点击然后跳转到指定的页面;// 那么阻止默认行为就可以屏蔽跳转的这种操作,而实现自定义操作;// 取消事件默认行为还有一种不规范的做法,就是返回false; link.onclick = function(){ alert('Lee'); return false; // 直接返回false,就不会跳转了; } // PS:虽然return false;可以实现这个功能,但有漏洞; // 第一:代码必须写到最后,这样导致中间的代码执行后,有可能执行不到return false; // 第二:return false写到最前那么之后的自定义操作就失败了; // 解决方案:在最前面就阻止默认行为,并且后面还能执行代码; function preDef(evt){ // 跨浏览器兼容阻止默认行为; var e = evt || window.event; if(e.preventDefault){ e.preventDefault(); // W3C,阻止默认行为; }else{ e.returnValue = false; // IE,阻止默认行为; } }3.上下文菜单事件contextmenu// 当我们右击网页的时候,会自动出现windows自带的菜单;// 那么我们可以使用contextmenu事件来修改我们指定的菜单;但前提是把右击的默认行为取消; addEvent(window,'load',function(){ var text = docuemnt.getElementById('text'); addEvent(text,'contextmenu',function(evt){ // 添加右键菜单事件处理程序; var e = evt || window.event; preDef(e); // 阻止默认行为函数; var menu = document.getElementById('menu'); // 找到自定义的menu对象; menu.style.left = e.clientX+'px'; // 确定自定义menu在屏幕上的位置; menu.style.top = e.clientX+'px'; menu.style.visibility = 'visible'; // 设置自定义menu的属性为可见; addEvent(document,'click',function(){ // 给document添加单击事件处理程序; docuemnt.getElementById('myMenu').style.visibility = 'hidden'; //将自定义的menu隐藏; }); }); });4.卸载前事件beforeunload
// 这个事件可以帮助在离开本页的时候给出相应的提示;"离开"或"返回"操作; addEvent(window.'beforeunload',function(evt){ var evt = event || window.event; var message = '是否离开此页?'; evt.returnValue = message; return message; });5.鼠标滚轮(mousewheel)和DOMMouseScroll
// 用于获取鼠标上下滚轮的距离; addEvent(docuemnt,'mousewheel',function(evt){ // 非Firefox; alert(getWD(evt)); }); addEvent(docuemnt,'DOMMouseScroll',function(evt){ // Firefox; alert(getWD(evt)); }); function getWD(evt){ var e = evt || window.event; if(e.wheelDelta){ // mousewheel事件的滚动值保存在wheelDelta里; return e.wheelDelta; }else if(e.detail){ // DOMMouseScroll事件的滚动值保存在detail里; return -evt.detail*30; // 保持计算的统一; } }声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了JavaScript实现跨浏览器的添加及删除事件绑定函数。分享给大家供大家参考。具体如下:IE的事件绑定函数是attachEvent;而Firef
javascript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下,经过绑定元素时会多次触发mouseover和mouseout事件
JavaScript一个最简单的事件模型,需要有事件绑定与触发,还有事件删除。vareventModel={list:{},bind:function(){va
今天聊下JavaScript中的事件委托跟深浅拷贝一、事件委托首先呢,介绍一下事件绑定//方法一:通过onclick点击functionclickEvent()
背景javascript中使用addEventListener()或attachEvent()绑定事件时会有几个小问题:一、使用addEventListener