javascript中的事件机制

1.js的事件机制:当我们的行为动作满足了一定的条件后,会触发某类事务的执行
内容:
1.单双击事件
单击:onclick
双击:ondblclick
2.鼠标事件
onmouseover
onmouseout
onmousemove
3.,键盘事件
onkeyup
onkeydown
4.焦点事件
onfocus
onblur
5.页面加载事件
onload
注意:
js中添加事件的第一种方式:是在html上直接使用属性进行添加,属性值为所监听执行的函数。
js中的事件只有在当前的html元素上有效 一个html元素可以添加多个不同的事件
一个事件可以监听出发多个函数的监听执行 但是不同的函数要使用:分割
作用:主要是结合js的函数来使用

练习代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js事件机制学习</title>
	
		<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.getElementsByTagName("showdiv1").innerHTML="哈哈";
				alert("我是获取焦点");
				
			}
			function testOnblur(){
				
				alert("我是失去焦点");
				
			}
			
			function testOnload(){
				
				alert("我是页面加载事件");
				
			}
			
			
			
		</script>
		
		
		<style type="text/css">
			#showdiv1{
				width: 300px;
				height: 300px;
				border: solid 1px;
			}
		</style>
	</head>
	<body onload="testOnload()">
		<hr />
		<input type="button" name="" id="" value="测试单击" onclick="testOnclick();" />
		<input type="button" name="" id="" value="测试双击" ondblclick="testondblclick();" />
		<hr />
		
		<div id = "showdiv1" onmouseout="testOnmouseout();" onmousemove="testOnmousemove();" onmouseover="testOnmouseover();">
		</div>
		
		<hr />
		<input type="text" name="" id="" value="" onkeyup="testOnkeyup();" onkeydown="testOnkeydown();"/>
		
		<hr />
		<input type="text" name="" id="" value="" onfocus="testOnfocus();" />
		<input type="text" name="" id="" value="" onblur="testOnblur();" />
		
	</body>
</html>

6.给合适的html标签添加适合的事件
onchange ---- select下拉框
onload----body标签
单双击----用户进行点击的html元素
鼠标事件----用户进行鼠标移动操作的
键盘事件—用户进行键盘操作的html元素
7.给html元素添加多个事件时,小心事件冲突
例如单击和双击 当事件的触发条件包含相同部分时候 会产生事件之间的冲突问题
8.事件阻断
当事件所监听的返回值返回给事件时
false 则阻断
true 继续
9.超链接调用js函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js的事件机制学习2</title>
		<script type="text/javascript">
		//值改变事件
			function testOnchange(){
				alert("我被改变了");
			}
			
			
			
			function testA(){
				alert("阻断");
				return false;
			}
			
			function testHref(){
				alert("js");
			}
		</script>
	</head>
	<body>
		值改变事件:<input type="text" name="" id="" value="" onchange="testOnchange();" />
		<select name="" onchange="testOnchange();">
			<option value="">北京</option>
			<option value="">上海</option>
			<option value="">广州</option>
		</select>
		事件的阻断:<a href="http://www.baidu.com" target="_blank" id="" onclick="return testA()">百度一下</a>
		超链接调用js函数:<a href="javascript:testHref()">调用js函数</a>
	</body>
</html>

你可能感兴趣的:(前端)