javaScript：事件注册与事件监听

小姚学前端

已于 2023-09-13 14:17:31 修改

阅读量737

点赞数 1

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

于 2023-09-13 14:12:44 首次发布

本文链接：https://blog.csdn.net/qq_52799985/article/details/132829657

版权

javascript 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

ie 低版本的事件监听（没有ie浏览器详细操作可以动手试试）

前言

在JavaScript中，可以使用事件注册和事件监听来处理网页上的交互和用户操作。事件注册是指将事件处理函数与特定的事件关联起来，以便在事件触发时执行相应的代码。事件监听是一种更高级的事件处理方式，它能够在同一个元素上同时监听多个事件，并在事件触发时执行相应的处理函数。

事件注册

什么是事件

事件是指在网页上发生的交互或用户操作，比如鼠标点击、键盘输入、页面加载等。通过在事件上注册事件处理函数，可以在事件触发时执行相应的代码逻辑。简单来说：用户和页面交互的行为，称为事件

事件的分类

1.鼠标事件

2.键盘事件

3.表单事件

4.其他事件

本文主要重点介绍JavaScript中的事件注册和事件监听，包括如何将事件处理函数与特定事件相关联以及如何使用事件监听来处理交互和用户操作。事件的分类和细节将在下一篇文章中进行讲述。

事件的注册方式（绑定方式）（重点）

1.行间注册（基本不使用）

行间注册：使用标签的onclick 等属性，直接绑定函数或者表达式方法是： on+事件名 = "fun()" 行间添加事件几乎不使用，目前主要研究js中的on绑定。

示例

<body>
    <div class="wp" onclick="alert('坐地日行八万里')">1</div>
    <div class="wp" onclick="show()">2</div>   <!--  show()是函数 -->
    <div class="wp" id="wp">3</div> 
</body>
</html>
<script>
function show(){
    alert('恰同学少年')
}
</script>

2.使用js注册(最常用必会)

使用js注册

方法

1.元素.on+事件名 = function(){}

2.事件监听

示例

<body>
   <div class="wp" id="wp">3</div> 
</body>
</html>
<script>
let wp = document.querySelector('#wp');
wp.onclick = function(){
    alert('粪土当年万户侯')
}
</script>

注意：

如果给wp添加两个事件，那么下面的事件会覆盖上面的事件，点击wp对应的div是只会执行写在下面事件。

3.js中的on绑定特点

1.同一个事件只能绑定一个执行函数，如果绑定多个，则后面会覆盖前面

2.如果要取消绑定事件，可以给绑定事件赋值null，用来取消对应的执行函数

1.示例

<body>
   <div class="wp" id="wp">3</div> 
</body>
</html>
<script>
let wp = document.querySelector('#wp');
wp.onclick = function(){
    alert('粪土当年万户侯') //不执行，被下面的覆盖
}
wp.onclick = function(){
    alert('不可沽名学霸王')  //此时给wp写了两个点击事件，只执行下面的点击事件
};
</script>

2.示例（取消绑定事件）

<body>
   <div class="wp" id="wp">3</div> 
</body>
</html>
<script>
wp.onclick = function(){
    alert('不可沽名学霸王')
    wp.onclick = null;  //点击一次后取消
};
// //取消点击事件
// wp.onclick = null;
</script>

事件监听

给元素添加事件的监听（标准浏览器）

方法

给元素添加事件的监听

obj.addEventListener() obj是作用对象

参数1：需要监听的事件名

参数2：事件执行函数

参数3：是一个boolean值，默认是false，含义是设置该事件是冒泡的阶段执行还是

在事件捕获的阶段执行，false 是在事件冒泡的阶段执行，true是事件捕获的阶段执行

示例

 let wp = document.querySelector('#wp')
    wp.addEventListener('click',function(){
           alert('才')
    });

特点

1.可以对当前元素的该事件进行多次绑定执行函数，且每一个执行函数都会执行

2.ie8以下不支持

注意

addEventListener（）绑定的是函数体，不要在后面添加（）因为会立即被调用，如下
wp.addEventListener('click',show());  //在这里show不用加（），（）代表立即执行
    //绑定的是函数体，不要在后面添加（）因为会立即被调用
    // wp.onclick = show;
    function show(){
        alert('餐厅人真多')
    }
当绑定的函数体后面加（）后，会不经过点击事件立即执行。

取消事件监听（标准浏览器）

obj.removeEventListener()

他的参数必须跟 addEventListener 参数一致，才能取消掉对应的事件执行函数

如果第二个参数是匿名函数的话，则无法移除该执行函数

代码演示

//点击取消show事件监听
  let del = document.querySelector('#del')
  del.onclick = function(){
    wp.removeEventListener('click',show);
  }

ie 低版本的事件监听（没有ie浏览器详细操作可以动手试试）

obj.attachEvent()

参数1：on+事件名

参数2：事件执行函数

wp.attachEvent('onclick',function(){

alert('中午吃啥')

})

移除事件监听

detachEvent(参数1，参数2)

参数必须和attachEvent（）一一对应

小姚学前端

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javaScript：事件注册与事件监听

在JavaScript中，可以使用事件注册和事件监听来处理网页上的交互和用户操作。事件注册是指将事件处理函数与特定的事件关联起来，以便在事件触发时执行相应的代码。事件监听是一种更高级的事件处理方式，它能够在同一个元素上同时监听多个事件，并在事件触发时执行相应的处理函数。
复制链接

扫一扫