DOM事件

最新推荐文章于 2023-11-13 19:18:32 发布

sayawei

最新推荐文章于 2023-11-13 19:18:32 发布

阅读量136

点赞数

分类专栏：学习笔记文章标签： DOM

本文链接：https://blog.csdn.net/sayawei/article/details/79371542

版权

学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。事件冒泡，即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)；事件捕获则相反，是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

事件的三种处理程序：

1.HTML事件处理程序

<input type="button" value="按钮" id="btn" οnclick="show()">

事件直接加在HTML标签结构里。缺点是HTML和js耦合度高，如果要修改函数可能要修改两处。

2.DOM0级事件处理程序

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="box">
             <input type="button" value="按钮2" id="btn2">
        </div>
<script type="text/javascript">
	var btn2=document.getElementById('btn2');
	btn2.οnclick=function(){
		alert('dom0!');
	}
</script>
</body>
</html>

把一个函数赋值给一个事件的处理程序属性。先用变量取出元素，让事件以这个对象属性的形式出现的方式添加。它简单，且具有跨浏览器优势。要取消这个时间，设置=null即可。

3.DOM2级事件处理程序

DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。

布尔值--false：表示在冒泡阶段调用事件处理程序(可以最大限度的兼容浏览器)，一般设为false；true表示在捕获阶段调用事件处理程序。


注意：
1、若事件名称有on，则需去掉on。如onclick --> click，onmouseover --> mouseover等等；
2、false 最大限度兼容所有浏览器--事件冒泡流。
3.通过addEventListener添加的事件只能通过removeEventListener来删除。参数要与添加事件时相同。
DOM0级和DOM2级事件处理程序可以给一个事件绑定多个函数，事件触发的时候会按照绑定顺序执行各个函数。如下所示：
btn3.addEventListener('click',show,false);
btn3.addEventListener('click',show,function(){alert(this.value）;},false);

缺点：IE不支持该事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="box">
         <input type="button" value="按钮3" id="btn3">
    </div>
<script type="text/javascript">
	function show(){
		alert('dom2!');
	}
	var btn3=document.getElementById('btn3');
	btn3.addEventListener('click',show,false);
</script>
</body>
</html>