JavaScript中的事件

最新推荐文章于 2023-12-28 16:28:26 发布

Terence_Rain

最新推荐文章于 2023-12-28 16:28:26 发布

阅读量806

点赞数

分类专栏： javascripts 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/ren__wei_/article/details/122331245

版权

javascripts 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章目录

1.单击事件

首先看一个示例：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击事件</title>
</head>
<script type="text/javascript">
    function btnCharge_Click(){
        window.alert("这是一个帅哥！！！");
    }
</script>
<body>
<form name="form1" method="post" action="">
    <input type="button" onclick="btnCharge_Click();" name="btnCharge" value="点我你也是帅哥">
</form>
</body>
</html>

按照一下步骤，可以实现单击事件：

在HTML页面中添加按钮btnCharge，同于引发单击事件
在js代码中定义btnCharge_Click方法，用于事件的执行
在按钮标签中加入事件属性，onclick = “btnCharge_Click();”

那么，单击事件的三个关键点就是：
1.事件源，引发事件的HTML控件
2.事件处理方法，以js函数体现
3.建立事件处理方法之间的关系
除了单击事件，其他事件的处理与单击事件一致。

2.鼠标事件

常用的鼠标事件如下：

onclick 当鼠标点击时触发
onMouseOver 当鼠标悬停与某标签上时触发
onfocus 获得焦点
onblur 失去焦点
onMouseDown 当鼠标按钮按下时触发
onMouseOut 当鼠标按钮从某标签内部移除时触发
onMouseUp 当鼠标按钮松开时触发
onMouseMove 当鼠标移动时触发

3.键盘事件

常用的键盘事件如下：

onKeyDown 当键盘按下时触发
onKeyPress 当键盘被按下后又松开时触发
onKeyUp 当键盘被松开时触发

案例：利用键盘事件，实现文本框过滤输入效果，只能够输入数字。

要实现有选择性接收数字，只需要在键盘被按下时，判断用户输入的字符，如果是数字，则接收输入，反之，则不接收输入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入过滤</title>
</head>
<script type="text/javascript">
    function txtNum(e) {
        // 判断键盘是否为后退键或回车键
        if(e.keyCode == 8 || e.keyCode == 13)
            return true;
        //判断按键是否为0~9数字键
        if(e.keyCode >= 48 && e.keyCode <= 57)
            return true;
        else
            return false;
    }
</script>
<body>
<form name="form1" method = "post" action="">
    <p> 只能输入数字：
    <input onkeydown="return txtNum(event);" name="txtNum" type="text" id="txtNum">
    </p>
</form>
</body>
</html>

在这里插入图片描述

当用户按下按键时，<input>标签就会产生键盘事件onKeyDown，用户输入的字符信息就保存在event变量，调用事件处理方法并将event变量传递过去，通过字符串的ASCII码就可以判断用户输入的是否是数字，如果是数字就返回true。

4.表单事件

常用的表单事件如下：

onFocus 当html控件获得焦点时触发
onBlur 当html控件失去焦点时触发
onChage 当html控件内容改变时触发
onReset 当表单重置时触发
onSubmit 当表单提交时触发
onSelect 当html控件被选择时触发

案例：
创建一个注册页面，要求文本框获得焦点之后实现高亮效果

实现文本框高亮效果，需要借助CSS实现，在文本框获得焦点时，指向高亮样式，在失去焦点时，将样式取消。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本框高亮</title>
    <style type="text/css">
        <!--
        .light{
            background-color: #99FF00;
        }
        -->
    </style>
</head>
<script>
    function txtNum_onFocus(){
        document.form1.txtName.className = "light";
        document.form1.txtName.value = "";
    }
    function txtName_onBlur() {
        document.form1.txtName.className = "";

    }
</script>

<body>
<form name = "form1" method="post" action="">
    <p>请输入姓名：
    <input name="txtName" type="text" onfocus="txtNum_onFocus();" value="请输入用户名">
    </p>
    <p> 请输入密码：
    <input type="password" name="txtPwd">
    </p>
    <p>
    <input type="button" name="Submit" value="注册">
    </p>
</form>
</body>
</html>

在这里插入图片描述

5.窗口事件

常用的窗口事件如下：

onLoad 当HTML文档被载入时触发
onUnload 当HTML文档被关闭时触发

案例：创建一个页面，动态显示当前事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态时间显示</title>
    <style type="text/css">
        <!--
        input{
            border-style: none;
            font-size: 24px;
            color: #339900;
            width: 100%;
        }
        -->
    </style>
</head>
<script type="text/javascript">
    function getNewTime() {
        var d = new Date();
        document.form1.txtTime.value = d.toLocaleString();
        window.setTimeout("getNewTime()", 1000);

    }
</script>
<body onLoad="getNewTime();">
<form name = "form1" method="post" action="">
    <input name="txtTime" type="text" id="txtTime">
</form>
</body>
</html>