前端js的事件绑定 以及事件流

事件是可以被 JavaScript 侦测到的行为。


网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。


事件通常与函数配合使用，当事件发生时函数才会执行。


执行JS 事件的方式：


HTML 事件属性可以直接执行 JavaScript 代码


HTML 事件属性可以调用 JavaScript 函数


你可以为 HTML 元素指定自己的事件处理程序


你可以阻止事件的发生。


等等 ...


常用的JS事件 type


鼠标单击事件 onclick
鼠标经过事件 onmouseover
鼠标移开事件 onmouseout
聚焦事件 onfocus
失焦事件 onblur
加载事件 onload
刷新页面 onunload（貌似只对IE有效）
关闭页面 onbeforeunload（貌似只对IE有效）


前端事件绑定知识点（面试常考）_


事件流


事件流描述的是从页面中接受事件的顺序。


IE 的事件流是事件冒泡流，事件由子元素获取并沿DOM树向上传播。即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(document)，用 stopPropagation() 方法终止冒泡。


Netscape 的事件流是事件捕获流，事件由根元素获取并沿DOM树向下分发。与事件冒泡流相反，事件捕获的思想是不太具体的节点(document)应该更早接收到事件，而最具体的节点最后接收到事件。已经不适用了


前端事件绑定知识点（面试常考）_
前端事件绑定知识点（面试常考）_


Event 对象


HTML DOM Event 对象


header 1 header 2


事件 event
事件目标 event.target
添加事件 element.addEventListener(type, listener, false)
移除事件 element.removeEventListener(type, listener, false)
阻止事件冒泡 event.stopPropagation()
取消默认行为 event.preventDefault()
IE 中的 Event 对象
header 1 header 2
事件 window.event
事件目标 event.srcElement
添加事件 element.attachEvent('on' + type, listener)
移除事件 element.detachEvent('on' + type, listener)
阻止事件冒泡 event.cancelBubble = true
取消默认行为 event.returnValue = false


事件处理程序




HTML 事件处理程序


事件直接写在html的元素里面，缺点：html和js代码紧密的耦合在一起。


<a href="" οnclick="alert('msg');">测试</a>


0级 DOM事件处理程序


把一个函数赋值给一个事件的处理程序属性，优点：比较简单，跨浏览器支持。缺点：不能添加多个事件处理程序，最后一个事件会覆盖前面的事件
document.getElementById('id').onclick = function () {
    alert(1);
}


2级 DOM事件处理程序


通过 addeventlistener() 添加事件，只能用 removeEventlistener() 删除此事件。它们都接收三个参数：要处理的事件名event（不加'on'）、作为事件处理程序的函数function（优点：可以添加多个事件处理程序，）和一个布尔值useCapture。布尔参数仅仅在现代浏览器最近的几个版本中是可加可不加的，并且true代表该事件在捕获阶段执行，false代表在冒泡阶段执行，建议写false，因为有些浏览器只有冒泡阶段。
target.addEventListener(type, listener[, useCapture]);
target.removeEventListener(type, listener[, useCapture]);


IE 事件处理程序


IE8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。 但是，对于这些不支持该函数的浏览器，你可以使用 attachEvent() 方法来添加事件句柄。通过 attachEvent() 添加事件，只能用 detachEvent() 删除此事件。这两个方法接收相同的两个参数：事件处理程序名称 type 与事件处理函数 function，不支持第三个参数的原因：IE8--只支持冒泡冒泡流。
element.attachEvent(type, function)
element.detachEvent(type, function)




<div id="box"> 


   <p>Lorem ipsum dolor sit amet.</p> 
   <p>Lorem ipsum dolor sit amet.</p> 
   <p>Lorem ipsum dolor sit amet.</p> 
</div> 
<script> 
let box = document.getElementById('box');
 box.addEventListener('click', function (e) { 
// 检查事件源e.targe是否为P
 if (e.target.nodeName === 'P')
 { 
// 真正的处理过程在这里 alert('p');
  }
 })
 </script>




var eventshiv = { 
    // event兼容 getEvent: function(event) {
       return event ? event : window.event;
 },
 // type兼容 
getType: function(event) { 
    return event.type; 
},
 // target兼容 
getTarget: function(event) { 
  return event.target ? event.target : event.srcelem; 
},
 /** * 添加事件句柄 * 2级 DOM -> IE -> 0级 DOM */
 addHandler: function(elem, type, listener) { 
if (elem.addEventListener) { 
elem.addEventListener(type, listener, false);
 } else if (elem.attachEvent) { 
elem.attachEvent('on' + type, listener); 
} else { 
// 在这里由于.与'on'字符串不能链接，只能用 []
 elem['on' + type] = listener;
 } 
},
 // 移除事件句柄 
removeHandler: function(elem, type, listener) {
 if (elem.removeEventListener) { 
elem.removeEventListener(type, listener, false); 
} else if (elem.detachEvent) { 
elem.detachEvent('on' + type, listener); 
} else { 
elem['on' + type] = null;
 }
 },
 /** * 添加事件代理 */ 
addAgent: function (elem, type, agent, listener) { 
elem.addEventListener(type, function (e) { 
if (e.target.matches(agent)) { 
listener.call(e.target, e);
 // this 指向 e.target 
}
 });
 }, 
/** * 取消默认行为 * 非IE -> IE */
 preventDefault: function(event) { 
if (event.preventDefault) { 
event.preventDefault();
 } else { 
event.returnValue = false;
 }
 },
 /** * 阻止事件冒泡 * 非IE -> IE */ 
stopPropagation: function(event) {
 if (event.stopPropagation) {
 event.stopPropagation();
 } else { 
event.cancelBubble = true;
 }
 }
 };
 console.log('eventshiv.js 文件加载成功！');