关于事件的绑定 事件的传播

事件的绑定

使用 对象.事件 = 函数 的形式绑定响应函数，
它只能同时为一个元素的一个事件绑定一个响应函数，
不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的

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

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

• 参数：
  1.事件的字符串，不要on
  2.回调函数，当事件触发时该函数会被调用
  3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
  使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
  这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
  这个方法不支持IE8及以下的浏览器**
  attachEvent()
  • 在IE8中可以使用attachEvent()来绑定事件
  • 参数：
    1.事件的字符串，要on
    2.回调函数
  • 这个方法也可以同时为一个事件绑定多个处理函数，
    不同的是它是后绑定先执行，执行顺序和addEventListener()相反

 ie8 attachEvent()
 btn.attachEvent("onclick",function(){
  alert("abc")
})

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

bind(btn,"click",function(){
	console.log(this)
})

addEventListener()中的this，是绑定事件的对象
attachEvent()中的this，是window
需要统一两个方法this

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

事件的传播

事件的传播

• 关于事件的传播网景公司和微软公司有不同的理解
• 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，
  然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
• 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，
  然后在向内传播给后代元素
• 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)
						})
					}
				}
				
			}