JavaScript 常用的事件

夏小花花

于 2022-11-27 15:03:43 发布

阅读量380

点赞数 2

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/xiaohua616/article/details/127354562

版权

javascript 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

文章目录

JavaScript 事件

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>