JavaScript（八）事件

最新推荐文章于 2024-08-01 21:15:26 发布

原创最新推荐文章于 2024-08-01 21:15:26 发布 · 510 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript

本文详细介绍了JavaScript中的各种事件，包括鼠标事件、键盘事件、窗口事件等，以及如何利用这些事件进行网页交互设计。

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。

主要事件

将 js里面的事件简单分为：键盘事件鼠标事件窗口事件移动端的事件（触屏）

事件	描述
click、doubleclick	鼠标单击事件，双击事件
mouseenter	鼠标进入
mouseleave	鼠标离开
mouseover、 mouseout	将鼠标移到元素上，将鼠标移开
mousemove	鼠标移动
mousedown、mouseup	按下鼠标键，松开鼠标键
keydown、keyup、keypress	按下一个键，松开一个键，按下再松开一个键
load	网页导入
unload	关闭网页
focus	光标聚焦
blur	光标离开
contextmenu	单击鼠标右键
change	文本框内容改变
select	文本框内容选中

1.鼠标单击事件（onclick）

onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。

示例：单击按钮，另打开一个网页

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>单击事件 </title>
    <script type="text/javascript">
        function openwin(){
            window.open('https://www.jd.com','_blank','height=600,width=1024,top=0,toolbar=no,left=0,menubar=no,scrollbars=no,status=no');}
//        scrollbars=no 不显示滚动条, resizable = no 不能调整大小, status = no 不显示状态栏, toolbar = no 不显示工具栏, menubar = no 不显示菜单栏
    </script>
</head>
<body>
<form>
    <input name="京东" type="button" value="京东" onclick="openwin()"/>
</form>
</body>
</html>

2.鼠标进入事件（onmouseenter）

鼠标进入事件，当鼠标移到一个对象上时，该对象就触发onmouseenter事件，并执行onmouseenter事件调用的程序。

示例：当鼠标移入到确定按钮时

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 鼠标经过事件 </title>
    <script type="text/javascript">
        function message(){
            confirm("请输入密码后，再单击确定!"); }    //confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
    </script>
</head>
<body>
<form>
    密码:<input name="password" type="password" >
    <input name="确定" type="button" value="确定" mouseenter="message()">   <!--与mouseover类似-->
</form>
</body>
</html>

3.鼠标移开事件

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

示例：鼠标点击时进入淘宝页面，离开时就会弹出一个对话框

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>鼠标移开事件 </title>
    <script type="text/javascript">
        function message(){
            alert("不要移开，点击后有惊喜哦!"); }
    </script>
</head>
<body>
<form>
    <a href="http://www.taobao.com"  onmouseout="message()">点击我</a>
</form>
</body>
</html>

4、光标聚焦事件（onfocus）

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

示例：当光标聚集到选项框时，会出现对话框

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 光标聚焦事件 </title>
    <script type="text/javascript">
        function message(){
            alert("请选择，您现在的职业！");
        }
    </script>
</head>
<body>
请选择您的职业：<br>
<form>
    <select name="career" onfocus="message()">
        <option>学生</option>
        <option>教师</option>
        <option>工程师</option>
        <option>演员</option>
        <option>会计</option>
    </select>
</form>
</body>
</html>

5.失焦事件（onblur）

当网页中的对象失去聚点时，执行onblur调用的程序就会被执行。

示例：填写用户名和密码，在填写用户名后鼠标离开，会弹出对话框

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; 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>

6.内容选中事件

选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> 内容选中事件 </title>
    <script type="text/javascript">
        function message() {
            alert("您触发了选中事件！");
        }
    </script>
</head>
<body>
<form>
    请从下列文字中选出你喜欢的一段话：<br>
    <!-- cols	规定文本区内的可见宽度。 rows	规定文本区内的可见行数。
<textarea> 标签定义多行的文本输入控件。文本区中可容纳无限数量的文本-->
    <textarea name="summary" cols="80" rows="3" onselect="message()">
        安于本分，不求进取，就不可能垒高自己，不可能迈向更高的目标。
        无论是谁都应该相信“世界上没有越不过的高峰，没有办不成的事情”，
        只有垒高自己，有所追求，才能知道大树的挺拔，长江的伟岸，大海的浩瀚……</textarea>
</form>
</body>
</html>

7、文本框内容改变事件（onchange）

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

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

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; 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()">请写入个人简介，不少于200字！</textarea>
</form>
</body>
</html>

8、加载事件（onload）

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

加载页面时，触发onload事件，事件写在<body>标签内。
此时的加载页面，可理解为打开一个新页面时。

示例：当加载一个新页面时，弹出对话框“加载中，请稍等…”点确定以后会出现页面内容

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> 加载事件 </title>
    <script type="text/javascript">
        function message(){
            alert("加载中，请稍等…"); }
    </script>
</head>
<body  onload="message()">
欢迎学习JavaScript。
</body>
</html>

9、卸载事件（onunload)

当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。

注意：不同浏览器对onunload事件支持不同。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> 卸载事件 </title>
    <script type="text/javascript">
        window.onunload = onunload_message;
        function onunload_message(){
            alert("您确定离开该网页吗？");
        }
    </script>
</head>
<body>
我们即将迎来2019！
</body>
</html>

标签

#事件