js中dom0级事件和dom2级事件使用

谁践踏了优雅 2022-06-16 02:16 279阅读 0赞

## 1.dom0级事件 ##

在介绍dom0级事件之前，先简单介绍一下html事件，类似与一下代码的事件都叫做html事件：

<div οnclick="fun([实参])"></div>
    		<script type="text/javascript">
    			function fun([形参]){
    //				代码部分
    			}
                </script>

以上的情况就叫做html事件，也算是比较常用的事件情况。

ok，下面介绍dom0级事件，直接看代码比较清晰，类似与下面的代码的情况：

<div id="mydiv"></div>
    		<script type="text/javascript">
    			var mydiv=document.getElementById("mydiv");
    			mydiv.οnclick=function(){
    //				代码部分
    			}
    			
    		</script>

（名字是随便起的，便于理解），还可以是一下这种情况：

<div id="mydiv"></div>
    		<script type="text/javascript">
    			document.getElementById("mydiv").onclick = function() {
    				//				代码部分
    			}
    		</script>

这两种情况本质上没有区别，只是获取多了一个获取元素对象的过程。

## 2.dom2事件 ##

1.其实从dom0级事件到dom2级事件，当中也经历过dom1级事件，只不过没什么变化，所有也就忽略掉了。

如果要讲解dom2级事件，就会牵扯到js中事件的嵌套和传递,。该篇只介绍dom2级事件，其他的可以去看上一篇博客。

dom2级事件是通过以下方法来实现的：

addEventListener('事件类型'，'函数名'，'true/false')

2.dom2级事件可以用于多重嵌套的事件中，最后一个参数true表示捕获，false的话表示冒泡。如果不写的话默认是冒泡的。而且使用dom2级事件还可以同时给同一个元素设置多个事件，类似下面代码：

var oinput = document.getElementById("in");
    			oinput.addEventListener('mouseover',f1);
    			oinput.addEventListener('click',f2);
    			oinput.addEventListener('click',f3);
    			function f1(){
    				oinput.style.width="300px";
    				oinput.style.height="30px"
    			}
    			function f2(){
    				oinput.style.background="red";
    			}
    			function f3(){
    				oinput.style.border="3px solid yellow";
    			}

为了说明所以写了很简单的代码，这些方法都会被调用，所以dom2级事件可以设置多个事件。

## 3.删除事件 ##

1.删除dom0级事件：

document.getElement("..").οnclick=null

2.删除dom2级事件：

removeEventListener('事件类型','函数名'，'true/false')

## 4.dom0级事件和dom2级事件的使用场景 ##

其实这个应该是具体情况具体分析的，但是在使用dom0级事件的时候，这个只支持冒泡不支持捕获。dom2级事件可以通过设置true/false来实现冒泡或者捕获。但是注意

冒泡可以被阻止，捕获不能被阻止。

发表评论取消回复

表情：

评论列表（有 0 条评论，279人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS DOM事件

JS DOM事件为页面中的元素绑定键盘或鼠标事件，从而可以触发和实现我们想要的交互效果 -------------------- 学习目标 1. 掌握什么是

末蓝、/ 2023年07月17日 14:17/ 0 赞/ 14 阅读

相关关于DOM事件流、DOM0级事件与DOM2级事件

一、DOM 事件模型 DOM 事件模型包括捕获和冒泡，捕获是从上往下到达目标元素，冒泡是从当前元素，也就是目标元素往上到 window ![1731684-201908

深碍√TFBOYSˉ_/ 2023年06月02日 09:18/ 0 赞/ 86 阅读

相关 js Dom事件

1.onclick：点击事件 2.ondbclick：双击事件 3.onmousedown：鼠标按下事件 4.onmouseup：鼠标松开事件 5.onmouseent

刺骨的言语ヽ痛彻心扉/ 2022年09月15日 13:58/ 0 赞/ 184 阅读

相关 DOM 0级事件和DOM2级事件的认识

简单点说0级DOM 主要分为2个：一是在标签内写onclick事件　　　　二是在JS写onlicke=function（）\{\}函数 1） <i

小灰灰/ 2022年07月15日 15:54/ 0 赞/ 241 阅读

相关 js中dom0级事件和dom2级事件使用

1.dom0级事件在介绍dom0级事件之前，先简单介绍一下html事件，类似与一下代码的事件都叫做html事件： <div οnclick="fun([实参]

谁践踏了优雅/ 2022年06月16日 02:16/ 0 赞/ 280 阅读

相关 DOM0和DOM2事件处理程序对比

1、DOM0 至今所有的浏览器支持，原因：简单；跨浏览器的优势。 var btn = document.getElementById(

╰+攻爆jí腚メ/ 2022年06月14日 05:43/ 0 赞/ 255 阅读

相关 Javascript dom0级和dom2级事件之间的区别

dom0级事件：绑定事件element.οnclick=function()\{\} 元素绑定同一类型事件时，后面的效果会覆盖前面的效果，如下代码，点击”点击“时，弹出框

逃离我推掉我的手/ 2022年05月28日 00:51/ 0 赞/ 211 阅读

相关 DOM 0级 and 2级事件模型

DOM（Document Object Model 文件对象模型） DOM将用例如XML、HTML等标记语言写成的结构化文档看成一颗树，该树上的节点也即是文档内的节点。简

本是古典何须时尚/ 2022年05月11日 15:52/ 0 赞/ 216 阅读

相关 JavaScript DOM0，DOM1，DOM2级事件与 event 对象

转自 [https://www.cnblogs.com/holyson/p/3914406.html][https_www.cnblogs.com_holyson_p_3914

你的名字/ 2022年04月05日 03:40/ 0 赞/ 244 阅读

相关事件处理程序（DOM0级）

DOM0事件处理程序每个元素都有自己的事件处理程序属性，那么直接获取对象，然后在对象上设置事件处理程序属性。 1：获取节点对象引用 2：在事件成员上设置处理函数，这时

朴灿烈づ我的快乐病毒、/ 2021年12月18日 15:11/ 0 赞/ 253 阅读