【JavaScript编程】事件对象

事件对象

每次一件事情发生的时候就会马上生成一个事件对象 event

• event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态；
• 事件通常与函数结合使用，函数不会在事件发生前被执行。

常用属性

属性	描述
event.bubbles	返回布尔值，指示事件是否是起泡事件类型。
event.cancelable	返回布尔值，指示事件是否可拥可取消的默认动作。
event.eventPhase	返回事件传播的当前阶段。
event.target	返回事件的目标节点（触发该事件的节点）。srcElement（旧ie）
event.currentTarget	绑定事件的对象，恒等于this，可能出现在事件流的任意一个阶段中
event.timeStamp	返回事件生成的日期和时间。
event.type	返回当前 Event 对象表示的事件的名称。

常用方法

方法	描述
event.initEvent()	初始化新创建的 Event 对象的属性。
event.preventDefault()	取消事件的默认行为。event.returnValue = false;（旧ie）
event.stopPropagation()	阻止事件冒泡。event.cancelBubble = true;（旧ie）

一、事件冒泡

事件冒泡分为三个阶段，它是这样的：

• 第一，捕获阶段。事件从 Document 对象沿着文档树向下传递给目标节点。如果目标的任何一个先辈专门注册了捕获事件句柄，那么在事件传播过程中运行这些句柄。
• 第二，目标阶段。直接注册砸目标上的适合的事件句柄将运行。这与 0 级事件模型提供的事件处理方法相似。
• 第三，起泡阶段。在此阶段，事件将从目标元素向上传播回或起泡回 Document 对象的文档层次。

二、事件监听

语法

/**
 * 添加事件
 * @param {String} event 必需。描述事件名称的字符串。注意：不要使用 "on" 前缀。例如，使用 "click" 来取代 "onclick"。
 * @param {Function} fn 必需。描述了事件触发后执行的函数。
 * @param {Boolean} useCapture 可选。true: 事件在捕获阶段执行; false(默认): 事件在冒泡阶段执行
 */
addEventListener(event, fn, useCapture)

区别

• onclick 后面的事件会覆盖前面的
• addEventListener 事件将依次执行，不会被覆盖

兼容

• addEventListener 标准浏览器、ie9及以上版本支持
• attachEvent ie8及以下版本

用法

function addEvent(element, type, fn, useCapture){
	if(element.attachEvent){
		element.attachEvent("on" + type, fn, useCapture) // ie8及以下
	}else{
		element.addEventListener(type, fn, useCapture)
	}
};

addEvent(btn, "mouseover", function(){
	console.log("事件监听");
})

移除事件

removeEventListener(event, fn, useCapture)
detachEvent(event, fn, useCapture) // ie8及以下版本

三、事件委托

将事件委托给父级元素

• 新添加的节点触发该事件的时候同样有效
• 循环添加事件的方法对性能不友好

用法

<table id="table" border="1">
	<tr>
		<th>操作</th>
		<th>内容</th>
	</tr>
	<tr>
		<td><button class="edit" data-row="{id: '12'}">编辑</button></td>
		<td>1234</td>
	</tr>
	<tr>
		<td><button class="edit" data-row="{id: '56'}">编辑</button></td>
		<td>5678</td>
	</tr>
</table>

<script>
	window.onload = function(){
		var oTable = document.getElementById('table');
		// 事件委托 给父级
		oTable.onclick = function(e){
			var e = e || window.event;
			var target = e.target || e.srcElement; // 
			var className = target.className;
			if(className.toLowerCase() === 'edit'){
				var rowData = target.getAttribute('data-row');
				// 执行代码
				handleFn(rowData)
			}
		};	
	};
</script>