前言

做了这么久的铺垫，终于迎来了新的篇章，该章介绍JS中的事件机制

方法

1.概念

我们知道，JS是参与网页互动的一门脚本语言，之前所说的都是JS的基本概念，那么怎么来进行互动呢！那就需要JS的事件机制来进行控制了，如按钮的点击事件触发JS函数等等

2.常用的事件

1）、单双击事件
单击：onclick 当鼠标单击的时候会触发
双击：ondblclick 当鼠标双击的时候会被触发

范例：按钮元素添加单双击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JS事件</title>
<script type="text/javascript">
	function change(){
		alert("我是一个函数");
	}
</script>
	</head>
	<body>
<input type="button" name="" id="" value="单击事件" onclick="change();" />
<input type="button" name="" id="" value="双击事件" ondblclick="change();" />
	</body>
</html>

2）、鼠标事件
   onmouseover           当鼠标悬停在某个HTML元素上的时候触发
   onmousemove           当鼠标在某个HTML元素上移动的时候触发
   onmouseout           当鼠标在某个HTML元素上移出的时候触发

范例：设置鼠标悬停事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JS事件</title>
<script type="text/javascript">
	function change1(){
		alert("我是红色");
	}
	function change2(){
		alert("我是绿色");
	}
</script>
	</head>
	<body>
<div id="left" style="width: 100px;height: 100px;float: left;background-color: red;" onmouseover="change1();">
	
</div>
<div id="right" style="width: 100px;height: 100px;float: left;background-color: green;" onmouseover="change2();">
	
</div>
	</body>
</html>

3）、键盘事件
onkeyup 当键盘在某个HTML元素上弹起的时候触发
onkeydown 当键盘在某个HTML元素上下压的时候触发

范例：设置按下键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JS事件</title>
<script type="text/javascript">
	function change(){
		alert("按下键盘");
	}
</script>
	</head>
	<body>
用户名：<input type="text" id="" value="" onkeydown="change();"/>
	</body>
</html>

4）、焦点事件
onfocus 当某个HTML元素获取焦点的时候触发
onblur 当某个HTML元素失去焦点的时候触发

范例：设置input文本框失去焦点触发事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JS事件</title>
<script type="text/javascript">
	function change(){
		alert("离开焦点");
	}
</script>
	</head>
	<body>
用户名：<input type="text" id="" value="" onblur="change();"/>
	</body>
</html>

5）、页面加载事件
onload 当页面加载成功后触发。

范例：页面加载成功后获取input文本框的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JS事件</title>
<script type="text/javascript">
	function change(){
		alert(document.getElementById("test").value);
	}
</script>
	</head>
	<body onload="change();">
用户名：<input type="text" id="test" value="张三" />
	</body>
</html>

要点：

js中添加事件的第一种方式：
在HTML上直接使用事件属性进行添加，属性值为所监听执行的函数。
js中的事件只有在当前HTML元素上有效。
一个HTML元素可以添加多个不同的事件。
一个事件可以监听触发多个函数的执行,但是不同的函数要使用分号间隔

3.合适的标签添加合适的事件

我们知道，我们的事件可以添加到html的各个元素上!

但是，我们不能随意的去添加，约定俗成的事件添加规则如下：

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

请读者自行理解我上面说的意思！切身体会JS的事件机制！

JavaScript进阶（一）JS事件机制

前言

方法

猜你喜欢