DOM0级与DOM2级事件

最新推荐文章于 2024-04-15 23:27:06 发布

莫奈的日出

最新推荐文章于 2024-04-15 23:27:06 发布

阅读量580

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_52993364/article/details/124970897

版权

DOM0级事件处理：

同时绑定几个不同的事件，

例如在绑定onclick的基础上

 <input id="but" type="button" value="点我点我点我" onclick="console.log('第一次点我')">

上面定义了一个按钮，在按钮中定义了onclick事件，就是在控制台输出一句话。效果如下图所示：

上面就是一个所谓的ｄｏｍ０级的事件处理。其实还有一个常用的，就是直接用ｊｓ操作。下面是代码：

var but = document.getElementById("but");
   but.onclick = function(){
        console.log("第二次点我");
   }

下面是点击按钮后的效果：

注意：对于上面的button，其实通过了两种方式去定义它的事件处理，一是在input标签里，二是在js中去处理。但是，在console上只输出了一句话。也就是说，在dom0级事件处理中，后定义的事件处理会覆盖前面的。

DOM2级事件处理：

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

另外，IE9能兼容dom2

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

<body>
     <input id="but" type="button" value="点我点我点我" onclick="console.log('第一次点我')">
</body>
<script>
   var but = document.getElementById("but");
    but.addEventListener('click',function(){
        console.log('这是第几次');
    })
    but.addEventListener('click',function(){
        console.log('这是第N次');
    })
</script>

下面是点击按钮后的效果：