JavaScript介绍——事件

最新推荐文章于 2023-11-18 09:20:01 发布

momo不吃辣

最新推荐文章于 2023-11-18 09:20:01 发布

阅读量397

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_54645034/article/details/126402797

版权

本文详细介绍了JavaScript中的几个主要事件，包括onclick（鼠标单击）、onmouseover（鼠标经过）和onmouseout（鼠标移开）事件。通过实例展示了如何在网页中使用这些事件来实现动态交互，如按钮点击执行计算、鼠标移到按钮上显示提示信息等。

摘要由CSDN通过智能技术生成

什么是事件？

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

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

主要事件表：

事件	说明
onclick	鼠标单击事件
onmouseover	鼠标经过事件
onmouseout	鼠标移开事件
onchange	文本框内容改变事件
onselect	文本框内容被选中事件
onfocus	光标聚集
onblur	光标离开
onload	网页导入
onunload	关闭网页

鼠标单击事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    function add2(){
        var numa,numb,sum;
        numa=6;
        numb=4;
        sum=numa+numb;
        document.write("两数和为"+sum);
    }
</script>
<body>
    <form action="">
        <input type="button" name="button" value="点击提交" onclick="add2()"/>
    </form>
</body>
</html>

鼠标经过事件

鼠标经过事件，当鼠标移到一个对象上时，对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

现实鼠标经过“确定”按钮时，触发事件，调用info（），弹出消息框，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    function message(){
     
    }
</script>
<body>
    <form action="">
       密码： <input type="password" name="password" />
             <input name="确定" type="button" value="确定"/>
    </form>
</body>
</html>

鼠标移开事件

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

把鼠标移动到“登录”按钮上，然后再移开时，触发事件，调用message（），代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    function message(){
    alert（"请选择，您现在的职业");
    }
</script>
<body>
请选择你的职业：<br/>
    <form action="">
        <select name="career">
        <option>教师</option>
        <option>学生</option>
        <option>工程师</option>
        <option>演员</option>
    </form>
</body>
</html>