DOM0,DOM2,DOM3

dom0

事件的特点:

  1. dom0 事件就是直接通过 onclick 绑定到 html上的事件    <input onclick="xx"/>     或者     input.onclick = function(){  ...  }
  2. 清理dom0 事件时,只需给该事件赋值为 null    input.onclick = null
  3. 同一个元素的同一种事件只能绑定一个函数,否则后面的函数会覆盖之前的函数
  4. 不存在兼容性问题

dom2

事件的特点:

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

2.同一个元素的同种事件可以绑定多个函数,按照绑定顺序执行  function a() {   ...   }  function b() {   ...   }   input.addEventListener( "click" ,a)    input.addEventListener( "click" ,b)
3.清除 dom2 事件时,使用 removeEventListener     input.removeEventListener( "click" ,a) 

dom2 级事件有三个参数:

一个参数是事件名(如click);                    
第二个参数是事件处理程序函数;                       

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

addEventListener():可以为元素添加多个事件处理程序,触发时会按照添加顺序依次调用。
removeEventListener():不能移除匿名添加的函数。

DOM2 包含3个事件:事件捕获阶段、处于目标阶段和事件冒泡阶段   
<span>                   </span>点击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可以取消事件冒泡和下沉
Last modification:June 29th, 2019 at 10:37 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment