- 事件绑定
1.1事件绑定的三种方式:
1.元素.事件名=function(){}
这种方式只能给元素注册一个相同的事件，如果需要注册多个该类型事件，则不行，后面的会覆盖前面的;
2.addEventListener(不带on的事件名,事件处理函数,布尔值)
这种方式可以给元素注册多个相同类型的事件;事件处理函数可以用匿名函数，可以用命名函数;布尔值是针对事件阶段(捕获，目标，冒泡)
除了IE8及以下
3.attachEvent(带on的事件名,事件处理函数)
这种方式可以给元素注册多个相同类型的事件;
这种方式可以给元素注册多个相同类型的事件;事件处理函数可以用匿名函数，可以用命名函数
IE11以下
绑定事件示例：
// my$("btn").onclick=function(){}
my$("btn").addEventListener("click",function(){
console.log("哈哈");
},false)
my$("btn").addEventListener("click",function(){
console.log("嘻嘻");
},false)
my$("btn").addEventListener("click",function(){
console.log("嘎嘎");
},false)
my$("btn").attachEvent("onclick",function (){
console.log("哈哈");
})
my$("btn").attachEvent("onclick",function(){
console.log("嘎嘎");
})
my$("btn").attachEvent("onclick",function(){
console.log("嘻嘻");
})
addEventListener与attachEvent兼容代码
//绑定监听事件
function addEvent(element,type,fn){
if (window.addEventListener) {
return element.addEventListener(type,fn,false);
}else{
return element.attachEvent("on"+type,fn)
}
}
removeEventListener与detachEvent兼容代码
//移除监听事件
function removeEvent(element,type,fn){
if (window.removeEventListener) {
return element.removeEventListener(type,fn,false);
}else{
return element.detachEvent("on"+type,fn)
}
}
//测试代码
function f1(){
console.log("哈哈");
}
addEvent(my$("btn"),"click",f1)
removeEvent(my$("btn"),"click",f1)
1.2解绑事件的三种方式:
1.元素.事件名=null
2.removeEventListener(不带on的事件名,事件处理函数(命名函数),布尔值)
3.detachEvent(带on的事件名,事件处理函数(命名函数))
示例：
my$("btn").attachEvent("onclick",f1)
my$("btn").attachEvent("onclick",f2)
my$("btn").attachEvent("onclick",f3)
function f1(){
console.log("哈哈")
}
function f2(){
console.log("嘻嘻")
}
function f3(){
console.log("嘎嘎")
}
my$("btn").detachEvent("onclick",f1)
my$("btn").addEventListener("click",f1,false)
my$("btn").addEventListener("click",function(){
console.log("嘻嘻")
},false)
my$("btn").addEventListener("click",function(){
console.log("嘎嘎")
},false)
function f1(){
console.log("哈哈")
}
my$("cancel").onclick=function(){
my$("btn").removeEventListener("click",f1,false)
}
my$("btn").onclick=function(){
console.log("哈哈");
};
my$("cancel").onclick=function(){
my$("btn").onclick=null;
};
1.3总结:
1.都可以为元素绑定事件;
2.方法名不一样
3.参数个数不一样
4.addEventListener 除了IE8及以下 attachEvent IE11以上
5.事件类型，一个有on，一个没有on
6.用什么方式绑定事件，就用什么方式解绑事件，解绑需要用命名函数
2.事件冒泡
2.1事件冒泡
多个元素嵌套，元素之间是有层级关系，这些元素又都注册了相同类型的事件，如果里面的元素事件触发了，则上层的元素该类型事件也会触发;
事件处理函数对象,简单看一下
事件阶段:
1.事件捕获阶段 ---e.eventPhase 值是1
2.事件目标阶段 ---e.eventPhase 值是2
3.事件冒泡阶段 ---e.eventPhase 值是3
事件是有顺序执行的，一般使用的是事件冒泡阶段，极少使用捕获阶段;
Ex1:事件的阶段示例
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
<script type="text/javascript">
my$("box1").addEventListener("click",function(e){
console.log(this.id+"====="+e.eventPhase)
},false)
my$("box2").addEventListener("click",function(e){
console.log(this.id+"====="+e.eventPhase)
},false)
my$("box3").addEventListener("click",function(e){
console.log(this.id+"====="+e.eventPhase)
},false)
</script>
Ex2:给元素绑定多个不同的事件，指定给某个函数
my$("btn").onclick=bindHandle;
my$("btn").onmouseover=bindHandle;
my$("btn").onmouseout=bindHandle;
function bindHandle(e){
//switch case分支语句
switch(e.type){
case "click":
console.log("我是click出来的");
break;
case "mouseover":
console.log("我是mouseover出来的");
break;
case "mouseout":
console.log("我是mouseout出来的");
break;
};
};
2.2阻止事件冒泡
my$("box1").addEventListener("click",function(e){
console.log(this.id+"====="+e.eventPhase)
},false)
my$("box2").addEventListener("click",function(e){
console.log(this.id+"====="+e.eventPhase)
},false)
my$("box3").addEventListener("click",function(e){
var Event=e||window.event;
console.log(this.id+"====="+e.eventPhase)
Event.cancelBubble=true;
},false)