js事件
所谓事件，就是HTML文档或浏览器窗口发生的一些特定的交互瞬间(比如用户点击了一个html元素)，事件可以使用侦听器或者事件处理程序来预定事件。
事件流：描述了页面接收事件的顺序
1 事件冒泡流，由最具体的元素逐级向上传播，直至文档。
例如：如果我们点击了网页中的一个<li>标签，我们可以认为我们不仅点击了<li>标签，还点击了包含这个<li>标签的<ul>，还点击了包含<ul>的<body>…… 这也就意味着：若<li>和<ul>都有事件处理程序时，点击<li>会触发<li>和<ul>上的事件处理程序。多数情况下，事件冒泡较为常用。
2 事件捕获流，由不具体的元素逐级向下传播，直至最具体的元素。与事件冒泡完全相反
事件处理程序
1 html事件处理程序
<li onclick="alert('hello world!')"></li>
在html标签上添加事件
2 DOM0级事件处理程序
在javascript脚本中为元素对象的时间属性添加事件处理程序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li id="first"></li> <li></li> </ul> </body> <script> var a = document.getElementById('first'); a.onclick = function(){ alert('hello world') } </script> </html>
3 DOM2级事件处理程序 (IE8及以上版本不支持)
使用事件处理程序方法添加事件，有两个方法;
addEventListener() 和 removeEventListener() 接收三个参数: 事件名 事件处理函数 布尔值(决定使用哪种事件流)
事件名： 'click' 'mouseover' …… 注意：没有 on ！！
事件处理函数: 函数名 或者 自定义匿名函数
布尔值： false表示使用事件冒泡 true表示使用事件捕获
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li id="first"></li> <li></li> </ul> </body> <script> var a = document.getElementById('first'); a.addEventListener('click',function(){alert('hello world!')},false) </script> </html>
4 IE特有的事件处理程序方法
attachEvent() detachEvent() 分别表示添加事件或者删除事件。两个参数：事件名 事件处理函数
事件名：'onclick' 'onmouseover'…… 注意：有 on ！！
事件处理函数：函数名 或者自定义匿名函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li id="first"></li> <li></li> </ul> </body> <script> var a = document.getElementById('first'); a.attachEvent('onclick',function(){alert('hello world!')}) </script> </html>
5 跨浏览器的事件处理程序
合理使用能力检测
var EventUtil = {
addLister:function(element,type,hander){
if (element.addEventListener){
element.addEventListener(type,hander,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,hander);
}else{
element['on'+type] = hander;
}
},
removeEvent:function(element,type,hander){
if(element.removeEventListener){
element.removeEventListener(type,hander,false)
}else if(element.detachEvent){
element.detachEvent('on'+type,hander)
}else{
element['on'+type] = hander
}
}
}
事件对象
在触发DOM中的事件时，会产生一个事件对象event，这个对象包含了与事件有关的信息。如：鼠标事件对象包含鼠标的位置，键盘导致的事件对象包含键盘的按键。
1 DOM中的事件对象
无论使用DOM0级还是DOM2级事件处理程序，都会产生一个事件对象并传入该事件处理程序中。
var a = document.getElementById('first'); a.onclick = function(event){ alert(event.clientX) // 显示鼠标点击时的x坐标 }
event.type 返回时间名称 如 'click'
event.stopPropagation() 阻止事件冒泡
event.preventDefault() 阻止事件的默认行为
2 IE中的事件对象
var a = document.getElementById('first'); a.onclick = function(){ var event = window.event alert(event.type); // 显示鼠标点击时的x坐标 }
type 事件名
srcElement 事件目标
cancelBubble 阻止事件冒泡，true为阻止
returnValue 阻止事件默认行为
3 跨浏览器兼容
var EventUtil = { addLister:function(element,type,hander){ if (element.addEventListener){ element.addEventListener(type,hander,false); }else if(element.attachEvent){ element.attachEvent('on'+type,hander); }else{ element['on'+type] = hander; } }, removeEvent:function(element,type,hander){ if(element.removeEventListener){ element.removeEventListener(type,hander,false) }else if(element.detachEvent){ element.detachEvent('on'+type,hander) }else{ element['on'+type] = hander } }, getEvent:function(event){ return event?event:window.event; }, getTarget:function(event){ return event.target?event.target:event.srcElement; }, preventDefault:function(event){ if (event.preventDefault){ event.preventDefault(); }else { event.returnValue = false; } }, stopPropagation:function(event){ if (event.stopPropagation){ event.stopPropagation(); }else { event.cancelBubble = true; } } }
