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-document
div.onclick = test1;
body.onclick = test2;
document.onclick = test3;
点击div的时候,执行顺序是:test1 test2 test3
点击body的时候,执行顺序是:test2 test3
**2.事件捕获(Netscape网景事件流)**
从外到内执行,顺序为:div-body-document
div.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.event
DOM2级
event
event?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 键盘抬起