2018.9.5 星期三
事件
就是文档或浏览器窗口中发生的一些特定的交互瞬间：
点击、移进、移出、聚焦、失焦、键盘按下（回车）、键盘抬起…
如果在登录页面某一个input内按下了enter键，是需要登录的话。
js代码:
input.onkeydown = function(){
//判断按下是不是回车键，如果是回车跳转到首页
}
事件三要素
事件目标(event target) btn(节点)
事件处理程序(event handler) function
事件对象(event object) event
每一个事件处理函数都有一个参数，是事件对象，只读的
btn.onclick = function(event){
//type 事件类型
}
btn.onmouseenter = function(event){
//event.type
}
事件流
**1.事件冒泡（IE事件流）**从内到外执行，顺序为：div-body-documentdiv.onclick = test1;body.onclick = test2;document.onclick = test3;点击div的时候，执行顺序是：test1 test2 test3点击body的时候，执行顺序是：test2 test3**2.事件捕获（Netscape网景事件流）**从外到内执行，顺序为：div-body-documentdiv.onclick = test1;body.onclick = test2;document.onclick = test3;点击div的时候，执行顺序是：test3 test2 test1点击body的时候，执行顺序是：test3 test2**3.DOM事件流**事件捕获--处理目标--事件冒泡**event事件对象的方法：**IE8及以下不支持停止冒泡：event.stopPropagation();阻止默认行为： event.preventDefault(); **事件处理程序**HTML事件处理程序DOM0级事件处理程序
绑定事件的方式
**1.HTML属性绑定**缺点：依赖性比较强，耦合度高。<button onclick = "test()">按钮</button>**2.DOM0级绑定**不存在兼容性问题，在IE8及以下可以使用，非IE8及以下也可以使用。btn.onclick = function(event){alert(1);/* event //在非IE8及以下中，event参数就是事件对象window.event //IE8及以下中event.stopPropagation(); // 阻止冒泡event.preventDefault(); // 阻止默认行为 */ }btn.onclick = null; //解绑如果有同一个事件类型绑定两次事件函数，会发生覆盖 **3.DOM2级绑定** 区分浏览器非IE8及以下:ele.addEventListener('click',handle,true/false);function handle(event){//event--->事件对象//this-->element}true是捕获阶段执行false是冒泡阶段执行（默认） //解绑ele.removeElementListener('click',handle); ele.addEventListener('click',handle);ele.addEventListener('click',handle1);//不会发生覆盖，依次执行IE8及以下:ele.attachEvent('onclick',handle);function handle(event){//event--->事件对象//this-->window} //解绑ele.detachEvent('onclick',handle);ele.attachEvent('click',handle);ele.attachEvent('click',handle1);//反向执行DOM0级在非IE8及以下：event在IE8及以下: window.eventDOM2级eventevent?event:window.event
总结：
DOM0级
DOM2级
非IE8及以下：
//不会发生覆盖，依次执行
ele.addEventListener(‘click’,handle);
ele.addEventListener(‘click’,handle1);
//解绑
ele.removeElementListener(‘click’,handle);
IE8及以下：
//按相反顺序执行
ele.attachEvent(‘click’,handle);
ele.attachEvent(‘click’,handle1);
//解绑
ele.detachEvent(‘onclick’,handle);
如果事件处理函数是匿名函数，无法解绑。
ele.addEventListener('click',function(){alert(1);});
阻止冒泡：
非IE8及以下：
event.stopPropagation();
IE8及以下：
event.cancelBubble = true;
阻止默认：
非IE8及以下：
event.preventDefault();
IE8及以下：
event.returnValue = false;
获取目标对象：
非IE8及以下：
event.target 获取源头元素
event.currentTarget 获取当前的目标对象
this == event.currentTarget
IE8及以下：
event.srcElement 获取源头元素
this–>window
鼠标事件
mouseenter 鼠标移入 不支持子元素mouseleave 鼠标移出 不支持子元素mouseover 鼠标移入 支持子元素mouserout 鼠标移出 支持子元素keydowmn 键盘按下function(event){event.keyCode == 键盘码;//13 回车}keyup 键盘抬起