JavaScript 事件

详细事件信息：https://www.w3school.com.cn/jsref/dom_obj_event.asp

绑定事件的三种方法

• 属性直接赋值 element.ontype = function(event){ }
  使用此方式同一类型事件只可以绑定一个处理函数
• element.addEventListener(type, func, false)
  使用此方式同一事件可以绑定多个处理函数（IE9以下版本不可使用）
• element.attachEvent(ontype, func)
  同一事件可以绑定多个处理函数（IE、Google支持），且运行时this指向window而非元素本身

解除事件

与上面三种绑定方式相对应

• element.ontype = false
• element.removeEventListener(type, func, false) - - - - - -此时func不能为匿名函数
• element.detachEvent(ontype, func)

事件冒泡和捕获

当结构上具有嵌套关系的元素绑定了同名事件时：
事件冒泡是由子节点向父节点逐一冒泡去触发同名事件。
事件捕获是由父节点向子节点逐一去触发同名事件。

addEventListener(’’, function(e) {}, false);
第三个参数可控制事件是冒泡还是捕获（false为冒泡，true为捕获），js逻辑写法的先后顺序与事件触发的顺序无关。

取消冒泡

w3c:event.stopPropagation()
IE:event.cancelBubble = true;

事件原对象

即触发事件的源头元素

<script type="text/javascript">
	ul.onclick = function (event){
	// IE: 支持window.event
    // 标准： 事件处理函数传入的event对象
    var e = event || window.event;
    
   	// FF: event.target
	//IE: event.srcElement
	//Chreme 都支持
	//兼容写法：
	var target = event.target || event.srcElement;
	
	//dosomething
	}

</script>

利用事件冒泡和事件源对象可以实现事件委托
例如对于ul下的元素若操作相同则无需循环绑定事件。

注：

• click事件只监听左键，mousedown、mouseup监听左右键以及滚轮（对应button=0/2/1）
• 触发顺序 keydown->keypress->keyup
• keydown可以响应任何按键，keypress只响应字符类按键返回字符对应ASCII码