事件绑定分为两种:
一种是传统事件绑定(内联模型/脚本模型);上一章内容;
一种是现代事件绑定(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();
// 这两个方法接收相同的参数:事件名和函数;