JS事件机制精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44805105/article/details/110671924

js的事件机制学习2：
1、给合适的HTML标签添加合适的事件
onchange----select下拉框
onload------body标签
单双击-------用户会进行点击动作的HTML元素
鼠标事件------用户会进行鼠标移动操作的。
键盘事件------用户会进行键盘操作的HTML元素。
2、给HTML元素添加多个事件时，注意事件之间的冲突
举个例子：单击和双击同时出现在一个button上，你永远触发不了双击事件
当事件的触发条件包含相同部分的时候，会产生事件之间的冲突。
3、事件的阻断
当事件所监听的函数的将返回值返回给事件时：
false：则会阻断当前事件所在的HTML标签的功能
true:则继续执行当前事件所在的HTML标签的功能
4、超链接调用js函数
<a href="javascript:函数名()>调用js函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js事件机制学习</title>
	<script type="text/javascript">
		//值改变事件
		function testOnchange(){
			alert("我被改变了");
		}
		
		//单击事件
		function testOnclick(){
			alert("今天天气好");
		}
		//双击事件
		function testOndblclick(){
			alert("老师好");
		}
		//事件的阻断
		function testA(){
			alert("事件的阻断");
			return false;//false阻断true不阻断
		}
		//超链接调用js函数
		function testHref(){
			alert("我是超链接调用");
		}
		
	</script>
	
	
	</head>
	<body>
	<h3>js的事件机制二</h3>
		<hr />
		值改变事件: <input type="text" name="" id="" value="" onchange="testOnchange();"/>
		<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="testOndblclick()"/>
		<hr />
		事件的阻断：<br />
			<a href="http://www.baidu.com" target="_blank" onclick="return testA()">百度一下</a>
		<hr />
		超链接调用js函数:
			<a href="javascript:testHref()">调用js函数</a>
	</body>
</html>

js的事件机制2