DOM0级和DOM2级事件

最新推荐文章于 2023-11-15 11:13:43 发布
最新推荐文章于 2023-11-15 11:13:43 发布
阅读量210 收藏 1
点赞数
原文链接：https://juejin.im/post/5c74b3dbe51d4519397cbc4a
版权

DOM0级事件和DOM2级事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width:100px;
            height:100px;
            background: #000;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    // DOM0级事件；如果给同一个元素的同一个事件行为绑定同时绑定两个方法，那么后面绑定的方法会覆盖前面的那个方法；
    var  box = document.getElementById("box");
   /* box.onclick = function () {
        console.log(1);
    }
    box.onclick = function () {
        console.log(2);
    }*/
    function fn() {
        console.log(this);
        console.log(1);
    }
    function fn2() {
        console.log(2);
    }
    // DOM2级事件绑定
    // addEventListener : 添加事件的监听者
    // addEventListener : 参数1）: 事件类型  参数2）： 监听者 参数3): 布尔值
    // DOM2级事件绑定： 可以给同一个元素的同一个事件行为绑定多个方法；谁先绑定谁先执行；
    // 给同一个元素的同一个事件行为不能重复绑定同一个方法；
    box.addEventListener("click",fn,false);// false : 事件的冒泡阶段执行
    box.addEventListener("click",fn2,false);// true：事件的捕获阶段执行；

    // 2.attachEvent;
    // 参数1： 带on的事件行为
    // 参数2： 要绑定的函数；
   /* box.attachEvent("onclick",fn)
    box.attachEvent("onclick",fn)*/

    // 1. 顺序问题； attachEvent绑定的事件方法顺序是倒序的；
    // 2. 重复绑定的问题；可以给同一个元素的同一个事件绑定相同的方法；
    // 3. 函数方法中的this指向window，不指向绑定的那个元素；
</script>
</body>
</html>
复制代码
weixin_34124577
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM2.1.0 jar （真-免费）
06-12
不想隔壁的妖艳jian货，DOM4j jar包，点击下载！ 其实我也想免费的，但是好像最低就1积分，不知道怎么设置，知道的告诉我一下。
JS中dom0级事件和dom2级事件的区别介绍
10-22
主要介绍了JS中dom0级事件和dom2级事件的区别介绍，非常有参考价值，特此分享到脚本之家平台供大家参考
DOM2与DOM3
m0_61773971的博客
03-16 196
之前详细讲解了DOM1的内容,DOM2和DOM3在这些结构上加入了更多的交互能力.DOM2与DOM3是按照模块化的思路来制定标准的,每个模块之间有一定关联,但分别针对某个DOM子集.DOM Core :在DOM核心部分的基础上,为节点增加方法和属性.DOM Views :定义基于样式信息的不同视图.DOM Events :定义通过事件实现DOM文档交互.DOM Style :定义以编程方式访问和修改CSS样式的接口。
js中的事件
最新发布
chenximuxueya的博客
11-15 371
与DOM0级事件不同，DOM2级事件可以监听同一事件多次，并且可以通过removeEventListener()方法来移除事件监听器。它的原理是利用事件冒泡机制，在父元素上监听某些事件，然后根据事件目标的不同来执行相应的操作，而不是在每个子元素上绑定事件。在事件流的传递过程中，可以通过事件的stopPropagation方法来阻止事件继续传递。通常情况下，我们主要关注的是目标阶段和冒泡阶段，因为在这两个阶段中，我们可以通过事件监听器来捕获和处理事件。事件解绑则是将之前绑定的事件从元素上移除，可以通过。
Dom0级和Dom2级的区别在哪里
欢迎来到 动感地带
06-12 5606
一、共同的优点 1、DOM0级和DOM2级的共同优点： 能添加多个事件处理程序，按顺序执行，HTML事件处理程序无法做到~ 二、区别 2、关于dom0级和dom2级的区别 DOM0级事件处理： 同时绑定几个不同的事件， 例如在绑定onclick的基础上, 再绑定一个onmouseover为按钮2设置背景颜色 （这里注意onclick、onmouseover事件不能都设为alert弹出哦，可能会有冲突，造成dom0和dom2都不能成功）； 但是不能同时绑定多个相同的事件，比如onclick；
Js中ｄｏｍ0级事件与dom2级事件浅谈
东隅已逝，桑榆非晚。
10-11 9726
其实，就w3c标准来说，并没有0级ｄｏｍ的标准。只不过，事实上的适用总会成慢慢成为约定成俗的规则。所谓的0级ｄｏｍ与２级ｄｏｍ事件就是不同版本间的差异，具体的说就是，对于不同的ｄｏｍ级别，如何定义事件处理，以及使用时有什么不同。 　　我们对于事物的认识过程，总是要先知道它叫什么名字，然后了解它是干什么的，接着学习如何使用，最后，去搞明白实现原理。首先，我们要谈的是ｄｏｍ事件，它是用来处理ｈｔｍｌ中
js学习总结之dom2级事件基础知识详解
10-19
在DOM2级事件模型中，事件处理有了更高级别的灵活性和控制力，相比于早期的DOM0级事件绑定方式。DOM0级事件绑定简单直观，但存在一些限制，比如只能为同一元素的同一事件绑定一个处理函数，而DOM2级事件则克服了这些...
JavaScript dom0级事件.pdf
09-26
除了DOM0级事件外，随着DOM规范的发展，还出现了DOM2级事件处理，它引入了`addEventListener`和`removeEventListener`方法，提供了更强大的事件处理功能，如支持多个事件处理函数、控制事件冒泡和捕获等。然而，DOM0...
Dom0级事件
weixin_30691871的博客
06-13 96
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title&...
同一个元素绑定多个事件
qq_41773964的博客
12-11 605
在同一个元素上面绑定多个事件并且不会覆盖，使用addEventListener this.$root.$el.addEventListener('click', () => { this.$emit('update:showShare', false) })
DOM2
u011927449的博客
06-18 87
D0M0体系DOM2体系 《为什么需要DOM2体系 -- 事件的发展过程》 【D0M2事件体系】 冒泡 ：从最特定元素---向最不特定元素冒泡 （document body）捕获： 捕获和冒泡相反 -- 从最不特定元素开始--最特定元素事件流：整合了捕获和冒泡， 先捕获再冒泡。 《dom2监听语法 addEventListener（type，fn，开关）》 W3C标准 type：事件类型 -- 比如点击 鼠标 键盘 fn：事件执行的函数 开关： 设置是冒泡还是捕获 《微软体系》 IE attachEv.
DOM 0级和2级事件的写法、清除方法及优缺点？
LuckXinXin的博客
11-24 333
DOM 0级事件----主要分为2个 1）在标签内写onclick 2）在js中写οnclick=fucntion(){} 有多个的时候，后面的会替换掉前面的定义 <input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" > 2） document.getElementById("m...
JS事件---DOM2级事件处理：addEventListener()、removeEventListener()、attachEvent()
yhlysy的博客
07-16 633
事件处理有HTML事件处理、DOM0级事件处理、DOM2级事件处理。 HTML事件处理将事件看做标签的一个属性，与HTML混写，代码多时不容易管理。 DOM0级事件处理脚本方式添加事件，实现了HTML和JS的分离，但是它存在缺陷，例如：要为一个按钮添加点击事件，但只能为点击事件添加一个函数，不能同时添加多个函数，如果同时添加多个函数，则最后的函数将覆盖前面的函数。 DOM2级事件处理实现了H
javascript DOM详解之DOM2与DOM3
seacean2000的专栏
12-13 1万+
DOM2与DOM3主要是在DOM1的基础上引入更多的交互能力，支持了更高级的XML特性。 DOM2做的主要的扩展子集具体为： DOM Level 2 Core:在一级核心的基础上，为节点添加了更多的方法和属性。 DOM Level 2 Views:为文档定义了基于样式信息的不同视图 DOM Level 2 Events:说明了如何使用事件与DOM进行交互。 DOM Level 2 Sty
DOM0, DOM1, DOM2, DOM3
pxy_lele的专栏
11-10 3795
----------------------摘抄自他人笔记(http://itbilu.com/javascript/js/Vyxodm_1g.html)，感谢分享---------------------- JavaScript历经了从被人误解到现在的被万众瞩目的转变。随着一些JavaScript编程规范的推出（如：AMD、CMD），其应用范围也从前端一些小功能逐渐扩展到后端和一些大项目中
【v-on】一个元素绑定多个事件以及一个事件绑定多个函数的两种写法
热门推荐
ion_L的博客
09-27 1万+
本文代码主要讲述了v-on绑定事件函数传参，一个元素绑定多个事件的两种写法，一个事件绑定多个函数的两种写法，修饰符的使用。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&a
dom0级事件和dom2级事件写法有什么不同吗？
05-26
相比DOM0级事件，DOM2级事件的优势在于： 1. 可以同时绑定多个事件处理函数，而DOM0级事件只能绑定一个。 2. 可以通过`removeEventListener`方法移除事件处理函数，而DOM0级事件无法移除。 3. 支持事件冒泡和事件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值