js学习之事件机制(二)

最新推荐文章于 2022-08-09 17:57:42 发布

playboy-jordan

最新推荐文章于 2022-08-09 17:57:42 发布

阅读量209

点赞数

分类专栏： # JavaScript教程文章标签： javascript css vue.js html html5

本文链接：https://blog.csdn.net/weixin_44853669/article/details/106934278

版权

JavaScript教程专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>js的事件机制二</title>
		<meta charset="UTF-8"/>
		<!--
			js的事件机制学习2：
				1、给合适的HTML标签添加合适的事件
					onchange----select下拉框
					onload------body标签
					单双击-------用户会进行点击动作的HTML元素
					鼠标事件------用户会进行鼠标移动操作的。
					键盘事件------用户会进行键盘操作的HTML元素。
				2、给HTML元素添加多个事件时，注意事件之间的冲突
					举个栗子：单击和双击
					当事件的触发条件包含相同部分的时候，会产生事件之间的冲突。
				3、事件的阻断
					当事件所监听的函数的将返回值返回给事件时：
						false：则会阻断当前事件所在的HTML标签的功能
						true:则继续执行当前事件所在的HTML标签的功能
				4、超链接调用js函数
					<a href="javascript:函数名()">调用js函数</a>			
		-->
		<script type="text/javascript">
			
			//值改变事件
				function testOnchange(){
					alert("我被改变了");
				}
			//单击事件
				function testOnclick(){
					alert("今天天气真好，不冷不热，贼适合学习");
				}
			//双击事件
				function testOndblclick(){
					alert("老师说的对");
				}
			//事件的阻断
				function testA(){
					alert("事件的阻断");
					return 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>

在这里插入图片描述

playboy-jordan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js学习之事件机制(二)

<html> <head> <title>js的事件机制二</title> <meta charset="UTF-8"/> <!-- js的事件机制学习2： 1、给合适的HTML标签添加合适的事件 onchange----select下拉框 onload------body标签单双击-------用户会进行点击动作的HTML元素鼠标事件------用户会进行鼠标移动操作的
复制链接

扫一扫