# 前言 DOM0 级事件就是 html 元素添加onclick 属性，或者给元素添加onclick事件，但是同元素的同一事件只能绑定一个函数，否则后面的事件会覆盖前面的事件。...如果我们想一个元素绑定多次同一个时间，比如我想绑定2个onclick事件，2个都要生效，于是就有了DOM2 级事件，通过addEventListener绑定的事件。...DOM0 级事件 DOM0 级事件就是前面讲到的事件绑定有2种方式，在HTML 中 或在 Script 中绑定事件 在页面元素中onclick="" scrip 中给元素添加onclick属性 绑定事件...DOM2 级事件 如果我们想 2 个事件都生效，用到 DOM2 级事件，通过 addEventListener 绑定的事件。...('click', myFunc2); 同样的，也可以使用removeEventListener移除当前元素的某一事件行为的多个不同方法 事件冒泡和事件捕获
防止事件冒泡而带来不必要的错误和困扰。 阻止方法是使用 stopPropagation()，举个例子： <!...不难看出，事件在到达具体元素后，停止了冒泡，但不影响父元素的事件捕获 五、DOM0级事件 DOM0级事件，就是直接通过 onclick 等方式实现相应的事件 1、标签内写 onclick 事件 <input...这说明 DOM0 级添加事件时，后面的事件会覆盖前面的事件，而 DOM2级则不会，多个事件都会执行； 另外，DOM0级事件具有很好的跨浏览器优势，会以最快的速度绑定，但由于绑定速度太快，可能页面还未完全加载出来...，以至于事件可能无法正常运行 六、DOM2级事件 1、DOM2级事件的方法 主流浏览器 DOM2 级事件是通过以下两个方法用于处理指定和删除事件处理程序的操作： addEvenetListener removeEventListener...注意：只有 DOM2级事件包含以下三个阶段 事件捕获阶段 处于目标阶段 事件冒泡阶段
事件处理程序 事件处理程序分为： HTML事件处理 DOM0级事件处理 DOM2级事件处理 IE事件处理。 HTML事件 <!...demo(){ alert("hello html事件处理"); } DOM0...级事件处理程序1");}//被覆盖掉 btn1.onclick=function(){alert("Hello DOM0级事件处理程序2");} DOM2级事件处理 <!...removeEventListener("click",demo2); IE事件处理程序 IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent
3）事件流：一个完整的DOM2事件流包括三个阶段：事件捕获、目标阶段和事件冒泡阶段。...> 这是不是使得代码效率更高了呢，但是事件代理也并不是没有坑的，如果我们点击了父级节点，而又不希望冒泡到子节点呢，那么我们就要采用e.stopPropagation()来实现了 3 DOM0...DOM2 DOM3 不知道有没有细心的小伙伴发现我们前面提到过DOM2这样一个概念，有没有产生疑惑呢？...其实DOM经过发展，有了DOM0、DOM2、DOM3等版本，对于事件处理也有所不同。...1）DOM0: 直接通过on将事件绑定给DOM，如： Rabbit 事件可以通过设置为null来移除。
浏览器默认行为执行与阻止分析 首先简单回顾下DOM的事件处理过程: DOM0级: ? 在图(1)所示的capture phase中, 事件向下冒泡抵达目标的父元素。...级方法, DOM2级方法的优势为: 可以添加多个事件先后执行。...需要注意的一点是IE仅从IE9开始支持DOM2级事件处理方式。...IE事件处理程序: IE(以及Opera)实现了attachEvent()和detachEvent()方法进行事件绑定与解绑，绑定事件会被添加到冒泡阶段。...attachEvent的作用域为全局作用域,this == windows, 而DOM0中,this为被绑定元素。 attachEvent可以绑定多个事件,与dom2类似。
2、DOM0级事件处理程序 DOM0级别事件处理程序是一种比较传统的，是指把一个行数赋值给一个事件处理程序的属性，也是用的比较多的方式。 他的优点是：简单，而且具有夸浏览器的优势。...; } 如果要需要这个事件，可以这样写： [程序4] btn2.onclick = null; 以上就是DOM0级事件处理方法。...3、DOM2级事件处理程序 DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。...它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。 他的有点与DOM0级一样，还可以添加多个事件处理程序。...IE 中 event 对象的全部信息和方法 DOM 对象中都有，只不过实现方式不一样。不过，这种对应关系让实现两种事件模型之间的映射非常容易。
实际测试效果： 浏览器 复制子元素 标准属性(property) 标准特性(attribute) 自定义特性(customize attribute) 自定义属性(expando) DOM0事件处理函数...DOM2事件处理函数 parentNode和 parentElement的值 ownerDocument IE5.5~8 √ √ √ √ √（浅复制） Χ Χ null 不变 IE9+ √ √ √ √...事件处理函数 DOM2事件处理函数 parentNode和 parentElement的值 ownerDocument IE9+ √ √ √ √ Χ Χ Χ null 当前文档的document对象 Chrome...事件处理函数 DOM2事件处理函数 parentNode和 parentElement的值 ownerDocument IE9+ √ √ √ √ √ √ √ null 当前文档的document对象 Chrome...事件处理函数 DOM2事件处理函数 parentNode和 parentElement的值 ownerDocument IE9+ √ √ √ √ √ √ √ 充当 clipboard的div元素 当前文档的
DOM 事件流 为了在浏览器中兼容这 2 种事件流，在 DOM2 Events 规范中将事件流分为 3 个阶段：事件捕获阶段、到底目标阶段、事件冒泡阶段。 ?...btn.onclick = function() { } // 移除事件 btn.onclick = null DOM2 事件处理程序 通过 addEventListener 可以添加 DOM2 级别的事件处理程序...('div') btn.addEventListener('click', () => { }, false) 和 DOM0 事件处理程序的区别： addEventListener 可以改变事件流...，即可以在捕获阶段触发事件，而 DOM0 是不行的； addEventListener 可以为同一个元素多次添加同一类型的事件处理程序，先添加的事件处理程序会先触发，而 DOM0 如果给同一个元素绑定多个相同类型的事件处理程序的话...DOM0 一样，需要带上 on，比如 onclick； 在通过 attachEvent 添加的事件处理程序内部 this 会指向 window，而 DOM0 和 DOM2 的 this 会指向元素本身；
此题主要考你：事件不同操作的兼容写法 具体实现，可以参考下面代码的实现思路 代码如下： var EventUtil = { //根据情况分别使用dom2 || IE || dom0方式...} else { event.returnValue = false; } }, //根据情况分别使用dom2...|| IE || dom0方式 来删除事件 removeHandler: function(element,type,handler){ if(element.removeHandler
} }, addHandler: function (element, type, func) { if (element.addEventListener) {//DOM2...if (element.attachEvent) {//IE element.attachEvent("on" + type, func); } else {//DOM0...}, removeHandler: function (element, type, func) { if (element.removeEventListener) {//DOM2...if (element.detachEvent) {//IE element.detachEvent("on" + type, func); } else {//DOM0
从根本上将 BOM 只处理浏览器窗口和框架，但是人们习惯把针对浏览器的 JavaScript 扩展也算作 BOM 的一部分，例如：浏览器弹出新窗口的功能；移动、缩放和关闭浏览器窗口的功能；navigator...DOM2 在原有的 DOM 基础上又扩充了鼠标和用户界面事件、范围、遍历（迭代 DOM 文档的方法）等细分模块，并且通过对象接口增加了对 CSS 的支持。...DOM2 级引入的模块有： - DOM 视图（DOM Views）：定义了追踪不同文档的视图接口。 - DOM 事件（DOM Events）：定义了事件和事件处理的接口。...- DOM 遍历和范围（DOM Traversal and Range）：定义了遍历和操作文档树的接口。...DOM0 级，DOM0 级标准本质上不存在，所谓 DOM0 只是 DOM 历史坐标中的一个参照点，具体来说，DOM0 级是指 Internet Explorer 4.0 和 Netscape Navigator
但有意思的是，早期的两个开发团队分别是ie和Netscape却提出了完全相反的事件流概念。也就是下面要介绍的两种。...dom0级处理函数 将一个函数赋值给一个事件处理属性，这种方式跨浏览器，写法简单，兼容性好，但是它需要一个对元素的引用，所以如果这个事件如果定义在元素的前面，那么事件就不会绑定上。...let btn = document.getElementById('btn'); btn.onclick = function(){ console.log(this) } dom2级事件 dom2...级事件定义了两个方法，用于处理指定程序和删除事件处理程序的操作。...ie事件处理程序 attachEvent与detatchEvent 分别可以用来为ie增加和移除事件监听程序。与dom0级不同的是，其是为全局添加的，也就是事件里的this为window。
为什么没有DOM0及DOM1 事件 我们的确定标准了是没有DOM0级的。所谓DOM0级只是DOM历史坐标中的一个参照点而已。...具体说来，DOM0级指的是Internet Explorer 4.0和Netscape Navigator 4.0最初支持的DHTML。...实际上，DOM0级标准是不存在的，所谓的DOM0级是DOM历史坐标中的一个参照点而已，具体说呢，DOM0级指的是IE4和Netscape 4.0这些浏览器最初支持的DHTML..大概2000年的时候争论过...级 事件处理程序 DOM2开始推崇三层分离： DOM视图（DOM Views）：定义了跟踪不同文档（例如，应用CSS之前和之后的文档）视图的接口； DOM事件（DOM Events）：定义了事件和事件处理的接口...参考文章： JavaScript 运行机制详解：再谈Event Loop www.ruanyifeng.com/blog/2014/10/event-loop.html JS-------DOM0级事件处理和DOM2
1.3 DOM事件流 “DOM2级事件”规定的事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。 事件捕获为截获事件提供机会，然后实际的目标接收到事件，最后事件冒泡，对事件作出响应。...我们将事件处理程序，分为这么几类： HTML事件处理程序 DOM0级事件处理程序 DOM2级事件处理程序 IE事件处理程序 跨浏览器事件处理程序 2.1 HTML事件处理程序 某个元素支持的事件，都可以用一个与相应事件处理程序同名的...IE的attachEvent()和DOM0级方法区别： 两者事件处理程序的作用域不同。 DOM0级方法，作用域在所属元素的作用域。...级方法、DOM2级方法或IE方法即可，默认采用DOM0级方法。...3.1 DOM中的事件对象 无论指定事件处理程序时使用什么方法（DOM0级方法或DOM2级方法），都会传入 event对象： var leo = document.getElementById('leo
盒模型分为：W3C标准盒模型和IE盒模型 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。...IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。...> //DOM0级事件处理程序 var btn2=document.getElementById("btn2"); btn2.onclick=function(){alert("hello DOM0")...} //DOM2级事件处理程序 var btn3=document.getElementById("btn3"); btn3.addEventListener("click",showMes,false...) function showMes(){alert("hello DOM2")} //btn3.removeEventListener("click",showMes,false);//解除事件 /
JavaScript事件模型 JavaScript事件模型，也就是事件机制，分为两类DOM0级事件模型和DOM2级事件模型。...DOM0级事件模型 DOM0级事件模型是早期的事件模型，比如说一个onclick事件 缺点： 无法绑定多个相同的事件，注册多个同类型的函数的话，就会发生覆盖，之前注册的函数就会无效 document.getElementById...var event=event||window.event; var target=event.target||event.srcElement alert(target); } DOM2...级事件模型 在DOM2级中使用addEventListener和removeEventListener来注册和解除事件（IE8及之前版本不支持，IE7、IE8用 attachEvent）。...事件流又称为事件传播，DOM2级事件规定的事件流包括三个阶段：事件捕获阶段(capture phase)、处于目标阶段(target phase)和事件冒泡阶段(bubbling phase) 首先发生的是事件捕获
后来ECMAScript在DOM2中对事件流进行了进一步规范，基本上就是上述二者的结合。...DOM0：不是W3C规范。 DOM0级事件具有极好的跨浏览器优势，会以最快的速度绑定。...专注于HTML文档和XML文档。 其中DOM1级事件处理标准中并没有定义事件相关的内容，所以没有所谓的DOM1事件处理 DOM2：对DOM1增加了 样式表对象模型 DOM2级定义了两个事件处理程序。...增加了 内容模型 (DTD 、Schemas) 和 文档验证 。...对DOM2增加了 内容模型 (DTD 、Schemas) 和 文档验证 。定义了一些新的事件，比如键盘事件，还可以自定义事件。
浏览器事件模型定义了事件的流程和机制，包括事件的类型、事件的触发和传递、事件的处理和响应等。二、浏览器事件模型的类型在浏览器中，事件分为三种类型：DOM0级事件、DOM2级事件和IE事件模型。1....DOM0级事件DOM0级事件是最早的事件模型，它是通过在元素上添加事件处理函数来实现的。...DOM0级事件模型的缺点是只能为一个元素添加一个事件处理函数，且不能对事件进行捕获和阻止冒泡。2....DOM2级事件DOM2级事件是目前主流的事件模型，它是通过addEventListener()方法来实现的。...DOM2级事件模型的优点是可以为一个元素添加多个事件处理函数，且可以对事件进行捕获和阻止冒泡。3. IE事件模型IE事件模型是IE浏览器独有的事件模型，它是通过attachEvent()方法来实现的。
事件和DOM2级在事件监听使用方式上有什么区别？...DOM2级事件处理方式: DOM2级事件处理方式指定了，添加事件处理程序和删除事件处理程序的方法。...DOM2级定义了addEventListener()和removeEventListener()用于处理指定和删除事件处理程序。...二者区别：使用Dom2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序，而Dom0级为一个事件添加多个事件处理程序时，后面的程序会覆盖前面的。...3： 解释IE事件冒泡和DOM2事件传播机制？ IE事件冒泡： 事件从目标元素向父级元素传递，直到传递到 window ( document) 停止。 ?
而现在的浏览器要使用DOM2级模型的事件绑定机制才能手动定义事件流模式。 3. DOM事件流 “DOM2级事件”规定了事件流包括三个阶段：事件捕获阶段，处理目标阶段和事件冒泡阶段。...DOM0级事件处理程序 通过javascript制定事件处理程序的传统方式，将一个函数赋值给一个事件处理程序属性。特点是简单，跨浏览器。...DOM2级事件处理程序 DOM2级规范以一种符合逻辑的方式来标准化DOM事件，IE9,Firefox,Opera,Safari,Chrome全部已经实现了"DOM2级事件"模块的核心部分。...clientX,clientY 事件发生时，鼠标指针在视口中的水平和垂直坐标 2.页面坐标位置 pageX,pageY 事件发生时，鼠标指针在页面本身而非视口的坐标，页面没有滚动的时候，pageX和pageY...的值与clientX和clientY值相等 3.屏幕位置 screenX,screenY 4.修改键 值为boolean类型，用来判断对应的按键是否被按下 shiftKey ctrlKey
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
