JavaScript（十一）事件的绑定

最新推荐文章于 2022-03-28 23:19:38 发布

We_jia

最新推荐文章于 2022-03-28 23:19:38 发布

阅读量464

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：事件绑定事件监听

本文链接：https://blog.youkuaiyun.com/We_jia/article/details/85342224

JavaScript 专栏收录该内容

39 篇文章

订阅专栏

本文深入解析JavaScript中事件绑定的三种核心方法：直接在DOM元素上绑定、在JavaScript代码中绑定及使用事件监听函数。探讨了不同场景下各种绑定方式的应用，并通过实例展示了addEventListener和removeEventListener的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。

在JavaScript中，有三种常用的绑定事件的方法：

在DOM元素中直接绑定；
在JavaScript代码中绑定；
绑定事件监听函数。

一、在DOM元素中直接绑定

这里的DOM元素，可以理解为HTML标签。JavaScript支持在标签中直接绑定事件

语法：事件名称="函数";
其中：

事件名称。例如，鼠标单击事件 onclick ，鼠标双击事件 ondouble，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
一般是函数。处理事件的JavaScript代码

案例：单击一个按钮，弹出警告框的代码有如下两种写法。

1.原生函数

<button onclick="alert('你点我！')">按钮</button>

2.自定义函数

<button onclick="btn()">按钮</button>
<script type="text/javascript">
    function btn (){
        alert("你点我");
    }
</script>

二. 在JavaScript代码中绑定

在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。

语法：

elementObject.事件名称=function(){
// 事件处理代码
}

elementObject为DOM对象，即DOM元素。

案例：

（1）为 class="btn" 的按钮绑定一个事件，显示它的 type 属性：

<input class="btn" type="button" value="我是一个按钮"/>
<script type="text/javascript ">
    var btn = document.getElementsByClassName ("btn")[0];   //集合属性
    btn.onclick = function () {
        alert(this.getAttribute("type"));
        /* this 指当前发生事件的HTML元素，这里是<div>标签-->*/
    }
</script>

注意：getElementsByClassName 获取出来的对象是集合类型，也可以说是数组类型，所以在这个例子中我们必须加上[0];原因是js里面不能进行隐式迭代（不能操作一堆）。而用id获取事件就是唯一的。

（2）为 id="btn" 的按钮绑定一个事件，显示它的 type 属性：

<input  id="btn"  type="button"  value="点击我，显示 你好！" />
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
alert(this.getAttribute("type"));
}
</script>

三. 绑定事件监听函数

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

addEventListener()函数语法：

elementObject.addEventListener(eventName,handle,useCapture);

参数	说明
elementObject	DOM对象（即DOM元素）。
eventName	事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。
handle	事件句柄函数，即用来处理事件的函数。
useCapture	Boolean类型，是否使用捕获，一般用false 。这里涉及到JavaScript事件流的概念，后续章节将会详细讲解。

attachEvent()函数语法：
elementObject.attachEvent(eventName,handle);

参数	说明
elementObject	DOM对象（即DOM元素）。
eventName	事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
handle	事件句柄函数，即用来处理事件的函数。

注意：事件句柄函数是指“ 函数名 ”，不能带小括号。

addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。

案例：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> 绑定事件 </title>
    <script>
        window.onload=function(){    //窗体加载完成事件
//            获取元素
            var btnlist=document.getElementsByClassName ("btnlist");
            for(var i=0;i<btnlist.length;i++) {
                //添加事件监听
                btnlist [i].addEventListener("click", function () {   //内部函数
                    alert("添加事件监听");})
            }
        }
    </script>
</head>
<body>
<button class="btnlist">按钮</button>
<button class="btnlist">按钮</button>
<button class="btnlist">按钮</button>
<button class="btnlist">按钮</button>
<button class="btnlist">按钮</button>
</body>
</html>

移除监听事件 removeEventListener方法

document.removeEventListener() 方法用于移除由 document.addEventListener() 方法添加的事件句柄。

注意: 如果要移除事件句柄，addEventListener() 的执行函数必须使用外部函数，如上实例所示 (btnsave)。

匿名函数，类似 "document.removeEventListener("event", function(){ alert("添加事件监听");});" 该事件是无法移除的。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> 绑定事件 </title>
    <script>
        window.onload=function(){
//            获取元素
            var btnlist=document.getElementsByClassName ("btnlist");
            for(var i=0;i<btnlist.length;i++) {
                //添加事件监听
                btnlist [i].addEventListener("click",btnsave);
                function btnsave () {
                   alert("添加事件监听");
                    this.removeEventListener("click",btnsave);
                    // 事件在页面初始化的时候  已经初始化完成  也就是说for已经执行完毕  i已经达到最大值 里面的i就是最大值
                    /*removeEventListener 在移除的时候 addEventListener 里面的内部函数得改成外部函数*/
                    /*this 在事件的回调函数里面指代的是当前事件的执行对象*/

                }
            }
        }
    </script>
</head>
<body>
<button class="btnlist">按钮</button>
<button class="btnlist">按钮</button>
<button class="btnlist">按钮</button>
<button class="btnlist">按钮</button>
<button class="btnlist">按钮</button>
</body>
</html>