JS-事件

事件

概念：

事件：一件事
事件源：事件发生的组件
监听器：一个对象，当事件源上发生了事件，就执行对象中的某些方法
注册监听：将监听器绑定到事件源上，监听事件的发生

js中注册监听的方式：

在定义标签时，添加事件名称属性。属性值是js代码

js代码会被自动封装到一个function函数的方法体中

例子：<div id="div_id" onclick="fun();">hehe</div>

通过js获取元素对象，再添加事件

例子：
				//1.获取元素对象
				var input = document.getElementById("username");
				//2.注册监听
				input.onclick = function(){
					//alert("hehe");
				}

通过 addEventListener() 方法来添加事件

语法：document.getElementById(“myBtn”).addEventListener(“click”,事件处理函数);

//移除事件

值1：事件名

值2：事件处理函数

document.getElementById(“myBtn”).removeEventListener(‘click’,show);

js中事件的种类：

焦点事件

：针对表单

onfocus 元素获得焦点
onblur 元素失去焦点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<!-- onsubmit 表单提交事件 
		onsubmit="return true"  返回true表单能够提交
		
		onsubmit="return false" 返回false表不能够提交
		-->
		<center>
			<form action="#" method="get" onsubmit="return checkAll()">
				用户名：<input type="text" name="username" value="" placeholder="请输入用户名6-16字母" oninput="checkUsername()" />
				<span id="usp"></span>
				<br>
				密码： <input type="password" name="password" id="" value="" placeholder="请输入密码6-16数字"
					onblur="checkPassword()" /><span id="psp"></span><br>
				<input type="submit" value="提交" />
				<input type="reset" name="" id="" value="重置" />
			</form>

		</center>


		<!-- * 焦点事件：针对表单
					* onfocus 元素获得焦点。 
					* onblur  元素失去焦点 
					* 
					 *oninput 事件 当你往表单中输入内容时就触发 
					-->
		<script type="text/javascript">
		//校验所有表单项
		function checkAll(){
			
			return checkUsername()&&checkPassword();
		}
		
			//校验用户名
			function checkUsername() {
				//获取用户输入的内容
				var username = document.getElementsByName("username")[0].value;
				//alert(username);
				var regx = /^[a-z]{6,16}$/i;
				var flag = regx.test(username);
				var usp = document.getElementById("usp");

				if (flag) {
					//alert("规则正确")
					usp.innerHTML = "<b style='color:green;'>✔用户名规则正确</b>"
				} else {
					//alert("规则错误")
					usp.innerHTML = "<b style='color:red;'>✘用户名规则错误</b>"
				}
				
				return flag;
			}

			//校验密码
			function checkPassword() {
				//获取用户输入的内容
				var pwd = document.getElementsByName("password")[0].value;
				
				var regx = /^[1-9][0-9]{5,15}$/;
				var flag = regx.test(pwd);
				var psp = document.getElementById("psp");
				
				if (flag) {
					//alert("规则正确")
					psp.innerHTML = "<b style='color:green;'>✔密码规则正确</b>"
				} else {
					//alert("规则错误")
					psp.innerHTML = "<b style='color:red;'>✘密码规则错误</b>"
				}
				
				return flag;
				
			}
		</script>
	</body>
</html>

在这里插入图片描述

点击事件：

onclick 当用户点击某个对象时调用的事件句柄
ondblclick 当用户双击某个对象时调用的事件句柄

键盘事件：
onkeydown 某个键盘按键被按下
onkeyup 某个键盘按键被松开
onkeypress 某个键盘按键被按下并松开。

通过事件对象event中的keyCode属性，可以获取键盘某个键的键码其实就是ASCII码表中对按键的编码

e.keyCode

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 事件对象 event 
		onkeyup 按键松开
		onkeydown 按键按下
		onkeypress 按下松开
		-->
		<input type="text" name="" id="" value="" onkeypress="show(event)"/>
	</body>
	<script type="text/javascript" >
		function show(e){
			//alert(e.keyCode) //获取键码 w119 a97 s115 100
			var code=e.keyCode
			 if(code==119){
				console.log("往前")
			 }else if(code==115){
				 console.log("往后")
			 }else if(code==97){
				  console.log("往左")
			 }else if(code==100){
				console.log("往右") 
				//回车键 13
			 }else if(code===13){
				 alert("搜索")
			 }
			
		}
	</script>
</html>

鼠标事件：

onmousedown 鼠标按钮被按下
onmouseup 鼠标按键被松开
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
onmousemove 鼠标被移动
鼠标按下时，通过事件对象 event中的属性 button 或 which 可以获取鼠标按键的编号

e.button 事件对象中的 button属性可以获取鼠标按键的编号

e.which 也可以获取鼠标的按键编号 0 左键 1滚轮 2右键

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				height: 200px;
				width: 200px;
				background: red;
			}

			/* div:active{
				
			} */
		</style>
	</head>
	<body>
		<div>

		</div>
	</body>
	<script type="text/javascript">
		var div = document.querySelector('div')

		div.onmousedown = function() {
			//event 事件对象 
			alert(event.which);
			this.style.background = "yellow"
			var w = window.getComputedStyle(div).width
			var h = window.getComputedStyle(div).height
			alert(w);
			alert(h);
		}

		div.onmouseup = function() {
			this.style.background = "blue"
		}
		var num = 1;
		var w = window.getComputedStyle(div).width;
		var h = window.getComputedStyle(div).height;
		w = parseInt(w); //200px
		h = parseInt(h); //200px;
		div.onmousemove = function() {
			//console.log(num++);
			num++;
			div.style.width = num + w + "px";
			div.style.height = num + h + "px";
		}
	</script>
</html>

表单事件：

onsubmit 确认按钮被点击
onreset 重置按钮被点击
oninput 事件当你往表单中输入内容时就触发

加载与卸载事件：
onload 一张页面或一幅图像完成加载
onunload 用户退出页面。其他浏览器不支持 IE支持（浏览器现在都不支持）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		
		//等页面所有元素加载完成再去调用
		window.onload=function(){
			var mh = document.getElementById("mh");
			alert(mh);
		}
			
		</script>
	</head>
	<body>
		<h1 id="mh">张三李四王麻子</h1>
	</body>
</html>

其他事件：

针对表单

onchange 域的内容被改变比如下拉框
onselect 文本被选中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<input type="text" name="" id="" value="asfasdfasdfasdf" onselect="test3()" />
		<!-- 下拉项切换时，我们可以监听  -->
		<select name="学历" onchange="show()">
			<option value="1">小学</option>
			<option value="2">中学</option>
			<option value="3">大学</option>
		</select>
		<!-- 全选 -->
		<input type="checkbox" name="" id="cb" value="" onchange="test()" />
		
		<input type="radio" name="" id="cb" value="" onchange="test2()" />
	</body>
	<script type="text/javascript">
		function show(){
			alert("你切换下拉项了")
		}
		function test(){
			//alert("abc");
			var a=document.getElementById("cb").checked;
			alert(a);
		}
		
		function test2(){
			alert("abc");
			
		}
		
		function test3(){
			alert("abc");
			
		}
	</script>
</html>

在这里插入图片描述

JS事件对象 event中的属性和功能

属性

：

currentTarget

: 获取的是绑定了该事件的元素对象
target

: 获取的是触发了该事件的元素对象
type

: 获取事件类型
keyCode

：当绑定了键盘事件，可以从事件对象中获取按键的键码（ASCII码）
which/button

：当绑定了鼠标事件，可以从事件对象中获取鼠标按键的键码 0 左键 1滚轮 2右键

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#wai{
				margin-top: 50px;
				height: 200px;
				width: 200px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<!-- event事件对象
		this 表示绑定了该事件的元素对象
		-->
		<button type="button" id="btn" onclick="show(event,this)">一个按钮</button>
		
		<button type="button"  onclick="show2(event)">一个按钮</button>
		
		
		<div id="wai" onclick="tan(event)">
			<button type="button">内层的按钮</button>
		</div>
	</body>
	<script type="text/javascript">
		function show(e,btn){
			// keyCode 当绑定了键盘事件，可以从事件对象中获取按键的键码（ASCII码）					  
		   // which/button  当绑定了鼠标事件，可以从事件对象中获取鼠标按键的键码 0 左键 1滚轮 2右键
		/*   var btn=document.getElementById("btn");
		   btn.style.cssText="background-color: green;"
		   btn.innerText="我的按钮" */
		   btn.style.cssText="background-color: green;"
		   btn.innerText="我的按钮"
		   
		}
		
		function show2(e){
			//通过事件对象里面的属性，获取绑定了该事件的元素
			
			// currentTarget:   
		 //    target
			var btn=e.target;
			 btn.style.cssText="background-color: green;"
		}
		
		function tan(e){
			// currentTarget:获取的是绑定了该事件的元素对象
			//target:获取的是触发了该事件的元素对象
			var obj=e.target;
			alert(e.type);
			alert(obj);
			//alert("abc");
		}
		
	</script>
</html>

在这里插入图片描述

方法：

e.stopPropagation()

阻止事件冒泡

<!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8">
   	<title></title>
   	<style type="text/css">
   		#d1 {
   			height: 400px;
   			width: 400px;
   			background: red;
   		}
   		#d2 {
   			height: 200px;
   			width: 200px;
   			background:yellow;
   		}
   		#d3 {
   			height: 100px;
   			width: 100px;
   			background:green;
   		}
   	</style>
   </head>
   <body>
   	<div id="d1" onclick="show1(event)">
   		<div id="d2" onclick="show2(event)">
   			<div id="d3" onclick="show3(event)">

   			</div>
   		</div>
   	</div>
   </body>
</html>
<script type="text/javascript">
   function show1(e){
   	//调用事件对象中的方法，来阻止事件冒泡
   	//e.stopPropagation();
   	alert(1)
   }
   function show2(e){
   	//e.stopPropagation();
   	alert(2)
   }
   function show3(e){
   	//e.stopPropagation();
   	alert(3)
   }
</script>

e.preventDefault();

阻止元素的默认行为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- a标签跳转页面的行为属于 标签的默认行为 -->
		<a href="http://www.163.com">一个连接</a>
		<!-- a标签，只充当按钮，不要跳转页面 -->
		<a href="javascript:void(0)">一个连接</a>
		<a href="http://www.163.com" onclick="show(event)">一个连接</a>
		<form action="123.html" method="get" onsubmit="return tijao(event)">
			用户名：<input type="text" name="" id="" value="" />
			<input type="submit" value="提交"/>
		</form>
	</body>

	<script type="text/javascript">
		function show(e) {
			//阻止元素的默认行为
			e.preventDefault();
			alert("点击了");
		}
		function tijao(e){
			//阻止表单默认的提交行为
			e.preventDefault();
			alert("异步提交");
		}
	</script>
</html>

例子：鼠标跟随图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img {
				position: absolute;
				/* left:200px;
				top:200px; */
			}
		</style>
	</head>
	<body>
		<img src="img/yazi.gif" id="tp">
	</body>
	<script type="text/javascript">
		//你要整个页面绑定事件，绑定 document 上
		//标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
		//或者 window.event 中获取事件对象
		document.addEventListener('mousemove', function(e) {
			//window.event; 获取事件对象
			//alert(window.event==e);
			//alert("abc");
			//事件对象中有属性可以获取坐标

			// 2. page 鼠标在页面文档的x和y坐标
			var x = e.pageX;
			var y = e.pageY;
			// alert(x);
			// alert(y);

			var img = document.getElementById("tp");
			img.style.left = x + "px";
			img.style.top = y + "px";

		})
	</script>
</html>

原文链接：https://blog.csdn.net/Augueste/article/details/118958636

JS-事件

事件

js中注册监听的方式：

js中事件的种类：

JS事件对象 event中的属性和功能

你可能也喜欢