事件绑定与传播

事件的绑定

1. 使用 对象.事件 = 函数 的形式绑定响应函数，

• 它只能同时为一个元素的一个事件绑定一个响应函数，
• 不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的

btn.onclick = function(){
console.log(this)
}
btn.onmouseover = function(){
console.log("123")
}

2.addEventListener()
通过这个方法也可以为元素绑定响应函数

• • 参数：

•   1.事件的字符串，不要on
  

•   2.回调函数，当事件触发时该函数会被调用
  

•   3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
  

• 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，

• 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行

• 这个方法不支持IE8及以下的浏览器

btn.addEventListener("click",function(){
console.log(this)
alert(
},false)
btn.addEventListener("click",function(){
alert(2)
},false)
btn.addEventListener("click",function(){
alert(3)
},false)	

2. attachEvent()
3. • • 在IE8中可以使用attachEvent()来绑定事件

• • 参数：

•   1.事件的字符串，要on
  

•   2.回调函数
  

• • 这个方法也可以同时为一个事件绑定多个处理函数，

• • 	不同的是它是后绑定先执行，执行顺序和addEventListener()相反
    

ie8 attachEvent()
btn.attachEvent("onclick",function(){
alert("abc")
})
bind(btn,"click",function(){
console.log(this)
})

4.定义一个函数，用来为指定元素绑定响应函数

• addEventListener()中的this，是绑定事件的对象
• attachEvent()中的this，是window
• 需要统一两个方法this
• 参数：
• el 要绑定事件的对象
• event 事件的字符串(不要on)
• callback 回调函数

function bind(el,event,callback){
if(el.addEventListener){
el.addEventListener(event,callback,false)
}else{
el.attachEvent("on"+event,function(){
callback.call(el)
})
}
}
}

事件的传播

1.事件的传播

• • 关于事件的传播网景公司和微软公司有不同的理解
• • 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，

•  然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
  

• • 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，

•   然后在向内传播给后代元素
  

• • W3C合了两个公司的方案，将事件传播分成了三个阶段

•   1.捕获阶段
  

•   	- 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
  

•   2.目标阶段
  

•   	- 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
  

•   3.冒泡阶段
  

•   	- 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
  

•   - 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
  

•   	一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
  

• • IE8及以下的浏览器中没有捕获阶段

window.onload = function(){
var box1 = document.getElementById("box1")
var box2 = document.getElementById("box2")
var box3 = document.getElementById("box3")
				
bind(box1,"click",function(){
    alert("box1")
})
				
bind(box2,"click",function(){
	alert("box2")
})
				
bind(box3,"click",function(){
	alert("box3")
})
function bind(el,event,callback){
	if(el.addEventListener){
			el.addEventListener(event,callback,true)
}else{
			el.attachEvent("on"+event,function(){
				callback.call(el)
			})
		}
	}
				
}