javaScript：事件注册与事件监听

目录

前言

事件注册

什么是事件

 事件的分类

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

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

示例 

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

示例 

注意： 

3.js中的on绑定特点

1.示例 

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

事件监听

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

方法

示例

特点

注意 

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

代码演示 

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

---

前言

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

事件注册

什么是事件

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

 事件的分类

1.鼠标事件

2.键盘事件

3.表单事件

4.其他事件

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

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

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

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

示例 

    
1
    
2
   
    
3
 

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

使用js注册

   方法

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

   2.事件监听

示例 

   
3
 

注意： 

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

3.js中的on绑定特点

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

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

1.示例 

   
3
 

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

   
3
 

事件监听

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

方法

给元素添加事件的监听

    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（）一一对应