JavaScript系列之事件

最新推荐文章于 2023-06-13 14:03:12 发布

_天雨

最新推荐文章于 2023-06-13 14:03:12 发布

阅读量656

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/qq_33369215/article/details/53207290

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

事件是可以被JavaScript侦测到的行为，在网页中每个元素都可以产生可以触发JavaScript函数或程序的事件。

在编写实例代码之前，由于我们的浏览器都有保护模式，由于此模式，导致有一些js代码现象显示不了，请禁止了在运行实例代码

鼠标单击事件（onclick）

onclick是鼠标单击事件，当前网页上单击鼠标时触发的事件，通常和按钮一起使用。

这里点击点击我打开百度按钮，跳转百度首页

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单击事件 </title>
	<script type="text/javascript">
	  function openwin(){
	     window.open('https://www.baidu.com','_blank');}
	</script>
</head>
<body>
	<form>
    <input type="button" value="点击我打开百度" onclick="openwin()"/>
  </form>
</body>
</html>

鼠标经过事件（onmouseover）

鼠标经过事件，当鼠标移动到一个对象上的时候，对象就会触发onmouseover事件。

鼠标移动经过触发鼠标经过事件，

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标经过事件</title>
	<script type="text/javascript">
		function message(){
			confirm("触发鼠标经过事件");
		}
	</script>
</head>
<body>
	<form>
		<input type="button" value="触发鼠标经过事件" onmouseover="message()"/>
	</form>
</body>
</html>

鼠标移开事件（onmouseout）

鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用程序

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标移开事件 </title>
	<script type="text/javascript">
	  function message(){
	    alert("不要移开，移开以后就是会显示百度"); }
	</script>
</head>
<body>
<form>
  <a href="https://www.baidu.com" onmouseout="message()">	不要移开，移开以后就是会显示百度
  </a>
</form>
</body>
</html>

光标聚焦事件（onfocus）

当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> 光标聚焦事件 </title>
	 <script type="text/javascript">
    function message(){
      confirm("在此处请输入你的姓名"); }
</script>
</head>
<body>
       <form>
           <input name="username" type="text" value="输入姓名" onFocus="message()">
    </form> 
</body>
</html>

失焦事件（onBlur）

onBlur事件与onFocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onBlur事件，同时执行被调用的程序。

如下代码, 网页中有用户和密码两个文本框。当前光标在用户文本框内时（即焦点在文本框），在光标离开该文本框后（即失焦时），触发onBlur事件，并调用函数message()。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> 失焦事件 </title>
	<script type="text/javascript">
	  function message(){
	    alert("请确定用户名是否正确，在移开!"); }
	</script>   
</head>
<body>
  <form>
   用户:<input name="username" type="text" value="请输入用户名！" onBlur="message()">
   密码:<input name="password" type="text" value="请输入密码！" >
  </form>
</body>
</html>

内容改变事件（onChange）

通过改变文本框的内容来触发onChange事件，同时执行被调用的程序。

如下代码,当用户将文本框内的文字改变后，弹出对话框“您改变了文本内容！”。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> 文本框内容改变事件 </title>
<script type="text/javascript">
  function message(){
    alert("您改变了文本内容！"); }
</script>   
</head>
<body>
  <form>
  信息：<br>
   <textarea name="summary" cols="60" rows="5" onChange="message()">请写入。。。</textarea>
  </form>
</body>
</html>

注意：是在内容被改变并且失去焦点后触发onChange事件。和onSelect事件是区别，上例中的onSelect事件是被选中后立马触发

页面加载事件（onLoad）

事件会在页面加载完成后立即发生，同时执行被调用的程序。

注意：1. 加载页面时，触发onLoad事件，事件写在<body>标签内。

2. 此节的加载页面，可理解为打开一个新页面时。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> 加载事件 </title>
	<script type="text/javascript">
	  function message(){
	    alert("加载中…"); 
	}
	</script>   
</head>
<body onLoad="message()">
  加载事件
</body>
</html>