<JavaScript>事件机制学习（二）关于事件机制的理解，注意事件之间的冲突、事件的阻断

本文链接：https://blog.csdn.net/weixin_45797022/article/details/105011712

一、给合适的HTML标签添加合适的事件才能物尽其用，带来效率的最大化

onchange：主要用在select下拉框
onload：主要用在body标签
单双击：主要用在用户会进行点击动作的HTML元素
鼠标事件：主要用在用户会进行鼠标移动操作时。
键盘事件：主要用在用户会进行键盘操作的HTML元素。

二、给HTML元素添加多个事件时，注意事件之间的冲突。

举例：以下示例单双击事件被添加到同一个HTML元素之中，所以双击事件永远无法被触发。

<head>
<script type="text/javascript">
//单击事件
function testOnclick(){
     	alert("今天陪父母打了乒乓球");
}   
//双击事件
function testOndblclick(){
     	alert("今天陪父母打了羽毛球");
}
</head>
</script>
<body>
<input type="button" name="" id="" value="事件的冲突" onclick="testOnclick();" ondblclick="testOndblclick()" />
</body>

当事件的触发条件包含相同部分的时候，会产生事件之间的冲突问题。

三、事件的阻断

当事件所监听的函数的返回值返回给事件时：
false：则会阻断当前事件所在的HTML标签的功能。
true：则继续执行当前事件所在的HTML标签的功能。

<head>
<script type="text/javascript">
	function test(){
     		return  false;//因为返回false，所以点击下面的超链接百度一下，并不会跳转到百度一下的页面，如果是true，则可以。
	}
</script>
</head>
<body>
	<a href="http://www.baidu.com" target="_blank" onclick="return test()">百度一下</a>
</body>

四、除了事件可以用来调用Js函数，我们还可以通过超链接来调用函数

以下方式同样可以达到调用js函数的目的：

<head>
<script type="text/javascript">
	//超链接调用js函数
	function testHref(){
     		alert("超链接调用");
	}
</script>
</head>
<body>
	<a href="javascript:testHref()">调用js函数</a>//结果为超链接调用
</body>