dom0和dom2,dom分几种

DOM0和DOM2级事件

DOM0和DOM2级事件

事件绑定的两种方法

DOM0级事件绑定

curEle.onclick=function(){};

DOM2级事件绑定

标准浏览器：curEle.addEventListener('click',function(){},false)IE6-8:curEle.attachEvent('onclick',function(){})

一、共同的优点1、DOM0级和DOM2级的共同优点：能添加多个事件处理程序，按顺序执行，HTML事件处理程序无法做到~

二、区别2、关于dom0级和dom2级的区别

DOM0级事件处理：同时绑定几个不同的事件，

例如在绑定onclick的基础上,

再绑定一个onmouseover为按钮2设置背景颜色

（这里注意onclick、onmouseover事件不能都设为alert弹出哦，可能会有冲突，造成dom0和dom2都不能成功）；

但是不能同时绑定多个相同的事件，比如onclick；会覆盖，只会执行最后一个的函数；

比如把onclick写在标签内，就是dom0级事件，fn和fn1依次执行;

第二种获取元素，绑定onclick事件也是dom0级，第二个onclick会覆盖第一个onclick，也会覆盖行内的onclick。

DOM2级事件处理：优点：同时绑定几个事件（相同或不同），然后顺序执行，不会覆盖。缺点：不具有跨浏览器优势.

另外，IE9能兼容dom2

dom2级，不会覆盖，会依次执行绑定方法和原生的绑定方法，这就是于dom0级的区别之处；

总结区别：如果定义了两个dom0级事件，dom0级事件会覆盖；

dom2不会覆盖，会依次执行；

dom0和dom2可以共存，不互相覆盖，但是dom0之间依然会覆盖。

DOM0和DOM2级事件简单理解

关于DOM0 和DOM1级事件可以简单理解为：

事件分为DOM 0级事件和Dom 2级事件，DOM2级事件也叫做事件监听。DOM 0级事件的缺

点是如果事件相同 后者的事件会覆盖前者的事件，DOM2级事件可以解决这个问题

1.DOM0级事件就是直接通过onclick绑定到html元素的事件

同元素的同一事件只能绑定一个函数，否则后面的事件会覆盖前面的事件

2.DOM2级事件是通过addEventListener绑定的事件

可以绑定多个函数，按顺序执行

3.DOM1一般只有设计规范没有具体实现，所以一般跳过。

更加详细内容可以参考这篇文章：

JS基础知识（十一）DOM0和DOM2级事件_qq_23389687的博客-CSDN博客_dom2级事件

dom0、dom2、dom3事件

dom0 事件的特点：

1. dom0 事件就是直接通过 onclick 绑定到 html上的事件

???? 或者

2. 清理dom0 事件时，只需给该事件赋值为 null

??? input.onclick = null

3. 同一个元素的同一种事件只能绑定一个函数，否则后面的函数会覆盖之前的函数

4. 不存在兼容性问题

dom2 事件的特点：

1. dom2 事件是通过 addEventListener 绑定的事件

2.同一个元素的同种事件可以绑定多个函数，按照绑定顺序执行

3.清除 dom2 事件时，使用 removeEventListener

? dom2 级事件有三个参数 ： 第一个参数是事件名（如click）；

　??????????? 第二个参数是事件处理程序函数；

??????????? ?? 第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用。

addEventListener():可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。

removeEventListener():不能移除匿名添加的函数。

DOM2 包含3个事件 ：事件捕获阶段、处于目标阶段和事件冒泡阶段

点击a后capturing(捕捉)阶段事件传播会从document- span-a，然后发生在a，最后bubbling(冒泡)阶段事件传播会从a-span-document

事件冒泡和事件捕获

??????? DOM2级事件处理添加进去的事件，我们可以控制事件的冒泡或是捕获过程。当addEventListener方法的第三个参数为true时，表示只进行事件捕获，不执行事件冒泡，再捕获的过程中，触发途径标签的对应事件函数。当第三个参数为false，表示执行事件冒泡的过程（默认情况）

DOM3级事件

?????? DOM3级事件在DOM2级事件的基础上添加了更多的事件类型，全部类型如下：

?????? UI事件，当用户与页面上的元素交互时触发，如：load、scroll

?????? 焦点事件，当元素获得或失去焦点时触发，如：blur、focus

?????? 鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup

?????? 滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel

?????? 文本事件，当在文档中输入文本时触发，如：textInput

??????? 键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress

??????? 合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart

??????? 变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified

???????? 同时DOM3级事件也允许使用者自定义一些事件。

注意：

1）、cancelBubble可以取消事件冒泡；

2）、stopPropagation可以取消事件冒泡和下沉

DOM0级事件和DOM2级事件

1、DOM0级事件

? ? a:写在标签内的onclick事件都是DOM0级事件

? ? b:获取元素，绑定onclick等事件也是DOM0级事件

? ? eg:

? ? ? ? div id="myBtn" class="click" onclick="alert('我是dom0级标签内事件')"/div

? ? ? ? div id="myBtn2" class="clcik"/div

? ? ? ? document.getElementById("myBtn2").onclick = function{

? ? ? ? ? ? alert("我是dom0级获取元素绑定事件")

????????}

DOM0级的绑定两个事件时，第二个会把第一个覆盖掉

2、DOM2级事件（只有DOM2级事件有三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段）

? ? 只有一个：监听方法，有添加和移除的事件处理程序：addEventListener()和removeEventListener

? ? 有三个参数：第一个参数是事件名（如click）

? ? ? ? ? ? ? ? ? ? ? ? ? 第二个参数是事件处理程序函数

? ? ? ? ? ? ? ? ? ? ? ? ? 第三个参数如果是true表示捕获阶段调用，如果是false表示冒泡阶段调用

?document.getElementById("myTest").attachEvent("onclick", function(){alert(1)});

//等价于document.getElementById("myTest").addEventListener("click", function(){alert(1)}, false);

eg：

? ?????????????? span? ? ? ? ? ?

? ? ? ? ?????????????? a/a

? ?????????????? /span

点击a后capturing(捕捉)阶段事件传播会从document- span-a，然后发生在a，最后bubbling(冒泡)阶段事件传播会从a-span-document 。

本文转自：

dom0级事件及dom2级事件

1.dom0级事件

像上面把onclick写在标签内或者绑定onclick事件，都是dom0级事件，执行的时候第二个会覆盖第一个onclick，弹出1

（btnClick行内事件优先执行， temp.onclick第二个执行，覆盖前者）

2.dom2级事件（DOM2级的事件规定了事件流包含三个阶段包括： 1：事件捕获， 2：处于目标阶段， 3：事件冒泡阶段）

以上jq点击事件和原生的addEventListener的点击事件，都是dom2级事件，不会覆盖，会依次执行

3.dom0事件和dom2事件并存

dom0事件和dom2事件并存,一次弹出2,3,4,5,6

4.无论在DOM0还是DOM2还是DOM3中都会在事件函数中传入事件对象;

事件对象event下的属性和方法：