JavaScript 常用的事件

最新推荐文章于 2023-12-28 16:28:26 发布
最新推荐文章于 2023-12-28 16:28:26 发布
阅读量502 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaohua616/article/details/127354562
本文深入探讨了JavaScript中的事件处理，包括onmousemove事件、clientX和clientY属性用于获取鼠标坐标，以及如何使用createElement和appendChild创建并添加元素。此外，讲解了事件对象的概念，并通过示例展示了事件冒泡、事件委派以及事件绑定（addEventListener）的工作原理，帮助读者理解JavaScript事件在实际开发中的运用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

JavaScript 事件

事件

定义：事件是浏览器与用户交换的行为;

onmousemove

定义：鼠标元素移动时触发;

clientX

定义：获取鼠标的水平坐标;

clientY

定义：获取鼠标的垂直坐标;

createElement

定义：创建标签;

appendChild

定义：将创建的标签添加到指定的元素下;

案例

//将创建好的li标签添加到ul下
u1.appendChild(li);

target

定义：表示触发事件的对象;

addEventListener

定义：同时为一个元素的相同事件绑定多个响应函数,当事件被触发时,响应函数将会安装函数的绑定的顺序执行(可以同时为一个元素绑定多个事件)

事件对象

定义：当事件触发时,浏览器每次都传递一个实参进来;

案例
显示当前鼠标坐标位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#areaDiv{
				width: 500px;
				height: 200px;
				border: 1px solid black;
			}
			#showMsg{
				width: 500px;
				height: 100px;
				margin-top: 30px;
				border: 1px solid black;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/**
				 * 当属标在areaDiv移动时,在showMsg中显示鼠标的坐标
				 * **/
				 var areaDiv = document.getElementById("areaDiv");
				 var showMsg = document.getElementById("showMsg");
				 
				 /**
				  * onmousemove
				  *  鼠标元素移动时触发
				  *  
				  * 事件对象
				  * 	当事件触发时,浏览器每次都传递一个实参进来
				  * **/
				  areaDiv.onmousemove = function(event){
					  /**
					   * clientX可以获取鼠标的水平坐标
					   * clientY可以获取鼠标的水平坐标垂直
					   * **/
					   var x = event.clientX;
					   var y = event.clientY;
					   
					   //在showMsg显示坐标
					   showMsg.innerHTML = "x= " +x + ",y= " +y;
				  }
			}
		</script>
	</head>
	<body>
		<div id="areaDiv"></div>
		<div id="showMsg">
			
		</div>
	</body>
</html>

运行效果

事件冒泡

定义：当后代元素上的事件触发时,其祖先元素上的事件也会被触发;

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			#s1{
				background-color: green;
			}
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				/**
				 * 事件冒泡: (Bubble) 吧bou
				 * 	当后代元素上的事件触发时,其祖先元素上的事件也会被触发
				 * 
				 * 
				 * 	
				 * **/
				 
				//为是s1绑定单机响应函数
				var s1 = document.getElementById("s1");
				s1.onclick = function(event){
					event = event || window.event;
					alert("s1");
					
					//取消冒泡
					event.cancelBubble = true;
				};
				
				//为是box1绑定单机响应函数
				var box1 = document.getElementById("box1");
				box1.onclick = function(){
					event = event || window.event;
					alert("box1");
					
					//取消冒泡 cancelBubble 取消冒泡事件
					event.cancelBubble = true;
				};
				
				//为是body绑定单机响应函数
				document.body.onclick = function(){
					alert("body");
				};
			};
			
		</script>
	</head>
	<body>
		<div id="box1">
			我是box1
			<span id="s1">我是一个span</span>
		</div>
		
	</body>
</html>

运行效果

事件委派

定义：将事件统一绑定给祖先元素,当后代元素上触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件;

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				
				//获取ul
				var u1 = document.getElementById("u1");
				
				//点击按钮添加超链接
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//创建一个li
					var li = document.createElement("li");
					li.innerHTML = "<li><a href='javascript:;' class='link'>新建超链接</a></li>"
					u1.appendChild(li);
				};
				
				/**
				 * 获取所有a标签,绑定单机响应函数
				 * 
				 * **/
				var allA = document.getElementsByTagName("a");
				//遍历
				// for(var i=0;i<allA.length;i++){
				// 	allA[i].onclick = function(){
				// 		alert("aaa");
				// 	};
				// }
				
				/**
				 * 事件的委派
				 * 	将事件统一绑定给祖先元素,当后代元素上触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件
				 * 
				 * 只绑定一次事件,即可应用到多个元素上,即使元素是后添加的
				 * **/
				//为ul绑定单机响应函数 
				u1.onclick = function(event){
					
					event = event || window.event;
					//如果触发事件对象是期望的元素执行,否则不执行
					/**
					 * target
					 * 	event中的target表示触发事件的对象
					 * **/
					 if(event.target.className == "link"){
						 alert("1111");
					 }
				};
			};
		</script>
	</head>
	<body>
		<button id="btn01">添加超链接</button>
		<ul id="u1" style="background-color: greenyellow;">
			<li>
				<p>我是p元素</p>
			</li>
			<li><a href="javascript:;" class="link">超链接一</a></li>
			<li><a href="javascript:;" class="link">超链接二</a></li>
			<li><a href="javascript:;" class="link">超链接三</a></li>
		</ul>
	</body>
</html>

运行效果

事件绑定

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				/**
				 * 点击按钮后弹出内容
				 * **/
				 var btn01 = document.getElementById("btn01");
				 
				 /**
				  * 使用 对象.事件 = 函数的形式绑定响应函数
				  *  它只能为一个元素的一个事件绑定一个响应函数
				  *  不能绑定多个,如果绑定多个,则后边的会覆盖掉前面的
				  * **/
				 //绑定第一个响应函数
				 // btn01.onclick = function(){
					// alert("1111"); 
				 // };
				 //  //绑定第二个响应函数
				 // btn01.onclick = function(){
				 // 	alert("2222"); 
				 // };
				 
				 /**
				  * addEventListener()
				  *  通过这个方法可以为元素绑定响应函数
				  * 	参数:
				  * 		1.事件的字符串,不用on;
				  * 		2.回调函数,当事件触发时该函数会被调用
				  * 		3.是否在捕获阶段触发事件,需要一个bool值,一般都传false
				  * 使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数,当事件被触发时,响应函数将会安装函数的绑定的顺序执行
				  * 可以同时绑定多个事件
				  * 
				  * IE8一下不支持
				  * **/
				 btn01.addEventListener("click",function(){
					 alert("11");
				 },false);
				 
				 btn01.addEventListener("click",function(){
						alert("22");
				 },false);
				 
				 // bind(btn01,"click",function(){
					//  alert("111");
				 // });
			};
			
			//定义一个函数
			/**
			 * 参数:
			 * 	obj 要绑定事件的对象
			 * 	eventStr 事件的字符串
			 * callback 回调函数
			 * **/
			// function bind(obj,eventStr,callback){
				
			// 	if(obj.addEventListener){
			// 		//大部分浏览器兼容
			// 		obj.addEventListener(eventStr,callback,false);
			// 	}else{
			// 		/**
			// 		 * this是由调用方式调用的
			// 		 * **/
			// 		//IE8及以下
			// 		obj.attachEvent("on"+eventStr,callback);
			// 	}
			//}
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button>
	</body>
</html>
JavaScript中常用的事件及处理
2401_87197766的博客
11-05 1586
与change事件不同，input事件在元素的值发生变化后立即发生，而change事件在元素失去焦点时才发生‌。这些事件包括keydown、和keyup和keypress，它们分别在用户按下、释放键盘按键时触发，用于执行特定的操作或功能。某个键时触发，过去用于捕获字符键，但现代浏览器中已不推荐使用，因为它不区分大小写和修饰键‌（不包括功能键如Ctrl、Shift等）。某个键时触发，如果按住不放会重复触发。与input事件不同，change事件只在元素失去焦点时触发一次，即使值在失去焦点前发生了多次变化‌。
JavaScript 常用事件
一个Java菜鸟(同微信公众号)
11-06 579
状    态 事    件 说    明 鼠标 键盘 事件 onclick 鼠标单击时触发此事件 ondblclick 鼠标双击时触发此事件 onmousedown 按下鼠标时触发此事件 onmouseup 鼠标按下后松开鼠标时触发此事件
JavaScript常用事件
bingkingboy的博客
07-29 540
window.onload = function () { var input = document.getElementsByTagName('input')[0]; var form = document.getElementsByTagName('form')[0]; form.onreset= function(){ alert('lee')
JavaScript中一些常用事件
Ken-Zhang的专栏
01-27 803
一、常用事件 1.onclick事件 点击事件（onclick并不是js中的方法，onclick只是浏览器提供js的一个dom接口，让js可以操作dom，所以onclick大小写都是没问题的，比如HTML代码就不用区分大小写） 例： page language="java"import="java.util.*" pageEncoding="UTF-8"%>   DOCTYPE
JavaScript常用的事件
qq_48627750的博客
10-18 224
什么是事件？事件是电脑输入谁被与页面进行交互的响应 事件的注册又分为静态注册和动态注册 静态注册事件：通过HTML标签的事件属性直接赋予事件响应后的代码，这种方式我们叫静态注册 动态注册事件：是指通过js代码得到标签的dom对象，然后在通过dom对象.事件名 = function(){}这种形式赋予事件响应后的代码，叫做动态注册。 动态注册基本步骤： 1，获取标签对象 2，标签对象.事件名 = function(){} javaScript-onload事件 onload加载完成时间；页面加载完成之后，
JavaScript常用事件介绍
10-17
### 常用的JavaScript事件 JavaScript中有很多内置事件，以下是一些常用的事件类型： - **窗口事件**：如`onload`事件，用于在页面加载完成后执行函数。 - **表单元素事件**：如`onsubmit`事件，用于在表单提交前...
JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码
最新发布
06-27
JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例...
javaScript常用事件命令
10-31
JavaScript 常用事件命令 JavaScript 是一种广泛应用于 web 开发的编程语言，具有广泛的应用前景。下面将对 JavaScript 常用事件命令进行总结和讲解。 onblur 事件 onblur 事件是在表单元素中，当元素失去焦点时...
javaScript常用事件
09-19
常用javaScript事件归纳。 常用事件： 1.onclick 鼠标单击事件 通常在下列基本对象中产生： button（按钮对象） checkbox（复选框）或（检查列表框） radio （单选钮） reset buttons（重要按钮） submit buttons（提交按钮） 例如可通过下列按钮激活change()文件： 2.onLoad页面加载事件：当页面加载时，自动调用函数（方法）。注意：此方法只能写在标签之中！ 3.onScroll窗口滚动事件：当页面滚动时调用函数。注意：此事件写在方法的外面，且函数名（方法名）后不加括号！例：window.onscroll=move; 4.onBlur失去焦点事件：当光标离开文本框是触发调用函数。 当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引发该文件，他与onFocas事件是一个对应的关系。 5.onFocus事件：光标进入文本框时触发调用函数。 当用户单击Text或textarea以及select对象时，产生该事件。 6.onChange事件：文本框的value值发生改变时调用函数。当利用text或textarea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。例： 7.onSubmit事件：属于表单元素，写在表单标签内。语法：onSubmit=”return 函数名()” 8.onKeyDown事件：在输入框中按下键盘上的任何一个键时，都会触发事件，调用函数。注意：此事件写在方法的外面，且函数名（方法名）后不加括号！例：document.onkeydown=函数名（）。 9.setTimeout(“函数名()”,间隔时间（以毫秒为单位）)； 10.clearTimeout(对象) 清除已设置的setTimeout对象 鼠标相关事件： 1.onMouseOver：鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域之内，无论怎样移动斗志触发一次函数。 2.onMouseOut:鼠标离开某对象范围时，触发事件调用函数。 3.onMouseMove: 鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域之内，只要一动一次就出发一次事件调用一次函数。 4.onmouseup 当鼠标松开 5.onmousedown 当鼠标按下键 document对象常用的方法： 1.document.getElementById():通过id获得唯一的一个HTML元素，没有id时，通过name查找 2.document.getElementByName()：获取相同名称的一组元素。主要用于表单中的复选框 Date对象常用方法： Var a=new Date(); //创建a为一个新的时期对象 y=a.getYear(); //y的值为从对象a中获取年份值 两位数年份 y1=a.getFullYear(); //获取全年份数 四位数年份 m=a.getMonth(); //获取月份值(0-11) d=a.getDate(); //获取日期值 d1=a.getDay(); //获取当前星期值 h=a.getHours(); //获取当前小时数 m1=a.getMinutes(); //获取当前分钟数 s=a.getSeconds(); //获取当前秒钟数
vue 点击；双击；鼠标事件
热门推荐
weixin_43706224的博客
01-30 1万+
事件是文档或者浏览器窗口中发生的，特定的交互瞬间。 事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。 事件是javaScript和DOM之间交互的桥梁。 你若触发，我便执行——事件发生，调用它的处理函数执行相应的JavaScript代码给出响应。 典型的例子有：页面加载完毕触发load事件；用户单击元素，触发click事件。 v-on绑定单击事...
javascript常用事件
zt_pursue的博客
05-07 227
JS事件绑定方法 1、在DOM元素中绑定 &lt;button onclick="alert('hello')"&gt;&lt;/button&gt; 2、对象属性方式 DomObject.onclick = function () {}; 3、addEventListener //添加事件 DomObject.addEventListener('click', funct...
【Javascript】什么是事件
O(∩_∩)O
12-15 550
JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。 比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。 主要事件表:
常见的事件
weixin_39427688的博客
04-17 690
常见的事件： 1. 点击事件： 1. onclick：单击事件 2. ondblclick：双击事件 2. 焦点事件 1. onblur：失去焦点 2. onfocus:元素获得焦点。 3. 加载事件： 1. onload：一张页面或一幅图像完成加载。 4. 鼠标事件： ...
JavaScript中的常用事件
qq_45554909的博客
12-21 3620
JS中的事件： 概念：某些组件被执行了某些操作后，触发某些代码的执行。 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了 事件源：组件。如： 按钮 文本输入框… 监听器：代码。 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。 1、常用事件 1.点击事件： onclick：单击事件 ondblclick：双击事件 2.焦点事件 onblur：失去焦点 onfocus:元素获得焦点。 3.加载事件： onload：一张页面或一幅图像完成加
JavaScript中常用的事件
m0_66971047的博客
11-20 1061
JavaScript中常用的事件
javascript中常用的事件
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
03-02 259
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script type="text/javascript"> /* *JS中常用的事件 * blur 失去焦点 * focus 获得焦点 * click 鼠标单
JavaScript 常用事件大全
mzdxxcdh的博客
12-28 3844
事件是发生在你正在编程的系统中的事情——当事件发生时，系统产生（或“触发”）某种信号，并提供一种机制，当事件发生时，可以自动采取某种行动（即运行一些代码）。事件是在浏览器窗口内触发的，并倾向于附加到驻留在其中的特定项目。这可能是一个单一的元素，一组元素，当前标签中加载的 HTML 文档，或整个浏览器窗口。有许多不同类型的事件可以发生。
全面解析JavaScript鼠标事件及其浏览器支持
### JavaScript 鼠标常用事件知识点 #### 1. 鼠标事件概述 在网页交互设计中，鼠标事件是一种非常常见的事件类型。JavaScript 通过鼠标的事件来处理用户的操作，比如点击、双击、悬停、移动、按下和释放等。这些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值