js 事件对象

事件对象（Event）

• 什么是事件对象
  • 当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中
  • 这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向
• 如何使用：
  • IE8以下浏览器中事件对象没有作为实参传递，而是作为window的属性保存
  • 其他浏览器都将event作为实参传递进响应函数中
  • 为了兼容IE8以下，常采用以下方式：

`元素.事件 = function(event){
				event = event || window.event;
				
			};`

• 事件的冒泡
  当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
  • 取消冒泡：
    event.cancelBubble = true;
• 事件的委派
  • 将事件统一绑定给元素的共同的祖先元素，这样当后代元素(包括新添加的)上的事件触发时，会一直冒泡到祖先元素
  • target event中的target表示的触发事件的对象
• 事件的绑定
  • 方式1：通过html元素指定事件属性绑定
    • <button onclick="alert('hello');world')">按钮 </button>
  • 方式2：通过DOM对象的属性绑定
    • var btn = document.getElementById("btn1")
    • btn1.onclick = function(){alert("hello");}
    • 取消默认行为：return false;
  • `方式3：设置事件监听器
    • 作用：与方式1和方式2不同，可以为同一事件绑定多个函数，而不是一个。
    • 除了IE8及以下的浏览器：
      • btn.addEventListener("click",functioin(){alert("hello");},false);
      • 传递的参数：事件字符串（不包括on），回调函数，是否在捕获阶段触发事件（默认为false）
      • 执行的顺序：先绑定先执行
      • this指绑定事件的对象，在例子中，即为btn
      • 移除监听器：removeEventListener()
      • 取消默认行为：event.preventDefault();IE8不支持
    • IE8及以下浏览器：
      • btn.attachEvent("onclick",functioin(){alert("hello");})
      • 传递的参数：事件字符串（包括on）,回调函数
      • 执行的顺序：先绑定后执行
      • this 指 window
      • 移除监听器：detachEvent()
    • 兼容：

	function bind(obj,eventStr,callback){`
				if (obj.addEventListener){
 					obj.addEventListener(eventStr,callback,false);
 				}
 				else{
 					obj.attachEvent("on"+eventStr,callback{
 						callback.call(obj);
 					)
 				}
 	}

• 事件的传播
  事件传播有三个阶段
  • 捕获阶段
    • 从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
  • 目标阶段
    • 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
  • 冒泡阶段
    • 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
  • IE8及以下的浏览器中没有捕获阶段