前端学习——js事件机制（附代码）

最新推荐文章于 2025-06-16 22:56:14 发布

野生小米椒

最新推荐文章于 2025-06-16 22:56:14 发布

阅读量635

点赞数

CC 4.0 BY-SA版权

分类专栏：三大基础语言

本文链接：https://blog.youkuaiyun.com/x1037490413/article/details/88756658

三大基础语言专栏收录该内容

145 篇文章

订阅专栏

本文介绍了JavaScript中的事件机制，包括单双击、鼠标、键盘等常见事件类型及其应用场景，并讲解了事件的冲突、阻断及HTML元素事件绑定的方法。

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

什么是事件机制？当我们的行为动作满足了某事务的设定条件之后触发了另一事务的执行
常用的事件：1：单双击事件 2：鼠标事件 3：键盘事件 4：焦点事件 5：页面加载事件 6：值改变事件 ...
用途：Js里很多函数都是通过事件机制调用的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js事件机制学习</title>
		<!--
			js的事件机制：
			解释：当我们的行为动作满足了一定的条件后，会触发某类事务的执行。
			作用：主要结合js的函数来使用。
			内容：
			1：单双击事件
			     单击：onclick
			     双击：ondblclick
			2：鼠标事件
			   onmouseover
			   onmouseout
			   onmousemove
			3：键盘事件
			   键盘弹起事件：onkeyup不管你在键盘上按任意一个键，当按下键盘松开的那一刻会触发,应用，比如游戏中的wasd，按下一个键闪现啥的
			   键盘下压事件：onkeydown按下键盘的键事件即被触发
			4：焦点事件
			     onblur:失去焦点事件应用：用于校验
			     onfocus:获取焦点事件
		    5：页面加载事件
		    应用：用于初始化页面资源
		    
		    6：给合适的HTML标签添加合适的事件：
		     onchange加给下拉框更合适
		     onload加给body更合适
		          单双击加给用户会进行点击动作的HTML元素
		          鼠标事件加给用户会进行鼠标移动操作的
		          键盘下压弹起加给用户会进行键盘操作的HTML元素
		          
		    7：给HTML元素添加多个事件时，注意事件之间的冲突
		    举个栗子：单击和双击
		    当事件触发条件包含相同部分的时候，会产生事件之间的冲突。
		    
		    8：事件的阻断
		    当事件所监听的函数将返回值返回给事件时，false:阻断当前事件所在的HTML标签的功能，true:继续执行当前事件所在的HTML标签的功能
		    应用：当表单验证有一项错误时，返回false，不提交表单。
		        
		    9:超链接调用js函数
		    <a href="javascript:函数名()">超链接调用js函数</a>

                   注意：
                   js中添加事件的第一种方式：
                           在HTML上直接使用事件属性进行添加，属性值为所监听执行的函数。
                   js中的事件只有在当前HTML元素上有效
                   一个HTML元素可以添加多个不同的事件
                  一个事件可以监听触发多个函数的执行,但是不同的函数要用分号隔开
                   
		-->
		<script type="text/javascript">
		//鼠标事件学习
			function testOnclick(){
				alert("我是单击");
			}
			function testOndblclick(){
				alert("我是双击");
			}
			function testOnmouseover(){
				alert("我是鼠标悬停");
				}
			function testOnmousemove(){
				alert("我是鼠标移动");
			}
			function testOnmouseout(){
				alert("我被移出了");
			}
			
			//键盘事件学习
			function testOnkeyup(){
				alert("我是键盘弹起事件");
			}
			function testOnkeydown(){
				alert("我是键盘下压事件");
			}
			function testOnfocus(){
				alert("我是获取焦点事件");
				document.getElementById("showdiv").innerHTML="哈哈哈";
			}
			function testOnblur(){
				alert("我是失去焦点事件");
				
			}
			function testOnload(){
				alert("我是页面加载事件");
			}
			//测试
			function test(){
				alert("测试一个事件的多个函数执行");
			}
			//值改变事件
			function testOnchange(){
				alert("我被改变了");
			}

            //事件冲突事件
         /*单击*/   function testOnclick(){
            	alert("今天天气真好");
            }
         /*双击*/   function testOndbclick(){
         	alert("你说的对");
         }
         /*事件的阻断*/ function testA()
         {
         	alert("事件的阻断");
         	return false;
         }
         /*超链接调用js函数*/ function testB(){
         	alert("我是超链接调用函数");
         }
        
		</script>
		
		<style type="text/css">
			#showdiv{
				width:300px;
				height: 300px;
				border: solid 1px;
			}
			
		</style>
	
			
	</head>
	<body onload="testOnload()">
		<h3>js事件机制</h3>
		<hr />
		<input type="button" name="" id="" value="测试单击"  onclick="testOnclick();test();"/>
		<input type="button" name="" id="" value="测试双击"  ondblclick="testOndblclick();"/>
		<hr />
		<br /><br />
	    <div id="showdiv" onmouseover="testOnmouseover()" onmousemove="testOnmousemove()" onmouseout="testOnmouseout()">
	    	
	    </div>
	    <hr />
	    <br /> <br />
	    键盘事件学习：
	   键盘弹起事件： <input type="text" name="" id="" value="" onkeyup="testOnkeyup()" /><br />
	   键盘下压事件：<input type="text" name="" id="" value=""  onkeydown="testOnkeydown()" />
   <hr />
   焦点事件学习：<br />
   获取焦点事件：<input type="text" name="" id="" value="" onfocus="testOnfocus()" /><br />
   失去焦点事件：<input type="text" name="" id="" value="" onblur="testOnblur()" />
  <hr /><br /><br />
    <select name="" id="" onchange="testOnchange();">
    	<option value="">北京</option>
    	<option value="">上海</option>
    	<option value="">深圳</option>
    </select>
    <hr />
    事件的冲突：<br />
    <input type="button" name="" id="" value="事件冲突" onclick="testOnclick()" ;ondblclick="testOndbclick()"/>
        事件的阻断：<br />
     <a href="http://www.baidu.com" target="_blank" onclick="return testA()" >百度一下</a>
        超链接调用js函数：<br />
        <a href="javascript:testB()">超链接调用js函数</a>
    
    
	</body>
</html>