JavaScript事件---事件绑定和深入
发文不易，转载传播，请亲注明链接出处，谢谢！
内容提纲：
1.传统事件绑定的问题
2.W3C事件处理函数
3.IE事件处理函数
4.事件对象的其他内容
事件绑定分为两种：一种是传统事件绑定(内联模型，脚本模型)，一种是现代事件绑定(DOM2级模型)。现代事件绑定在传统绑定上提供了更强大更方便的功能。
一．传统事件绑定的问题
传统事件绑定有内联模型和脚本模型，内联模型我们不做讨论，基本很少去用。先来看一下脚本模型，脚本模型将一个函数赋值给一个事件处理函数。
var box = document.getElementById('box'); //获取元素
box.onclick = function () { //元素点击触发事件
alert('Lee');
};
问题一：一个事件处理函数触发两次事件
window.onload = function () { //第一组程序项目或第一个JS文件
alert('Lee');
};
window.onload = function () { //第二组程序项目或第二个JS文件
alert('Mr.Lee');
};
当两组程序或两个JS文件同时执行的时候，后面一个会把前面一个完全覆盖掉。导致前面的window.onload完全失效了。
解决覆盖问题，我们可以这样去解决：
PS：如果一开始没有window.onload，旧版火狐显示undefined，新版显示object，谷歌和IE浏览器也是object；如果有window.onload，所有浏览器都会显示function。
window.onload = function () { //第一个要执行的事件，会被覆盖
alert('Lee');
};
if (typeof window.onload == 'function') { //判断之前是否有window.onload
var saved = null; //创建一个保存器
saved = window.onload; //把之前的window.onload保存起来
}
window.onload = function () { //最终一个要执行事件
if (saved) saved(); //执行之前一个事件
alert('Mr.Lee'); //执行本事件的代码
};
问题二：事件切换器
window.onload = function () {
var box = document.getElementById('box');
box.onclick =toBlue; //第一次执行toBlue()
};
function toRed() {
this.className = 'red';
this.onclick = toBlue; //第三次执行toBlue()，然后来回切换
}
PS：直接将函数绑定给事件处理函数，toBlue里面的this就是事件对象box，否则是window！（事件入门一篇提到过）
function toBlue() {
this.className = 'blue';
this.onclick = toRed; //第二次执行toRed()
}
这个切换器在扩展的时候，会出现一些问题：
1.如果增加一个执行函数，那么会被覆盖
box.onclick = toAlert; //被增加的函数
box.onclick = toBlue; //toAlert被toBlue覆盖了
2.如果解决覆盖问题，就必须包含到一起，然后同时执行，但又出新问题
box.onclick = function () { //包含进去，但可读性降低
//第一次不会被覆盖，但第二次又被覆盖（被toBlue里面的onclick覆盖）
toAlert();
toBlue.call(this); //还必须把this传递到切换器里
};
PS：通过匿名函数执行一个函数，此函数里面的this是window，所以必须在匿名函数中把this传递过去！
综上的三个问题：覆盖问题、可读性问题、this传递问题。我们来创建一个自定义的事件处理函数，来解决以上三个问题。
//添加事件函数
//obj相当于window
//type相当于onload
//fn相当于function () {}
//组合起来：window.onload = function(){}
function addEvent(obj, type, fn) { //取代传统事件处理函数
var saved = null; //保存每次触发的事件处理函数
if (typeof obj['on' + type] == 'function') { //判断是不是事件
saved = obj['on' + type]; //如果有，保存起来
}
obj['on' + type] = function () { //然后执行window.onload相当于window['onload'];
13 if (saved) saved(); //执行上一个
fn.call(this); //执行函数，把this传递过去
};
}
addEvent(window, 'load', function () { //执行到了
alert('Lee');
});
addEvent(window, 'load', function () { //执行到了
alert('Mr.Lee');
});
PS：以上编写的自定义事件处理函数，还有一个问题没有处理，就是两个相同函数名的函数误注册了两次或多次，那么应该把多余的屏蔽掉。那我们就需要把事件处理函数进行遍历，如果有同样名称的函数名就不添加即可。(这里就不做了)
addEvent(window, 'load', init); //注册第一次
addEvent(window, 'load', init); //注册第二次，应该忽略
function init() {
alert('Lee');
}
用自定义事件函数注册到切换器上查看效果：
addEvent(window, 'load', function () {
var box = document.getElementById('box');
addEvent(box, 'click', function () { //增加一个执行函数，每次都执行，不会被覆盖
alert('Mr.Lee');
});
addEvent(box, 'click', toBlue);
});
function toRed() {
this.className = 'red';
addEvent(this, 'click', toBlue);
}
function toBlue() {
this.className = 'blue';
addEvent(this, 'click', toRed);
}
PS：当你单击很多很多次切换后，浏览器直接卡死，或者弹出一个错误：too much recursion(太多的递归)。主要的原因是，每次切换事件的时候，都保存下来，没有把无用的移除，导致越积越多，最后卡死（解决方案就是用完的事件及时的移除掉）。
//删除事件函数
function removeEvent(obj, type) {
if (obj['on'] + type) obj['on' + type] = null; //删除事件处理函数
}
以上的删除事件处理函数只不过是一刀切的删除了，这样虽然解决了卡死和太多递归的问题。但其他的事件处理函数也一并被删除了，导致最后得不到自己想要的结果。如果想要只删除指定的函数中的事件处理函数，那就需要遍历，查找。(这里就不做了，提示:在上面的删除函数中加上第三个参数fn)
二．W3C事件处理函数
“DOM2级事件”定义了两个方法，用于添加事件和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3个参数；事件名、函数、冒泡或捕获的布尔值(true表示捕获，false表示冒泡)。
//问题1：覆盖问题（解决）
window.addEventListener('load', function () {
alert('Lee');
}, false);
window.addEventListener('load', function () {
alert('Mr.Lee');
}, false);
//问题2：屏蔽掉相同函数问题（解决）
window.addEventListener('load', init, false); //第一次执行了
window.addEventListener('load', init, false); //第二次被屏蔽了
function init() {
alert('Lee');
}
//问题3：是否传递了this
window.addEventListener('load', function () {
var box = document.getElementById('box');
box.addEventListener('click', function(){
alert(this); //这儿的this是box
}, false);
},false);
//修改事件切换器
window.addEventListener('load', function () {
var box = document.getElementById('box');
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);
}
//问题4：添加一个额外的方法会被覆盖或者只能执行一次（解决）
window.addEventListener('load', function () {
var box = document.getElementById('box');
box.addEventListener('click', function () { //不会被误删
alert('Mr.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);
}
综上所述：W3C是比较完美的解决了这些问题，非常好用；但是IE8和之前的浏览器并不支持，而是采用了自己的事件，当然，IE9已经完全支持！
设置冒泡和捕获阶段
在事件入门一篇中介绍了事件冒泡，即从里到外触发。我们也可以通过event对象来阻止某一阶段的冒泡。
W3C现代事件绑定可以设置冒泡和捕获。把最后的布尔值设置成true，则为捕获；设置成false，则为冒泡。
//设置为true，捕获
document.addEventListener('click', function () {
alert('document');
}, true);
box.addEventListener('click', function () {
alert('div');
}, true);
三．IE事件处理函数
IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的参数：事件名称和函数。
在使用这两组函数的时候，与W3C区别如下：
1.IE不支持捕获，只支持冒泡；
2.IE添加事件不能屏蔽重复的函数；
3.IE中的this指向的是window而不是DOM对象；
4.在传统事件上，IE是无法接受到event对象的，但使用了attchEvent()却可以，但有些区别。
//问题1：覆盖问题（解决，但有不同，输出顺序相反）
window.attachEvent('onload', function () {
alert('Lee');
});
window.attachEvent('onload', function () {
alert('Mr.Lee');
});
window.attachEvent('onload', function () {
alert('Miss.Lee');
});
//问题2：相同函数屏蔽的问题（未解决）
window.attachEvent('onload', init);
window.attachEvent('onload', init);
function init() {
alert('Mr.Lee');
}
//问题3：不可以传递this（未解决）
window.attachEvent('onload', function () {
var box = document.getElementById('box');
box.attachEvent('onclick', function () {
//alert(this === box); //false
alert(this === window); //不能传递this
});
});
//可以通过call()传递过去
window.attachEvent('onload', function () {
var box = document.getElementById('box');
box.attachEvent('onclick', function () {
toBlue.call(box); //把this直接call过去（但切换器我们不这样做！）
});
});
//问题4：添加一个额外的方法会被覆盖或者只能执行一次（解决）
window.attachEvent('onload', function () {
var box = document.getElementById('box');
box.attachEvent('onclick', function () {
alert('Lee');
});
box.attachEvent('onclick', function () {
alert('Mr.Lee');
});
});
在传统绑定上，IE是无法像W3C那样通过传参接受event对象，但如果使用了attachEvent()却可以。
window.attachEvent('onload', function () {
var box = document.getElementById('box');
//box.onclick = function (evt) { //传统方法IE无法通过参数获取evt
// alert(evt);
//}
box.attachEvent('onclick', function (evt) { //IE的现代事件绑定机制是可以的
//alert(evt); //object
//alert(evt.type); //click
//alert(evt.srcElement.tagName); //box, 这个可以有
alert(window.event.srcElement.tagName); //box, 这个更可以有
});
});
//IE事件切换器
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);
}
最后，为了让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);
} else if (obj.detachEvent) {
obj.detachEvent('on' + type, fn);
}
}
function getTarget(evt) { //得到事件目标
if (evt.target) {
return evt.target;
} else if (window.event.srcElement) {
return window.event.srcElement;
}
}
addEvent(window, 'load', function () {
var box = document.getElementById('box');
addEvent(box, 'click', toBlue);
});
function toRed(evt) {
var that = getTarget(evt);
that.className = 'red';
removeEvent(that, 'click', toRed);
addEvent(that, 'click', toBlue);
}
function toBlue(evt) {
var that = getTarget(evt);
that.className = 'blue';
removeEvent(that, 'click', toBlue);
addEvent(that, 'click', toRed);
}
PS：调用忽略，IE兼容的事件，如果要传递this，改成call即可(上面问题3部分说过了，但是一般不使用这种形式)。
PS：IE中的事件绑定函数attachEvent()和detachEvent()可能在实践中不去使用，有几个原因：
1.IE9就将全面支持W3C中的事件绑定函数；
2.IE的事件绑定函数无法传递this；
3.IE的事件绑定函数不支持捕获；
4.同一个函数注册绑定后，没有屏蔽掉；
5.有内存泄漏的问题。
至于怎么替代，这儿暂时不做探讨···
四．事件对象的其他内容
1.获取移入移出对象
在W3C提供了一个属性：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，分别对应mouseover和mouseout。
box.onmouseover = function (evt) { //鼠标移入box
alert(window.event.fromElement.tagName); //获取移入box最近的那个元素对象
}
box.onmouseout = function (evt) { //鼠标移入box
alert(window.event.toElement.tagName); //获取移入box最近的那个元素对象
}
跨浏览器兼容：
function getTarget(evt) {
var e = evt || window.event; //得到事件对象
if (e.srcElement) { //如果支持srcElement，表示IE
if (e.type == 'mouseover') { //如果是mouseover
return e.fromElement; //就使用fromElement
} else if (e.type == 'mouseout') { //如果是mouseout
return e.toElement; //就使用toElement
}
} 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写到最前那么之后的自定义操作就失效了。
所以，最好的方法应该是在最前面就阻止默认行为，并且后面还能执行代码。
link.onclick = function (evt) {
evt.preventDefault(); //W3C阻止默认行为，放哪里都可以
alert('Mr.Lee');
};
link.onclick = function (evt) {
13 window.event.returnValue = false; //IE阻止默认行为
alert('Mr.Lee');
};
跨浏览器兼容：
function preDef(evt) {
var e = evt || window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
3.上下文菜单事件
上下文菜单事件：contextmenu，当我们右击网页的时候，会自动出现windows自带的菜单。那么我们可以使用contextmenu事件来修改我们指定的菜单，前提是把右击的默认行为取消掉。
小示例：
html代码部分：
<body>
<textarea id="text" style="width:200px;height:100px;"></textarea>
<ul id="menu">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
</body>
css代码部分：
#menu {
width:50px;
background:grey;
position:absolute;
display:none;
}
JS代码部分：
addEvent(window, 'load', function () {
var text = document.getElementById('text');
addEvent(text, 'contextmenu', function (evt) {
preDef(evt);
var menu = document.getElementById('menu');
var e = evt || window.event;
menu.style.left = e.clientX + 'px';
menu.style.top = e.clientY + 'px';
menu.style.display = 'block';
addEvent(document, 'click', function () {
menu.style.display = 'none';
});
});
});
PS：contextmenu事件很常用，而且此事件各浏览器兼容性较为稳定。
4.卸载前事件
卸载前事件：beforeunload，这个事件可以帮助在离开本页的时候给出相应的提示，“离开”或者“返回”操作。
addEvent(window, 'beforeunload', function (evt) {
preDef(evt); //必须要有，默认形式
});
5.鼠标滚轮事件
鼠标滚轮(mousewheel)和DOMMouseScroll，用于获取鼠标上下滚轮的距离。
addEvent(document, 'mousewheel', function (evt) { //非火狐
alert(getWD(evt));
});
addEvent(document, 'DOMMouseScroll', function (evt) { //火狐
alert(getWD(evt));
});
function getWD(evt) {
var e = evt || window.event;
if (e.wheelDelta) {
return e.wheelDelta;
} else if (e.detail) {
return -evt.detail * 30; //保持计算的统一
}
}
PS：通过浏览器检测可以确定火狐只执行DOMMouseScroll。
6.其他
DOMContentLoaded事件和readystatechange事件（很重要），有关DOM加载方面的事件，关于这两个事件的内容非常多，这儿就暂时不聊了！
for my lover and
thank you Mr.Lee!
JavaScript事件---事件绑定和深入的更多相关文章
- javascript对象事件绑定方法
javascript对象事件绑定方法 今天在做对象事件绑定的过程中出现了一点异外情况,由于事件方法是由参数传过来的,需要将当前对象call过去,方便方法体里直接调用this 错误写法 obj.oncl ...
- javascript之事件绑定
曾经写过一篇随笔,attachEvent和addEventListener,跟本文内容有很多相似之处 本文链接:javascript之事件绑定 1.原始写法 <div onclick=" ...
- JavaScript事件属性绑定带参数的函数
JavaScript中在对事件进行绑定的时候,往往是element.onclick=event;这种形式,这样使用的话则会出现无法传参数.因此我们可以使用function(){}匿名函数将事件包含其中 ...
- jQuery 事件绑定 和 JavaScript 原生事件绑定
总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...
- JavaScript之事件的绑定与移除
对于事件的绑定的方法有多种多样,但是在解除绑定事件的时候,就要注意使用的是那种绑定事件的方法,因为不同的绑定方法所对应的解除事件是不同的. 1. 原始写法 1.1 绑定事件:对象.事件=事件处理函数 ...
- 2014年辛星解读Javascript之DOM之事件及其绑定
我们通过DOM的事件能够对HTML的事件作出反应.就像我们用其它编程语言写GUI一样,那么HTML包含哪些事件呢?以下是几个常见的样例,比方网页已经完毕记载,图像完毕载入,鼠标移动到元素上方.输入文字 ...
- JavaScript事件的委派与事件的绑定
事件的委派 在很多需求中,通常元素是动态创建添加到一个父元素中的,这时候我们点击新增的元素是没有反应的 <script type="text/javascript"> ...
- JavaScript三种绑定事件的方式
JavaScript三种绑定事件的方式: 1. <div id="btn" onclick="clickone()"></div> // ...
- 关于JavaScript的事件绑定
js事件绑定的几种方式 JavaScript中有三种常用的绑定事件方法: 1. 在DOM元素中直接绑定: 2. 在JavaScript代码中绑定: 3. 绑定事件佳妮婷函数. 一.在DOM元素中直接绑 ...
- 前端（十五）—— JavaScript事件：绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件
JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...
随机推荐
- jQuery事件绑定on、off 和one，取代bind, live, delegate
jQuery最新版建议:最好用on来代替以前的bind, live, delegate,其中live是最不建议使用的. on和off的格式 on $(elements).on(events[, sel ...
- 20150912华为机考2之"输入一段字符串(英文)，将每个单词首字母大写后输出"
还有其他一些(隐性)要求(要不然无法通过测试): .如果首字母已经大写,则不用变 .不是英文字母的不变 e.g. Input: hello world! this is _Ljj speaking! ...
- oracle 11g dataguard创建的简单方法
oracle 10g可以通过基于备份的rman DUPLICATE实现dataguard,通过步骤需要对数据库进行备份,并在standby侧进行数据库的恢复.而到了11g,oracle推出了Dupli ...
- Centos7 搭建hadoop2.6 HA
用户配置: User :root Password:toor 2.创建新用户 student Pwd: student 3．安装virtualbox的增强工具软件 4.系统默认安装的是openjdk ...
- HTML常用文本元素
HTML是超文本标记语言,它提供网页的具体内容,包括文本.表单.图像.表格.链接.多媒体.列表等.其中文本是我们遇到的最多的展示内容.正确的使用文本标签,会使页面具有语义化,也有利于SEO. 文本标签 ...
- Mango DS Training #48 ---线段树2 解题手记
Training address: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=38966#overview A.Count Color ...
- Android中Adapter之BaseAdapter使用
Android界面中有时候需要显示稍微复杂的界面时,就需要我们自定义一个adapter,而此adapter就要继承BaseAdapter,重新其中的方法. Android中Adapte ...
- YOU ARE MY SUNSHINE
/*you are sunshine, my only sunshine, you make me happy when skies are grey. you'll never know dear ...
- Android优化——UI检视利器：Hierarchy Viewer
在Android的SDK工具包中,有很多十分有用的工具,可以帮助程序员开发和测试Android应用程序,大大提高其工作效率.其中的一款叫 Hierachy Viewer的可视化调试工具,可以很方便地在 ...
- jquery的children方法和css3选择器配合使用
$(".pid").children("ul:nth-child(2)");//获取拥有pid类元素下的第二个ul元素 $(".pid"). ...