JavaScript事件的用法（附带实例）

HTML 事件是发生在 HTML 元素上的“事情”，是浏览器或用户做的某些事情。

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。常见事件如下表所示：

表：常见事件
事件	说明	事件发生的时间
onclick	鼠标单击事件	当用户单击某个对象时触发事件
ondblclick	鼠标双击事件	当用户双击某个对象时触发事件
onchange	改变事件	域的内容发生改变时触发事件
onblur	失去焦点事件	元素失去焦点时触发事件
onfocus	获得焦点事件	元素获得焦点时触发事件
onload	加载完成事件	文档加载完成后触发事件，并且能够为该事件注册事件处理函数
onsubmit	表单提交事件	单击“确认”按钮或者表单被提交时触发事件
onkeydown	某个键盘按键被按下时触发事件
onkeyup	某个键盘按键被松开时触发事件
onmousedown	鼠标按钮被按下时触发事件
onmouseup	鼠标按钮被松开时触发事件
onmouseout	鼠标从某元素移开时触发事件
onmouseover	鼠标移到某元素之上时触发事件
onmousemove	鼠标被移动时触发事件

事件绑定的方式分为普通函数方式和匿名函数方式两种，普通函数方式通过设置标签属性值的方式实现，匿名函数方式借助 function 函数实现。

普通函数方式：

<标签 事件属性="js 代码，调用函数"></标签>

匿名函数方式：

<script>
    标签对象.事件属性 = function() {
        //执行一段代码
    }
</script>

下面介绍几种常见事件的应用。

JavaScript单击事件

创建两个 button 按钮，分别使用普通函数方式和匿名函数方式给按钮绑定单击事件，实现每单击一次按钮就会弹出警告框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单击事件</title>
</head>
<body>
    <input type="button" value="按钮 1" onclick="fn1()">
    <input type="button" value="按钮 2" id="btn">
    <script>
        //当单击的时候要调用的函数
        function fn1() {
            console.log("通过普通函数方式绑定的单击事件");
        }
        //给另外一个按钮，绑定单击事件
        //1.先根据 id 获取标签
        var btn = document.getElementById("btn");
        //2.设置 btn 的 onclick 属性（绑定事件）
        //绑定匿名函数
        btn.onclick = function () {
            console.log("通过匿名函数方式绑定的单击事件");
        }
    </script>
</body>
</html>

运行代码查看页面效果，如下图所示：

图 2 单击“按钮1”的页面效果

单击“按钮2”，查看控制台，如下图所示：

图 3 单击“按钮2”的页面效果

JavaScript 焦点事件

焦点事件包括获得焦点事件和失去焦点事件。下面分别演示这两者，创建输入框，给输入框设置获得和失去焦点事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点事件</title>
</head>
<body>
输入框：<input type="text" id="ipt" onfocus="fun01()" onblur="fun02()">
<script>
    function fun01() {
        console.log("获取焦点了...")
    }
    function fun02() {
        console.log("失去焦点了...")
    }
</script>
</body>
</html>

运行代码查看页面效果，如下图所示：

图 4 焦点事件的页面效果

当光标在输入框里面时触发获得焦点事件，如下图所示，输入“123”，查看控制台。

图 5 获得焦点事件的页面效果

当光标从输入框移开时触发失去焦点事件，如下图所示，查看控制台。

图 6 失去焦点事件的页面效果

JavaScript内容改变事件

创建下拉框并为其设置 onchange 事件。当下拉框里的城市信息发生改变时便会触发该事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange 事件</title>
</head>
<body>
    <!--内容改变 (onchange)-->
    <select onchange="changeCity(this)">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="sz">深圳</option>
    </select>
    <!--当下拉框里的城市发生改变时触发该事件-->
    <script>
        function changeCity(obj) {
           console.log("城市改变了，当前为"+obj.value);
       }
    </script>
</body>
</html>

运行代码查看页面效果，如下图所示：

图 7 onchange事件的页面效果

当城市从“北京”改为“上海”时查看控制台，如下图所示：

图 8 改变下拉框的城市信息后的页面效果

其他事件和上述介绍事件操作方式一致。

JavaScript事件的用法（附带实例）

JavaScript单击事件

JavaScript 焦点事件

JavaScript内容改变事件

相关文章