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

Posted Scorpicat

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了13 js事件2——选择合适的事件相关的知识,希望对你有一定的参考价值。

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——选择合适的事件的主要内容,如果未能解决你的问题,请参考以下文章

选择选项卡片段时触发啥事件

js的事件机制二

原生js如何绑定a连接点击事件?

react-router 2.8.1 js 点击事件 跳转

js013-事件

Kendo UI TreeView动态启用/禁用dragAndDrop事件