JavaScript中的三种事件绑定

最新推荐文章于 2024-03-31 09:22:06 发布

梁萌

最新推荐文章于 2024-03-31 09:22:06 发布

阅读量231

点赞数

分类专栏： js/jq 文章标签： JavaScript 事件绑定

本文链接：https://blog.csdn.net/liangmengbk/article/details/84452372

版权

js/jq 专栏收录该内容

57 篇文章 3 订阅

订阅专栏

本文深入讲解JavaScript中的事件绑定方法，包括直接在DOM元素中绑定、在JavaScript代码中绑定及使用addEventListener或attachEvent绑定监听函数。文章通过实例展示了不同绑定方式的特点和应用。

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

1.在DOM元素中直接绑定

这里的DOM可以理解为HTML标签。JavaScript支持在标签中直接绑定元素。这里有两种写法：

原生函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <input type="button" value="事件绑定" onclick="alert('绑定元素属性，原生函数')">
</body>

</html>

自定义函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <input type="button" value="事件绑定" onclick="myclick()">
    <script type="text/javascript">
    function myclick() {
        alert("绑定元素属性，自定义函数")
    }
    </script>
</body>

</html>

把事件绑定到元素属性上有一个优点，即可以把参数传递给事件处理函数。接收事件的元素的引用则由一个特殊的参数值--this 关键字来传递。下面实例演示一个函数借助传入的参数将点击的文本框的内容转换为大写：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <p>点击文本框，文本内容将发生变化</p>
    <input type="text" value="abc" onclick="upper(this)">
    <script type="text/javascript">
    function upper(obj) {
        obj.value = obj.value.toUpperCase(); //将文本框的值转换为大写
    }
    </script>
</body>

</html>

2.在JavaScript代码中绑定

在JavaScript代码中绑定事件可以使JavaScript代码与HTML标签分离，使文档结构更加清晰，便于管理和开发。

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <input type="button" value="按钮" id="btn">
    <script type="text/javascript">
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function() {
        alert("你点击了按钮");
    }
    </script>
</body>

</html>

3.绑定事件监听函数

绑定事件的另一种方法是用addEventListener()或者attachEvent()来绑定事件监听函数。

addEventListener()是标准的绑定事件监听函数的函数，是w3c所支持的。

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div {
        width: 200px;
        height: 200px;
        background-color: red;
    }
    </style>
</head>

<body>
    <p>div的默认背景色为红色，鼠标移入时变为绿色，移出时变回红色，点击box区域弹出警示框</p>
    <div id="box">box</div>
    <script type="text/javascript">
    document.getElementById("box").addEventListener("mouseover", function() {
        this.style.background = "green";
    }, false);
    document.getElementById("box").addEventListener("mouseout", function() {
        this.style.background = "red";
    }, false);
    document.getElementById("box").addEventListener("click", function() {
        alert("你点击了box区域");
    }, false);
    </script>
</body>

</html>

addEventListener()函数的语法：