DOM事件模型

最新推荐文章于 2022-04-10 21:33:57 发布

Inory_ye

最新推荐文章于 2022-04-10 21:33:57 发布

阅读量174

点赞数

文章标签： js

本文链接：https://blog.csdn.net/Inory_ye/article/details/117407512

版权

DOM事件模型

dom 0级事件模型

1.行内事件:在标签中写事件,点击后触发例如：

<input id="btn" type="button" value="" onclick="alert('thanks');" >

2.普通事件:可以用js代码添加事件监听函数

document.getElementById("myButton").onclick = function () {
alert('thanks');
}

dom 1级事件模型

DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。

dom 2级事件模型

DOM2级中使用addEventListener和removeEventListener来注册和解除事件。这种函数较之之前的方法好处是一个dom对象可以注册多个相同类型的事件，不会发生事件的覆盖，会依次的执行各个事件函数。

<div id = 'outer'>
    <div id="inner" ></div>
</div>
<script>
    var click = document.getElementById('inner');
    click.addEventListener('click',function(){
        alert('click one');
    },false);
    click.addEventListener('click',function(){
        alert('click two');
    },false);
</script>

dom 3级事件模型

DOM 3级写法和DOM2级一致只是在DOM 2级事件的基础上添加了更多的事件类型：
UI事件，当用户与页面上的元素交互时触发，如：load、scroll
焦点事件，当元素获得或失去焦点时触发，如：blur、focus
鼠标事件，当用户通过鼠标在页面执行操作时触发如：dblclick、mouseup
滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
文本事件，当在文档中输入文本时触发，如：textInput
键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
同时DOM3级事件也允许使用者自定义一些事件。

dom事件流

事件流有三个阶段：
捕获阶段：事件从window对象自上而下向目标节点传播的阶段；
目标阶段：真正的目标节点正在处理事件的阶段；
冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。
事件冒泡

<body onclick="bodyClick()">
    <div onclick="divClick()">
        <button onclick="btn()">
            <p onclick="p()">点击冒泡</p>
        </button>
    </div>
    <script>     
       function p(){
          console.log('p标签被点击')
       }
        function btn(){
            console.log("button被点击")
        }
         function divClick(event){
             console.log('div被点击');
         }
        function bodyClick(){
            console.log('body被点击')
        }
    </script>

在这里插入图片描述

事件捕获

<body>
<div>
    <button>
        <p>点击捕获</p>
    </button>
</div>
<script>
    var oP=document.querySelector('p');
    var oB=document.querySelector('button');
    var oD=document.querySelector('div');
    var oBody=document.querySelector('body');

    oP.addEventListener('click',function(){
        console.log('p标签被点击')
    },true);

    oB.addEventListener('click',function(){
        console.log("button被点击")
    },true);

    oD.addEventListener('click',  function(){
        console.log('div被点击')
    },true);

    oBody.addEventListener('click',function(){
        console.log('body被点击')
    },true);
</script>

在这里插入图片描述

IE事件模型

IE事件处理程序 IE实现了与DOM中类似的方法：attachEvent()和detachEvent()
如：
var btn = document.getElementByIdx_x(“button”);
btn.attachEvent(“onclick”,function(){alert(“1”);});
注意：attachEvent(）的第一个参数是onclick，而非click。同时，这里的this不在是作用域内的元素，而是window对象。同理，删除事件处理函数用detachEvent()函数。