Javascript dom0级和dom2级事件之间的区别

最新推荐文章于 2024-04-15 23:27:06 发布
最新推荐文章于 2024-04-15 23:27:06 发布
阅读量1.5k 收藏 7
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenzeze0707/article/details/79704681
版权

dom0级事件：

绑定事件element.οnclick=function(){}

元素绑定同一类型事件时，后面的效果会覆盖前面的效果，如下代码，点击”点击“时，弹出框提示文字2，这表示，alert（2）覆盖了前面的alert（1）效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">点击</div>
<script type="text/javascript">
	var app=document.getElementById('app');
	app.οnclick=function(){
		alert(1);
	}
	app.οnclick=function(){
		alert(2);
	}
</script>
</body>
</html>



移除事件element.οnclick=null;


dom2级事件：

绑定事件element.addEventListener('事件类型',‘事件处理函数',true/false);

第三个参数：true表示捕获，false表示冒泡，不填时默认为false

元素可以绑定多个事件，可以是同类型的，也可以是不同类型的，同一类型事件时，后面的效果不会覆盖前面的效果，效果在时间上有先后顺序；如下代码，点击”点击“时，弹出框先提示文字1，再提示文字2，接着鼠标移出”点击“时，弹出文字3

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">点击</div>
<script type="text/javascript">
	var app=document.getElementById('app');
	app.addEventListener('click', fun1);
	app.addEventListener('click',fun2);
	app.addEventListener('mouseout',fun3);
	
	function fun1(){
		alert(1);
	}
	function fun2(){
		alert(2);
	}
	function fun3(){
		alert(3);
	}		

</script>
</body>
</html>

移除事件element.removeEventListener(('事件类型',‘事件处理函数',true/false);

需注意的是：removeEventListener与addEventListener 的函数参数必须完全一致,才能移除有效

下面列举一下两种事件特殊情况：

1.（函数）为匿名函数时，移除无效

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="#" id="a">百度一下，你就知道</a>
<script type="text/javascript">
	var a=document.getElementById('a');
	a.addEventListener('click',function(){alert(1);},false);
	a.removeEventListener('click',function(){alert(1);},false);//无效，点击a元素时仍然会弹出1
</script>
</body>
</html>


2.（函数）带参数时，绑定事件无效

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="https://www.baidu.com" id="a">百度一下，你就知道</a>
<script type="text/javascript">
	var a=document.getElementById('a');
	function fun1(e){
		e.preventDefault();
		alert(1);
	}	
	a.addEventListener('click',fun1(e));//阻止跳转无效，点击a链接后仍然跳转到百度
</script>
</body>
</html>

因此带参数的函数，应改为下列模式，用一个变量指向一个函数，这样绑定事件有效，移除也有效

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="https://www.baidu.com" id="a">百度一下，你就知道</a>
<script type="text/javascript">
	var a=document.getElementById('a');
	var fun1=function(e){
		e.preventDefault();
		alert(1);
	}	
	a.addEventListener('click',fun1);
	a.removeEventListener('click',fun1);
</script>
</body>
</html>




chenzeze0707
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
什么是DOM0,DOM2,DOM3？
云端-公子清
03-29 4673
事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互;比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有不同的触发条件和触发效果。 本文就将带大家深入浅出地了解DOM事件的那些属性和方法。 1.DOM级别与DOM事件： DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。 有人可能会疑惑，为
Dom0级和Dom2级的区别在哪里
欢迎来到 动感地带
06-12 5599
一、共同的优点 1、DOM0级和DOM2级的共同优点： 能添加多个事件处理程序，按顺序执行，HTML事件处理程序无法做到~ 二、区别 2、关于dom0级和dom2级的区别 DOM0级事件处理： 同时绑定几个不同的事件， 例如在绑定onclick的基础上, 再绑定一个onmouseover为按钮2设置背景颜色 （这里注意onclick、onmouseover事件不能都设为alert弹出哦，可能会有冲突，造成dom0和dom2都不能成功）； 但是不能同时绑定多个相同的事件，比如onclick；
原生JavaScript事件详解
weixin_33834679的博客
12-28 308
     JQuery这种Write Less Do More的框架，用多了难免会对原生js眼高手低。      小菜其实不想写这篇博客，貌似很初级的样子，但是看到网络上连原生js事件绑定和解除都说不明白，还是决定科普一下了。      首先声明，小菜懂的也不是很多，只是把我的思路和大家分享一下。   DOM0事件模型        事件模型在不断发展，早期的事件模型称为DOM0级别。...
DOM0, DOM1, DOM2, DOM3, DOM4，知多少
最新发布
成长的程序世界，一起成长
04-15 715
我们经常操作DOM，其又分DOM0, DOM1, DOM2, DOM3, DOM4，请问君知多少，不要愁，一起来学习吧。
DOM0与DOM2的区别
jingjingyouxiu的博客
05-25 383
DOM0事件绑定的特点： 只有DOM元素天生拥有这个私有属性（onxxx事件私有属性），我们赋值的方法才叫事件绑定，否则属于设置自定义属性 移除事件绑定的时候，我们只需要赋值为null； 在DOM0事件绑定中，只能给当前元素的某一个事件行为绑定一个方法，绑定多个方法，最后一次的绑定的会替换前面绑定的。 DOM2事件绑定的特点： 所有DOM0支持的行为，DOM2都可以用，DOM2还支持DOM0没有的事件行为 【浏览器会把一些常用事件挂载到元素对象的私有属性上，让我们可以实现DOM0事件绑定，DOM2：
JS中dom0级事件和dom2级事件的区别介绍
xiaoyuer_2020的博客
10-26 1003
1.DOM0级事件一般形式 dom标签属性上的onclick <div onclick=‘xxx’ ></div> 在script中为dom指定 divDom.onclick <a href="#" id="hash" onclick="fn();fn1();"> <button type="button">返回上面进行开通</button> </a> var btn=$('#hash').get(); btn.onclick=
JavaScriptDOM高级程序设计
07-22
资源名称：JavaScript DOM高级程序设计内容简介：本书注重理论与实践的结合，全面讲述高级的DOM 脚本编程。全书分为3 个部分：第一部分“深入理解DOM 脚本编程”，涉及W3C DOM 规范的各方面，包括非标准的浏览器支持...
JavaScript dom0级事件.pdf
09-26
除了DOM0级事件外，随着DOM规范的发展，还出现了DOM2级事件处理，它引入了`addEventListener`和`removeEventListener`方法，提供了更强大的事件处理功能，如支持多个事件处理函数、控制事件冒泡和捕获等。然而，DOM0...
js学习总结之dom2级事件基础知识详解
10-19
DOM2级事件是JavaScript中处理用户交互和页面动态更新的关键部分。在DOM2级事件模型中，事件处理有了更高级别的灵活性和控制力，相比于早期的DOM0级事件绑定方式。DOM0级事件绑定简单直观，但存在一些限制，比如只能...
JavaScript Dom 绑定事件操作实例详解
12-13
本文实例讲述了JavaScript Dom 绑定事件操作JavaScript Dom 绑定事件操作。分享给大家供大家参考，具体如下： JavaScript Dom 绑定事件 // 先获取Dom对象，然后进行绑定 document.getElementById('xx').onclick ...
javascript DOM高级程序设计源码
04-22
《javascript DOM高级程序设计》的源码，亲测可用，内容最全。
JS “DOM 分级” 与 “DOM 事件模型”
拯救世界的光太郎
10-11 482
查了很多文章，都没有把这两个概念做一个系统的区分。这两个概念究竟有什么联系，也都没有一篇文章能够解释请求，其实标题为“DOM 分级”的文章网上一扒一大堆，可内容却都讲“DOM 事件模型”，不知道这些人自己有没有搞明白这两个概念。 首先，DOM分级有四级： DOM0级、DOM1级、DOM2级、DOM3级 DOM事件模型有三个： DOM0级提出的DOM0级模型、DOM2级提出的DOM2级模型、IE事件模型 DOM0级提出了原始的事件模型；但DOM1级没有定义事件相关的内容，仅仅是定义了HTML和XML
DOM0,DOM2,DOM3事件,事件基础知识入门
xyjikl
07-13 1185
事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 　　事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM1的信息啊,); 　　DOM0就是直接通过 onclick写在html里面的事件, 比如: 运行下面代码 input onclick="alert(1)" />
【XEN】Dom0与DomU内存共享代码及原理分析
WSRspirit的专栏
04-03 5535
内存共享是XEN PV的一个优势，今天就简单介绍一下PV的内存共享（DomU创建一个页面共享，然后映射到Dom0中）的原理及其代码。 - 两个Domain之间的内存页共享, Doamin0和DomainU- 在这个页中设置一个共享ring- 为共享ring设置event channel- 在Dom0和DomU之间来回传递一些信息介绍 在xen中的虚拟机被称为Domain. Domain0(
Js中ｄｏｍ0级事件与dom2级事件浅谈
东隅已逝，桑榆非晚。
10-11 9725
其实，就w3c标准来说，并没有0级ｄｏｍ的标准。只不过，事实上的适用总会成慢慢成为约定成俗的规则。所谓的0级ｄｏｍ与２级ｄｏｍ事件就是不同版本间的差异，具体的说就是，对于不同的ｄｏｍ级别，如何定义事件处理，以及使用时有什么不同。 　　我们对于事物的认识过程，总是要先知道它叫什么名字，然后了解它是干什么的，接着学习如何使用，最后，去搞明白实现原理。首先，我们要谈的是ｄｏｍ事件，它是用来处理ｈｔｍｌ中
DOM0级与DOM2级事件
SunsetGirl的博客
05-25 577
DOM0与DOM2区别
DOM0、DOM2、DOM3 事件
csdssdn的博客
08-01 1425
鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有不同的触发条件和触发效果。DOM级别一共可以分为4个级别DOM0级，DOM1级，DOM2级和DOM3级，而DOM事件分为3个级别DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。如下图所示以上代码我们通过直接在HTML代码里定义了一个onclick的属性触发showFn方法，这样的事件处理程序最大的缺点就是HTML于JS强耦合，我们一旦需要修改函数名就得修改两个地方。.........
DOM 0级事件与DOM 2级事件的区别
m0_63574519的博客
05-25 417
事件由子级传向父级称之为事件冒泡。 e.stopPropagation（）；阻止冒泡。 事件由父级向子级传递称之为事件捕获。 e.preventDefault（）；阻止默认。
dom0级事件和dom2级事件写法有什么不同吗？
05-26
相比DOM0级事件，DOM2级事件的优势在于： 1. 可以同时绑定多个事件处理函数，而DOM0级事件只能绑定一个。 2. 可以通过`removeEventListener`方法移除事件处理函数，而DOM0级事件无法移除。 3. 支持事件冒泡和事件...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值