JavaScript事件处理详解-优快云博客

本文详细介绍了JavaScript中的事件处理机制，包括事件的概念、常用的事件类型、事件流（如事件冒泡和事件捕获）、以及不同级别的事件处理方式（如HTML事件处理、DOM0级和DOM2级事件处理）。同时，还提供了兼容多种浏览器的事件监听代码。

一、事件

1、什么是事件

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

2、常用事件

onClick 单击事件

onMouseOver 鼠标经过事件

onMouseOut 鼠标移出事件

onChange 文本内容改变事件

onSelect 文本框选中事件

onFocus 光标聚集事件

onBlur 移开光标事件

onLoad 网页加载事件

onUnload 关闭网页事件

二、事件流

1、事件流：

描述的是在网页中接受事件的顺序

2、事件冒泡：

由最具体的元素接受，然后逐级向上传播至最不具体的元素的节点（文档）

3、事件捕获：

最不具体的节点先接受事件，而最具体的节点应该是最后接受事件

三、事件处理

1、HTML事件处理：直接添加到HTML结构中

<body>
<button id="btn" onclik ="btnCliked">按钮</button> //直接添加到HTML结构中
<script>
var mytime=setInterval(function(){
getTime;
},1000);
function getTime(){
var d=new Date();
var t=d.toLocaleDateString();
document.getElementById("ptime").innerHTML=t;
}
</script>
</body>

这一方法缺点：修改时麻烦，需要同时修改两处

2、DOM0级事件处理：把一个函数赋值给一个事件处理程序属性

<body>
<button id="btn">按钮</button>
<script>
var btn=document.getElementById("btn");
btn.onclick=function (){alert("DOM0级事件处理")};
btn.onclick=null; //清除DOM0级事件
</script>
</body>

这一方法的缺点是，运行多个事件时，新事件会覆盖旧事件

3、DOM2级事件处理：addEventListener("事件名","事件处理函数","布尔值")

ture:事件捕获

false:事件冒泡

removeEventListener() 移除监听事件

<body>
<button id="btn">按钮</button>
<script>
var btn=document.getElementById("btn");
btn.addEventListener("click",demo1);
btn.addEventListener("click",demo2);
btn.addEventListener("click",demo3);
function demo1(){
alert("DOM2级事件处理程序1")
}
function demo2(){
alert("DOM2级事件处理程序2")
}
function demo3(){
alert("DOM2级事件处理程序3")
}
btn.removeEventListener("click",demo2)
</script>
</body>

这一方法可以依次执行多个事件，也可移除其中一个事件。

4、IE事件处理程序：

attchEvent

detachEvent

用法和addEventListener相同，只是用在ie8以下的浏览器

下面是一个兼容各种浏览器的监听事件代码：

<body>
<button id="btn">按钮</button>
<script>
var btn=document.getElementById("btn");
if(btn.addEventListener){
btn.addEventListener("click",demo);
}else if(btn.attachEvent){
btn.attachEvent("onclick",demo);
}else{
btn.onclick=demo();
}
function demo(){
alert("hello");
}
</script>
</body>