事件绑定分为两种:
一种是传统事件绑定(内联模型/脚本模型);上一章内容;
一种是现代事件绑定(dom2级模型);现代事件绑定在传统事件绑定基础上提供了更强大的功能;
一 传统事件绑定的问题
// 脚本模型将一个函数赋值给一个事件处理函数; var box = document.getelementbyid('box'); // 获取元素; box.onclick = function(){ // 元素点击触发事件; alert('lee'); }// 问题一:一个事件处理函数触发两次事件; window.onload = function(){ // 第一组程序; alert('lee'); } window.onload = function(){ // 第二组程序; alert('mr.lee'); } // ps:当两组程序同时执行的时候,后面一个会把前面一个完全覆盖; // 导致前面的window.onload完全失效了;// 解决方案: window.onload = function(){ // 第一组事件处理程序,会被覆盖; alert('lee'); } if(typeof window.onload == 'function'){ // 判断之前是否有window.onload; var saved = null; // 创建一个保存器; saved = window.onload; // 把之前的window.onload保存起来; } window.onload = function(){ // 下一个要执行的事件; // saved()=window.onload = function if(saved)saved(); // 判断之前是否有事件,如果有则先执行之前保存的事件; alert('mr.lee'); // 执行本事件的代码; }
// 问题二:事件切换器 box.onclick = boblue; // 第一次执行toblue(); function tored(){ this.classname = 'red'; this.onclick = toblue; // 第三次执行roblue(),然后来回切换; } function toblue(){ this.classname = 'blue'; this.onclick = tored; // 第二次执行tored(); } // 这个切换器在扩展的时候,会出现一些问题: 1.如果增加一个执行函数,那么会被覆盖; box.onclick = toalert; // 被增加的函数; box.onclick = toblue; // toalert被覆盖了; 2.如果解决覆盖问题,就必须包含同时执行; box.onclick = function(){ // 包含进去,但可读性降低; toalert(); // 第一次不会被覆盖,但第二次又被覆盖; toblue.call(this); // 还必须把this传递到切换器里; }
// 综上三个问题:覆盖问题/可读性问题/this传递为题;// 我们创建一个自定义事件处理函数; function addevent(obj,type,fn){ // 取代传统事件处理函数; var saved = null; // 保存每次触发的事件处理函数; if(typeof obj['on'+type] == 'function'){// 判断是不是存在事件; saved = obj['on'+type]; // 如果有,保存起来; } obj['on'+type] = function(){ // 然后执行; if(saved)saved(); // 执行上一个; fn.call(this); // 执行函数,把this传递进去; } } addevent(window,'load',function(){ alert('lee'); // 可以执行; }); addevent(window.'load',function(){ alert('mr.lee'); // 可以执行; })// 用自定义事件函数注册到切换器上查看效果: addevent(window,'load',function(){ var box = document.getelementbyid('box'); addevent(box,'click',toblue); }); function tored(){ this.classname = 'red'; addevent(this,'click',toblue); } function toblue(){ this.classname = 'blue'; addevent(this,'click',tored);
二 w3c事件处理函数
// dom2级事件定义了两个方法,用于添加事件和删除事件的处理程序:addeventlistener()和removeeventlistener();
// 所有dom节点中都包含这两个方法,并且它们都接收3个参数:事件名/函数/冒泡或捕获的布尔值(true表示捕获,false表示冒泡); window.addeventlistener('load',function(){ alert('lee'); },false); window.addeventlistener('load',function(){ alert('mr.lee'); },false); // ps:w3c的事件绑定好处:1.不需要自定义了;2.可以屏蔽相同的函数;3.可以设置冒泡和捕获; window.addeventlistener('load',init,false); // 第一次执行了; window.addeventlistener('load',init,false); // 第二次被屏蔽了; function init(){ alert('lee'); }// 事件切换器 window.addeventlistener('load',function(){ var box = document.getelementbyid('box'); box.addeventlistener('click',function(){ // 不会被覆盖/误删; alert('lee'); },false); box.addeventlistener('click',toblue,false); // 引入切换; },false); function tored(){ this.classname = 'red'; this.removeeventlistener('click',tored,false); // 移除事件处理函数; this.addeventlistener('click',toblue,false); // 添加需要切换的事件处理函数; } function toblue(){ this.classname = 'blue'; this.removeeventlistener('click',toblue,false); this.addeventlistener('click',tored,false); }// 设置冒泡和捕获阶段 document.addeventlistener('click',function(){ alert('document'); },true); // 设置为捕获; document.addeventlistener('click',function(){ alert('lee'); },false); // 设置为冒泡;
三 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; } }
四 事件对象补充
1.relatedtarget// 这个属性可以在mouseover和mouseout事件中获取从哪里移入和从哪里移出的dom对象; box.onmouseover = function(evt){ // 鼠标移入box; alert(evt.relatedtarget); // 获取移入box之前的那个元素; } box.onmouseout = function(evt){ // 鼠标移出box; alert(evt.relatedtarget); // 获取移出box之后到的那个元素; }// ie提供了两组与之对应的属性:fromelement和toelement;// 兼容函数 function getearget(evt){ var e = evt || window.event; // 得到事件对象; if(e.srcelement){ // 如果支持srcelement,表示ie; if(e.type == 'mouseover'){ // 如果是over事件; return e.fromeelement; // 就使用from; }else if(e.type == 'mouseout'){ // 如果是out; return e.toelement; // 就使用to; } }else if(e.relatedtarget){ // 如果支持relatedtarget,表示w3c; return e.relatedtarget; } }
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; // 保持计算的统一; } }