DOM 事件

最新推荐文章于 2023-12-20 16:54:00 发布
最新推荐文章于 2023-12-20 16:54:00 发布
阅读量721 收藏 3
点赞数 3
分类专栏： JS笔记 文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xy_is_fhh/article/details/121194781
版权

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。

网页中的每个元素都可以产生某些可触发JavaScript的事件。

事件三要素：事件源（事件被触发的对象），事件类型（如何触发什么事件），事件处理程序（通过一个函数赋值的方式完成）。

执行事件步骤：1.获取事件源    2.注册事件(绑定事件)    3.添加事件处理程序(采用函数赋值形式)

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div {
			background-color: pink;
			width: 100px;
			height: 100px;
		}
	</style>
</head>

<body>
	<button>传统注册事件</button>
	<button>方法监听注册事件</button>

	<div>1</div>
	<div>2</div>
	<div>3</div>
	<script>
		//注册事件概述：给元素添加事件，称为注册事件或者绑定事件
		//注册事件有两种方式：传统方式和方法监听注册方式
		//传统注册方式：1.利用on开头的事件onclick
		//2.<button onclick='alert("hi~")'></button>
		//3.btn.onclick=function(){}
		//特点：注册事件的唯一性
		//同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
		//方法监听注册方式
		//1.w3c标准  推荐方式
		//2.addEventListener()它是一个方法
		//3.IE9之前的IE不支持此方法，可使用attachEvent()代替
		//特点：同一个元素同一个事件可以注册多个监听器
		//按注册顺序依次执行
		//addEventListener事件监听方式
		//eventTarget.addEventListener(type,listener[,useCapture])
		//eventTarget.addEvenLisenter()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数。
		//该方法接收三个参数：
		//1.type：事件类型字符串，比如click、mouseover，注意这里不要带on
		//2.listener:事件处理函数，事件发生时，会调用该监听函数
		//3.useCapture：可选参数，是一个布尔值，默认是false，学完DOM事件流后，我们再进一步学习
		var btns = document.querySelectorAll('button');
		//1.传统方式注册事件
		btns[0].onclick = function () {
			alert('hi');
		}
		btns[0].onclick = function () {
			alert('hhhh');
		}//兼容性还行，就是只能添加一次注册
		//2.事件侦听注册事件 addEventListener
		//(1).里面的事件类型是字符串  必定加引号 而且不带on
		//(2).同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
		btns[1].addEventListener('click', function () {
			alert(666);
		})
		btns[1].addEventListener('click', function () {
			alert(888);
		})

		//删除事件（解绑事件）
		//1.传统注册方式
		var divs = document.querySelectorAll('div');
		divs[0].onclick = function () {
			alert(1111111);
			//1.传统方式删除事件  eventTarget.onclick = null;
			divs[0].onclick = null;
		}
		//2.方法监听注册方式  
		divs[1].addEventListener('click', fn)//里面的fn不需要调用加小括号
		//2.方法监听注册方式删除事件  eventTarget.removeEventListener(type,listener[,useCapture]);
		function fn() {
			alert(2222);
			divs[1].removeEventListener('click', fn);
		}

	</script>
</body>

</html>

事件流+阻止事件冒泡

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.father {
			width: 200px;
			height: 200px;
			background-color: #FFC0CB;
			margin: 100px auto;
			position: relative;
		}

		.son {
			width: 150px;
			height: 150px;
			background-color: #7FFFD4;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
		}
	</style>
</head>

<body>
	<div class="father">
		<div class="son">
			son盒子
		</div>
	</div>
	<script>
		//事件流描述的是从页面中接收事件的顺序
		//事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
		//DOM事件流分为3个阶段：1.捕获阶段  2.当前目标阶段  3.冒泡阶段
		//事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程
		//事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程
		//注意：1.JS代码中只能执行捕获或者冒泡其中的一个阶段
		//2.onclick和attachEvent只能得到冒泡阶段。
		//3.addEventListener(type,listener[,useCapture])
		//第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；document -> html ->body -> father ->son
		//如果是false(不写默认就是false)，表示在事件冒泡阶段调用事件处理程序。
		// var son=document.querySelector('.son');
		// son.addEventListener('click',function(){
		// 	alert('son');
		// },true);
		// var father=document.querySelector('.father');
		// father.addEventListener('click',function(){
		// 	alert('father');
		// },true);
		//4.冒泡阶段  如果是false或者 省略，表示处于冒泡阶段 son -> father -> body -> html ->document
		// var son=document.querySelector('.son');
		// son.addEventListener('click',function(){
		// 	alert('son');
		// },false);
		// var father=document.querySelector('.father');
		// father.addEventListener('click',function(){
		// 	alert('father');
		// },);
		// document.addEventListener('click',function(){
		// 	alert('document');
		// });
		//实际开发中很少使用事件捕获，更关注事件冒泡
		//有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave

		//阻止事件冒泡
		//.dom推荐的标准 stopPropagation()
		var son = document.querySelector('.son');
		son.addEventListener('click', function (e) {
			alert('son');
			e.stopPropagation();//阻止冒泡 stop停止 Propagation传播
		}, false);
		var father = document.querySelector('.father');
		father.addEventListener('click', function (e) {
			alert('father');
			e.stopPropagation();//阻止冒泡
		}, false);
		document.addEventListener('click', function () {
			alert('document');
		})
	</script>
</body>

</html>

事件委托

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>事件委托</title>
</head>

<body>
	<ul>
		<li>点染相思芙蓉盛开眉间</li>
		<li>点染相思芙蓉盛开眉间</li>
		<li>点染相思芙蓉盛开眉间</li>
		<li>点染相思芙蓉盛开眉间</li>
		<li>点染相思芙蓉盛开眉间</li>
	</ul>
	<script>
		//事件委托也称为事件代理，在jQuery里面称为事件委派
		//事件委托的原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
		//事件委托的作用：只操作一次DOM，提高了程序的性能。
		var ul = document.querySelector('ul');
		ul.addEventListener('click', function (e) {
			//alert('点染相思芙蓉盛开眉间');
			//e.target 这个可以得到点击的对象 
			e.target.style.backgroundColor = 'pink';
		})
	</script>
</body>

</html>

常用的鼠标事件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>some鼠标事件</title>
	<style type="text/css">
		body {
			height: 3000px;
		}
	</style>
</head>
<body>
	啊啊啊啊啊啊

	<script>
		//禁止鼠标右键菜单
		//contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
		// document.addEventListener('contextmenu',function(e){
		// 	e.preventDefault();
		// })
		//禁止鼠标选中，禁止选中文字(selectstart 开始选中)
		// document.addEventListener('selectstart',function(e){
		// 	e.preventDefault();
		// })

		//鼠标事件对象
		//event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段主要用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent。
		document.addEventListener('click', function (e) {
			//1.client鼠标在可视区的x和y坐标
			console.log(e.clientX);//返回鼠标相对于浏览器窗口可视区的X坐标
			console.log(e.clientY);//返回鼠标相对于浏览器窗口可视区的Y坐标
			//2.page鼠标在页面文档的x和y坐标
			console.log(e.pageX);
			console.log(e.pageY);
			//3.screen鼠标在电脑屏幕的x和y坐标
			console.log(e.screenX);
			console.log(e.screenY);
		})
	</script>
</body>
</html>

鼠标事件：mouseenter 当鼠标移动到元素上时就会触发mouseenter事件

类似mouseover 区别于 mouseover鼠标经过自身盒子就会触发

                                    mouseenter只会经过自身盒子触发，因为mouseenter不会冒泡

跟mouseenter搭配的 鼠标离开事件mouseleave同样不会冒泡

    mouseover和 mouseout搭配

常用的键盘事件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>some键盘事件</title>
</head>
<body>
	<script>
		//常用的键盘事件
		//1.keyup按键弹起的时候触发
		// document.onkeyup=function(){
		// 	console.log('我弹起咯');
		// }
		document.addEventListener('keyup', function () {
			console.log('我弹起了');
		})
		//2.keydown按键按下的时候触发
		document.addEventListener('keydown', function () {
			console.log('我按下了');
		})
		//3.keypress按键按下时触发（不识别功能键 比如ctrl shift 箭头等）
		document.addEventListener('keypress', function () {
			console.log('我按下了press');
		})
		//4.三个事件的执行顺序 keydown -- keypress --keyup
		//注意：如果使用addEventListener不需要加on

		//键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
		//1.keyup和keydown事件不区分字母大小写 a和A得到的都是65
		//2.keypress事件区分字母大小写 a 97 A 65
		document.addEventListener('keyup', function (e) {
			console.log(e.keyCode);
			//可以利用keyCode返回的ASCII码值来判断用户按下了哪个键
			if (e.keyCode === 65) {
				alert('a');
			} else {
				alert('没有按a');
			}
		})
	</script>
</body>
</html>

夏大爷耶耶耶
关注
专栏目录
深入理解JS DOM事件机制
11-27
JavaScript DOM事件机制是Web开发中的核心概念之一，它关乎如何响应用户与网页元素的交互。在深入理解这一机制前，我们需要了解三个关键术语：事件流、事件冒泡和事件捕获。 1. 事件流： 事件流描述了事件在HTML...
这次一定彻底弄懂DOM事件机制
03-29
下文主要通过一个例子带你 分析DOM事件的传递、事件处理 ，然后在此基础上再 深入总结对事件监听的优化方案 ，最终总结下DOM事件机制 在开源框架中的实战应用 。 一、从实例看事件传递 以下面这个普通的html...
js 只绑定一次事件
weixin_42291794的博客
07-08 992
let div1 = document.querySelector('.div1') div1.addEventListener('mousedown',function(){ console.log('div1') //正常绑定，每执行一次绑定一次 div1.addEventListener('mouseup',function(){ console.log('aaa') }) //封装函数once只绑定一次 once(div1,'mous
关于键盘事件
weixin_60671825的博客
09-24 675
监听全局键盘按下事件 keydown:在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件 document.addEventListener('keydown', function(e) { console.log(e.key); }) 监听全局键盘弹起事件 keyup:松开按键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态 document.addEventListener('keyup', function(e) { console.log(e.key);
js键盘事件keydown事件，防止重复触发，组合键的配合使用
最新发布
阿牛哥的博客
12-20 1967
键盘事件类型主要有三种：keydown、keypress和keyup。阻止keydown事件重复触发.组合键的配合使用
事件addEventListener（）参数及事件汇总
qq_46344419的博客
04-23 4358
addEventListener（）参数及事件汇总
js addEventListener_keydown.html
weixin_42193179的博客
01-16 2252
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>addEventListener</title> </head> <body> 价格：<span id="price"></sp...
DOM事件（ppt） DOM事件（ppt） DOM事件（ppt）
05-31
DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM...
Angular4.x Event (DOM事件和自定义事件详解)
01-19
Angular组件和DOM元素通过事件与外部进行通信，两者中的事件绑定语法是相同的-...DOM事件冒泡与Angular可以无缝工作，具体示例如下： import { Component } from '@angular/core'; @Component({ selector: 'exe-app',
js键盘事件
m0_63400611的博客
12-12 1083
键盘事件 点击键盘按键后触发键盘事件 代码 //1.keyup 键盘按键弹起 document.addEventListener('keyup', function() { console.log('弹起'); }) //2.keydown 键盘按键按下 document.addEventListener('keydown', function() { console.log('按下down'); }) //3.keypress 键盘按键按下 .
使用JS监听键盘按下事件（keydown event）
10-16
主要介绍了使用JS监听键盘按下事件（keydown event），本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
addEventListener方法
m0_57263959的博客
08-09 1863
是一种强大的机制，可以用于在 JavaScript 中实现对 DOM 元素的事件响应，从而创建丰富的交互式用户界面。，您可以指定在特定事件发生时执行的函数，从而实现对用户交互或其他类型的事件的响应。函数会被调用，并在控制台输出 "Button clicked!示例：在 JavaScript 中使用。是 JavaScript 中用于向。DOM 元素添加事件监听器。将点击事件监听器绑定到。元素上，当按钮被点击时，
JS基础-DOM事件【键盘事件+案例】
m0_48454458的博客
08-24 492
JS基础-DOM事件【键盘事件+案例】
js 监听键盘按键
qq_36521848的博客
07-07 938
效果：上上下下左左右右，前前后后 document.addEventListener('keydown', function(e) { console.log("----->当前按键keyCode:" + e.keyCode); switch (e.keyCode) { case 37: console.log("左"); break; case 38: console.log("上"); break; case 39: console.log("
解决keydown重复触发/提交的问题
爪蛙没有爪的博客
05-23 9043
问题描述：Javascript中keydown会重复触发，导致了重复提交的问题 解决方案: 一、使用keyup事件代替 document.addEventListener('keyup',function(){ //dosomething... })； 该方法在shift+enter等组合键有一定概率不触发的问题，具体看个人操作习惯 二、使用flag变量控制 var flag=false; d...
JavaScript-筑基（十八）键盘事件
weixin_59598992的博客
01-15 369
onkeyup 某个键盘按键被松开时触发 onkeydown 某个键盘按键被按下时触发 onkeypress 某个键盘按键被按下时触发，但是它不识别功能键盘，比如ctrl、shift、箭头等 document.onkeyup = function(){ //使用 console.log(11); } document.addEventListener('keyup',function(){ conso
WebAPIs04-常用的键盘事件、 BOM 概述 、 window 对象的常见事件 、 定时器、this指向问题、、 location 对象 、navigator 对象 、histJS 执行机制
weixin_51353891的博客
04-21 272
学习目标： 能够说出常用的3-5个键盘事件 能够知道如何获取当前键盘按下的是哪个键 能够知道浏览器的顶级对象window 能够使用window.onload事件 能够使用window.onresize事件 能够说出两种定时器的区别 能够使用location对象的href属性完成页面之间的跳转 能够使用location对象获取url中的参数部分 能够使用history提供的方法实现页面刷新 1.1. 常用的键盘事件 1.1.1 键盘事件 <script> // 常用.
HTML DOM--＞键盘事件：keydown/keyup/keypress
az44yao的专栏
07-21 2546
1.定义和使用 　　keydown:某个键盘按键被按下 　　keyup:某个键盘按键被松开 　　keypress:个键盘按键被按下并松开 　　注意： 　　　　1.键盘事件的属性不能用于以下元素: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或 <tit.
addEventListener()
qq_41918834的博客
01-11 1566
https://www.cnblogs.com/mcdnf/p/5347537.html 先看个例子： document.getElementById(“myBtn”).addEventListener(“click”, function(){ document.getElementById(“demo”).innerHTML = “Hello World”; }); 定义和用法 addEventListener() 方法用于向指定元素添加事件句柄。 提示： 使用 removeEventListener()
JavaScript实现DOM事件处理与事件委托
理解并熟练运用`addEventListener`和`attachEvent`（对于兼容性问题），是JavaScript开发中处理DOM事件的关键技能，这能够帮助开发者构建更加动态和响应式的用户界面。在实际开发中，还可以结合事件委托等高级技术，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值