码迷,mamicode.com
首页 > Web开发 > 详细

13 js事件2——选择合适的事件

时间:2020-01-18 19:46:31      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:onchange   双击   onload   函数   跳转   pre   text   alert   多个   

1.给合适的HTML标签添加合适的事件

  • onchange --- select下拉框
  • onload --- body标签
  • 点击事件 --- 用户会进行点击动作的HTML元素
  • 鼠标事件 --- 用户会进行鼠标移动的HTML元素
  • 键盘事件 --- 用户会进行键盘操作的HTML元素

2.当给HTML 元素添加多个事件时,注意事件之间的冲突

  • 例如:单双击事件的冲突

3.事件的阻断

  • 当事件指定的函数包含返回值时:
    • false:会阻断当前事件所在的HTML标签的功能
    • true:继续执行该标签的功能
  • 阻断要点
    •   事件值的函数前面和函数体中都要加return(见代码↓)
  • 应用场景
    •   例如表单提交之前,检查值,不符合则阻断提交跳转
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		1.给合适的HTML标签添加合适的事件
			onchange --- select下拉框
			onload --- body标签
			点击事件 --- 用户会进行点击动作的HTML元素
			鼠标事件 --- 用户会进行鼠标移动的HTML元素
			键盘事件 --- 用户会进行键盘操作的HTML元素
		2.当给HTML 元素添加多个事件时,注意事件之间的冲突
			例如:单双击事件的冲突
		3.事件的阻断
			当事件指定的函数包含返回值时:
				false:会阻断当前事件所在的HTML标签的功能
				true:继续执行该标签的功能
		 -->
		 <script type="text/javascript">
		 	function test(){
				alert("阻断事件测试");
				return false;
			}
		 </script>
		 <!-- 事件的阻断的测试 -->
		 <!-- 注意关键点在于函数前面和函数体中都要加return-->
		 <a href="https://www.baidu.com" onclick="return test()">跳转百度</a>
	</body>
</html>

  

13 js事件2——选择合适的事件

标签:onchange   双击   onload   函数   跳转   pre   text   alert   多个   

原文地址:https://www.cnblogs.com/Scorpicat/p/12209854.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!