DOM编程（三）

最新推荐文章于 2024-05-20 15:17:08 发布
最新推荐文章于 2024-05-20 15:17:08 发布
阅读量87 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46454139/article/details/116303439
版权

文章目录

前言

本片笔记主要讲解DOM常用事件的绑定和学习，并会在后面配有练习案例

一、DOM事件绑定

DOM事件分为也分级别，常听见的就是0级、1级、2级和3级了。这里我们只讲0级和2级。（其实是老师只讲了0级和2级，然后我看网上关于DOM级别的描述都很官方的专业术语那种，实在看着头疼，所以还是不放出来误导大家了）
好了，下面让我们开始了解一下关于DOM不同级别的事件绑定

DOM0级别事件绑定

DOM0级的事件绑定被所有浏览器所兼容。主要分为HTML和JS绑定两种方式：

//HTML的事件绑定
<input type="button" id="t1" value="测试" onclick="display()" />
//JS的事件绑定
<input type="button" id="t1" value="测试" />
	<script type="text/javascript">
		document.getElementById('t1').onclick = display; //这里display后面不能加括号，如果在后面加上了括号的话事件就会立即执行
		function display(){
			console.log(123);
		}
	</script>

老师语录：
JS绑定事件时，不能加"()"，否则会在页面加载时立即执行可以绑定匿名函数

DOM2级别事件绑定

DOM2：添加了两个监听方法来添加和移除事件处理程序
1、addEventListener()：添加事件
2、removeEventListener()：移出事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="t1" value="测试" />
		<script type="text/javascript">
			document.getElementById('t1').addEventListener('click',display)//为按钮添加一个点击事件
			function display(){
				console.log(123);
			}
			document.getElementById('t1').removeEventListener('click',display)//为按钮解除前面绑定的点击事件
		</script>
	</body>
</html>

DOM0级事件和DOM2级事件区别

区别一：
DOM0级事件只能绑定一个函数，前面绑定的函数会被覆盖

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="t1" value="测试" />
		<script type="text/javascript">
			document.getElementById('t1').onclick = function(){console.log(1);}
			document.getElementById('t1').onclick = function(){console.log(2);}
			document.getElementById('t1').onclick = function(){console.log(3);}
		</script>
	</body>
</html>

效果如下：
在这里插入图片描述

DOM2级事件可以绑定多个函数，且有执行顺序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="t1" value="测试" />
		<script type="text/javascript">
			document.getElementById('t1').addEventListener('click',function(){console.log(1);})
			document.getElementById('t1').addEventListener('click',function(){console.log(2);})
			document.getElementById('t1').addEventListener('click',function(){console.log(3);})
		</script>
	</body>
</html>

效果如下：
在这里插入图片描述
区别二：
DOM0级事件与DOM2级事件互不影响

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="t1" value="测试" />
		<script type="text/javascript">
			function show(){console.log('啦啦啦啦');}
			document.getElementById('t1').addEventListener('click',show)
			document.getElementById('t1').onclick = show
		</script>
	</body>
</html>

效果如下：
在这里插入图片描述

事件传参

事件传参顾名思义即是在对绑定的事件的函数中进行传参
而事件传参一般有两种方法：
1、直接行内绑定

<input type="button" id="t1" value="测试" onclick="show('hello')" />

2、使用匿名函数

function show(x){console.log(x);}
document.getElementById('t1').onclick = function(){show('hello')}

不过如果你直接在JS代码里面进行事件绑定且不使用匿名函数的话是不会成功的，因为加上了括号之后绑定事件就会立即执行，如下面这种：

document.getElementById('t1').onclick = show('hello world');

除了主动传入的参数之外，每个事件还有默认的参数，如event参数
event为默认参数，不需传入即可调用，该对象表示触发的事件本身
event.target会返回触发该事件的目标元素
一般来说，event.target我们使用的较多，且用处很大

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="t1" value="测试" onclick="show('hello')" />
		<script type="text/javascript">
			function show(){console.log(event.target.value);console.log(event.target.type);}//使用event.target打印出input的类型和value值
			document.getElementById('t1').onclick = show
		</script>
	</body>
</html>

效果如下：
在这里插入图片描述
除此之外，event.code也可以识别你在键盘上按下的按键是什么

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="t1" onkeyup="show()" />
		<p id="result"></p>
		<script type="text/javascript">
			function show(){
				var Input = document.getElementById('t1').value;
				document.getElementById('result').innerHTML = Input;
				console.log(event.target.value);
				if(event.code == 'Enter'){ //判断当用户按下Enter键时跳出弹窗，弹窗显示用户当前输入的文本内容
					alert(Input);
				}
			}
		</script>
	</body>
</html>

在这里插入图片描述

DOM常用事件

事件说明
onload当页面完成加载
onclick当用户点击了HTML元素
onchange当HTML元素被改变
onkeyup当用于按下键盘按键松开后
onblur当元素失去焦点
onfocus当元素获得焦点
onmouseover当用户把鼠标移动到HTML元素之上
onmouseout当用户把鼠标移开HTML元素
onmousemove当用户移动鼠标
年少有为✘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
第七章 DOM 编程
myid00451612的博客
01-13 920
第一节：DOM编程概述 1.1 什么是DOM编程 ​ 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中。 1.2 为什么要学习DOM编程 学习DOM操作 就是 操作页面中的节点对象（元素，文本，元素中的属性）。 增删改 新增：新增什么？ 各种标签 本来不存在，但是我们又想用， 无中生有！ 创造标签 此时没有样式 创建 美化（设置样式，添加内容）.
javascript Dom 编程艺术
08-11
本 书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践，并全面探讨了HTML5以及jQuery等JavaScript库...
DOM编程
weixin_67235801的博客
03-03 958
有趣的网页编码
Dom编程艺术第三章
王明海的专栏
08-29 326
1、getElementsByTagName允许把一个通配符作为它的参数，而这意味着文档里的每个元素都将在这个函数所返回的数组里占有一席之地。通配符“*”必须放在引号里，这是为了让通配符与乘法操作符有所区别。如果你想知道某份文档里总共有多少个元素节点，像下面这样使用通配符即可。alert(document.getElementsByTagName("*").length);2、dom提供的五个方法：
JavaScript DOM编程
weixin_62270300的博客
03-02 595
目录 一、什么是DOM? 二、动态改变文档内容的原理 三、Element常用属性 四、常用方法 1.创建和增加节点的方法 2.删除和替换节点的方法： 3.其他方法 五、使用JS操作表格 总结： 一、什么是DOM? 文档对象模型（Document Object Model） 通过DOM可以动态改变文档内容 二、动态改变文档内容的原理 解析文档（如HTML）并生成DOM树 通过DOM标准接口+编程语言改变文档内容 解析文档生成DOM树的过程 .
JavaScript-DOM编程
qq_46096136的博客
09-30 7264
那么邮箱地址的正则表达式和邮箱地址进行匹配，能匹配成功，表示合法，反之表示不合法。第三：要能够独立的从网络当中搜索到你想要的正则表达式（搜索能力要有）[a-zA-Z0-9]{3,} 前面这堆中的任意字符至少出现3个。注意：数量永远匹配的都是前面的那个字符出现的次数。\W 匹配任意不是字母，数字，下划线，汉字的字符。[a-z]{1} a到z所有的字符中的任意1个。正则表达式是有一堆特殊的符号组成的一个表达式。[1-9] 没有指定数量的时候，默认是1个。其实在JS中，字符串String也是支持正则表达式的。
JavaScript与DOM编程
寻梦&之璐
05-05 6105
文章目录JS简介常量与变量 JS简介 JS是一种在浏览器中运行的解释性脚本语言。JS是由ES（ECMAScript），DOM（文档对象模型），BOM（浏览器对象模型）组成 ECMAScript 6.0（简称 ES6）是JavaScript语言的下一代标准，已经在2015年6月发布。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，称为企业级开发语言 Node.js是一个基于Chrome V8引擎的JavaScript运行环境，是让JS运行在服务端的开发平台，它使得JS成为与PHP，Py
JavaScript DOM编程艺术
Matrix
06-25 2793
chapter 2: JavaScript 语法 JavaScript嵌入到html中的方式: 3种 作为一种解释型语言直接被浏览器读入并执行 语法 语句: 像英语中的句子,只不过受体是浏览器 注释: 受体是开发和维护的人.方式: //, /*...*/ 变量: 计算机中的一小块固定的内存区域,变量指向这块内存的地址,内存代表的值就是变量的值. 程序运行过程中,变量的值可以改...
Javascript——DOM编程
热门推荐
Switch的博客
12-27 1万+
Javascript——DOM编程 基本概述     文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以
JavaScript(DOM编程）
weixin_65474399的博客
03-03 624
上期给大家分享了基础的BOM编程 今天这期接着来为大家分享关于JS的DOM编程。 那么DOM编程到底是什么呢？接下来就为大家揭晓。 一，DOM的基本概念 DOM：document object moden 文档对象模型 document 也是一个Element对象，它处于DOM树的最上级 网页中最大的父级元素就是 document ...
《JavaScript DOM 编程艺术》-- 总结
m0_61535378的博客
10-05 579
今天看完了JavaScript DOM 编程艺术，大概是用了三个星期的时间陆陆续续看完的。这本书关于JavaScript的知识点不多，但是展现的确实和标题一样，着重的是结构分离和平稳退化的思想，对于刚入门的新手，可以很好地建立良好的编程意识。下面总结一下。
javascriptDom编程艺术
07-22
资源名称：javaｓｃｒｉｐｔ Dom 编程艺术   资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
DOM 高级编程
09-03
主要介绍了DOM 高级编程,需要的朋友可以参考下
dom编程学习笔记.pdf
11-15
dom编程学习笔记.pdf
JavaScript+DOM编程艺术（清晰中文版）.pdf
08-29
一本我喜欢的书
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 193
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
React Suspense与Concurrent Mode：异步渲染的未来
最新发布
天涯学馆
05-20 639
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 231
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
javascriptdom编程艺术pdf
10-23
《JavaScript DOM编程艺术》是由Jeremy Keith和Jeffrey Sambells合著的一本JavaScript编程指南。该书详细介绍了使用JavaScript与HTML文档对象模型（DOM）交互的技术和方法。 DOM是网页中使用的一个重要的API，它将...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值