08-js的事件机制学习.html

Posted 胡辣汤王子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了08-js的事件机制学习.html相关的知识,希望对你有一定的参考价值。

部分一:

<html>
	<head>
		<title>js的事件机制学习1</title>
		<meta charset="UTF-8"/>
		<!--
			js的事件机制:
				解释:当我们的行为动作满足了一定的条件后,会触发某类事务的执行。
				作用:主要是结合js的函数来使用。
				内容:
					1、单双击事件
						单击:onclick    		当鼠标单击的时候会触发
						双击:ondblclick		当鼠标双击的时候会被触发
					2、鼠标事件
						onmouseover			当鼠标悬停在某个HTML元素上的时候触发
						onmousemove			当鼠标在某个HTML元素上移动的时候触发
						onmouseout			当鼠标在某个HTML元素上移出的时候触发
					3、键盘事件
						onkeyup				当键盘在某个HTML元素上弹起的时候触发
						onkeydown			当键盘在某个HTML元素上下压的时候触发
					4、焦点事件
						onfocus				当某个HTML元素获取焦点的时候触发
						onblur				当某个HTML元素失去焦点的时候触发
					5、页面加载事件			
						onload				当页面加载成功后触发。
				注意:
					js中添加事件的第一种方式:
						在HTML上直接使用事件属性进行添加,属性值为所监听执行的函数。
					js中的事件只有在当前HTML元素上有效。
					一个HTML元素可以添加多个不同的事件。
					一个事件可以监听触发多个函数的执行,但是不同的函数要使用分号间隔
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			/*声明js函数*/
				//单击事件
					function testOnclick(){
						alert("我是单击");
					}
				//测试双击
					function testOndblclick(){
						alert("我是双击");
					}
				//鼠标事件
					function testOnmouseover(){
						alert("我是鼠标悬停事件");
					}
					
					function testOnmousemove(){
						alert("我被移动了");
					}
					
					function testOnmouseout(){
						alert("我被移出了");
					}
				//键盘事件
					function testOnkeyup(){
						alert("我是键盘弹起事件");
					}
					
					function testOnkeydown(){
						alert("我是键盘按下事件");
					}
				//焦点事件
					function testOnfocus(){
						document.getElementById("showdiv").innerHTML="哈哈";
						alert("我是获取焦点事件");
					}
					
					function testOnblur(){
						alert("我是失去焦点事件");
					}
				//页面加载
					function testOnload(){
						alert("我是页面加载事件");
					}
				//测试
					function test(){
						alert("测试一个事件的多个函数执行");
					}
		</script>
		<style type="text/css">
			#showdiv{
				width: 300px;
				height: 300px;
				border: solid 1px;
			}
		</style>
	</head>
	<body onload="testOnload()">
		<h3>js的事件机制学习1</h3>
		<hr />
		<input type="button" name="" id="" value="测试单击" onclick="testOnclick();test();" />
		<input type="button" name="" id="" value="测试双击" ondblclick="testOndblclick();" />
		<hr />
		<br /><br />
		<div id="showdiv" onmouseover="testOnmouseover();" onmousemove="testOnmousemove()" onmouseout="testOnmouseout()">
			
		</div>
		<hr />
		键盘事件学习:	<br />
			键盘弹起事件:<input type="text" name="" id="" value="" onkeyup="testOnkeyup();"/><br /><br />
			键盘下压事件: <input type="text" name="" id="" value="" onkeydown="testOnkeydown()"/>
		<hr />
			焦点事件学习:<br />
				获取焦点: <input type="text" name="" id="" value="" onfocus="testOnfocus();"/><br /><br />
				失去焦点: <input type="text" name="" id="" value=""  onblur="testOnblur();"/>
	</body>
</html>

  

部分二:

<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>

  

以上是关于08-js的事件机制学习.html的主要内容,如果未能解决你的问题,请参考以下文章

事件处理

IOS开发-OC学习-常用功能代码片段整理

iOS:事件处理机制

Java异常机制 学习笔记一

3.1.1 基于监听的事件处理机制

Java 中的事件监听机制