javascript中的事件
所谓事件，就是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;
}
}
}
浙公网安备 33010602011771号