对同一个事件注册多个事件处理函数
我们的网页是多人开发的话，如果有一个按钮员工1和员工2都需要进行点击事件处理，他们都各自写了js文件引入到页面中，但是这样是达不到预期的效果，因为前面的会被后面的覆盖掉，所以我们可以有addEventListener()来解决
事件处理函数
var btn = my$('btn');
第一种
onclick：无法给同一个对象的同一个事件注册多个事件处理函数
btn.onclick = function () {
alert('我是事件1')
}
btn.onclick = function () {
alert('我是事件2')
}
只执行'我是事件2'，因为第一个被覆盖了
//-----------------------------------------------------------
第二种
addEventListener():他可以同时给同一个事件注册多个处理函数
这个方法虽好，但是有兼容问题，IE9以后才支持
var btn = my$('btn');
// addEventListener(事件名称， 处理函数)
btn.addEventListener('click', function () {
alert("我是事件1");
})
btn.addEventListener('click', function () {
alert("我是事件2");
})
//点击按钮的时候，先弹出"我是事件1"的窗口，再弹出"我是事件2"的窗口
//-----------------------------------------------------------------------------------
第三种
attachEvent(事件名称（前面加on）, 处理函数)
也有浏览器兼容问题，IE的老版本特有的方法，不是标准的方法，IE6-IE10支持
btn.attachEvent('onclick', function () {
alert('我是事件1');
})
btn.attachEvent('onclick', function () {
alert('我是事件2');
})
//点击按钮的时候，先弹出"我是事件1"的窗口，再弹出"我是事件2"的窗口
-----------------------------------------------------------
// 对同一个事件注册多个事件处理函数
// 处理兼容性(写一个函数)
//我们的函数的事件名不带on
function addEventListener(element, eventName, fn) {
// 判断是否有该方法
if(element.addEventListener) {
//如果有该方法则这里
element.addEventListener(eventName, fn);
}else if(element.attachEvent) {
element.attachEvent('on'+ eventName, fn);
}else {
element['on' + eventName] = fn;
}
}
注意：addEventListener()中的this是绑定事件的对象，而attachEvent()的this是window
移除事件：当我们只想让事件执行一次的时候，就要移除事件
var btn = my$('btn');
对于btn.onclick = function （） {}移除事件
btn.onclick = function () {
alert('我是点击事件');
//移除事件
this.onclick = null;
}
------------------------------------------------------------
对于btn.addEventListener()移除事件
注意：如果要移除事件在这里就不能使用匿名函数了
function btnClick() {
alert('我是事件');
//移除事件
this.removeEventListener('click', btnClick);
}
btn.addEventListener('click', btnClick);
---------------------------------------------------
//移除事件的兼容性
function removeEventListener(element, eventName, fn) {
if(element.removeEventListener) {
// 如果支持该方法则执行这里
element.removeEventListener(eventName, fn);
}else if(element.detachEvent) {
element.detachEvent("on" + eventName, fn);
}else {
element['on' + eventName] = null;
}
}
事件的三个阶段
事件的三个阶段（每次事件发生这三个阶段都有，但是捕获阶段和冒泡阶段我们只能使用一个）
1、捕获阶段
2、目标阶段
3、冒泡阶段
当鼠标点击所看到的的按钮时，其实发生了一系列的事件传递，可以想象一下
button实际上是被body“包裹”起来的，body是被html“包裹”起来的，html是被document“包裹”起来的，document是被window“包裹”起来的
所以，在你的鼠标点下去的时候，最先获得这个点击的是最外面的window，然后经过一系列传递才会传到最后的目标button，当传到button的时候，这个事件又会像水底的泡泡一样慢慢往外层穿出，直到window结束。
综上，一个事件的传递过程包含三个阶段，分别称为：
捕获阶段，目标阶段，冒泡阶段
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript">
var box1 = my$('box1');
var box2 = my$('box2');
var box3 = my$('box3');
var arrays = [box1, box2, box3];
我们现在为这三个div注册点击事件
1、使用onclick方式
for(var i=0; i<arrays.length; i++) {
console.log(arrays[i]);
arrays[i].onclick = function () {
alert(this.id);
}
}
当点击box1的时候，会先弹出box3，再弹box2,最后box1 这个属于冒泡阶段
-----------------------------------------------------------------------
2、使用attachEvent()来注册事件（IE6-IE10支持）
for(var i=0; i<arrays.length; i++) {
arrays[i].attachEvent('onclick', funtion () {
alert(this.id);
});
}
当点击box1的时候，会先弹出box3，再弹box2,最后box1 这个属于冒泡阶段
-------------------------------------------------------------------
3、使用addEventListener();之前我们只写了两个参数,他可以收三个参数
第三个参数是布尔值（true代表事件捕获，false事件冒泡）
for(var i=0; i<arrays.length; i++) {
arrays[i].addEventListener('click', function () {
alert(this.id);
}, true);
}
为true时,当点击box1的时候，会先弹出box1，再弹box2,最后box3 这个属于捕获阶段
为false时，当点击box1的时候，会先弹出box3，再弹box2,最后box1 这个属于冒泡阶段
综上所得，只有addEventListener才能选择是捕获阶段还是冒泡阶段，onclick和attachEvent都是事件冒泡
---------------------------------------------------------------------------
阻止冒泡：通过事件对象来阻止冒泡
stopPropagation这个是标准的DOM方法，老版本的IE不兼容
老版本的IE用cancelBubble = true;
for(var i=0; i<arrays.length; i++) {
console.log(arrays[i]);
//注册点击事件
arrays[i].onclick = function (e) {
alert(this.id);
e.stopPropagation();
//e.cancelBubble = true;//老版本的IE
}
}
网友评论