JavaScript---event事件处理对象

目录

一、什么是event对象

二、event创建和传递

2.1内联事件处理函数【手动传入】

2.2addEventListener【自动传入】

三、event的常用属性

3.1事件目标相关

3.2事件类型相关

3.3鼠标位置相关

3.4按键相关

四、event常用方法

4.1preventDefault()

4.2stopPropagation()

五、使用event进行事件委托

---

一、什么是event对象

event对象是在事件触发时由浏览器自动创建的一个对象，它封装了与该事件相关的所有信息

当为元素绑定事件处理函数后，一旦相相应的事件触发，浏览器就会自动将这个event对象作为默认参数传递给事件处理函数。

二、event创建和传递

2.1内联事件处理函数【手动传入】

在HTML标签内直接定义事件处理函数时，需要显式地将event作为参数传递事件处理函数

    点击我
    

2.2addEventListener【自动传入】

使用addEventListener方法绑定事件处理函数时，浏览器会自动地将event对象作为第一个参数传递给处理函数

    点击我
    

三、event的常用属性

3.1事件目标相关

• target：指向触发事件的最具体的元素。(例如，在一个列表中点击某个列表项，target就会指向该列表项元素)
• 可以简单理解为，给一个父元素绑定事件处理函数，target指向的是父元素中哪一个子元素

    

        
列表项 1
        
列表项 2
    
    

当点击不同列表项时，打印信息也不同：

• currentTarget：指向绑定事件处理函数的元素。(在上面例子中，无论点击哪一个列表项，currentTarget始终指向
  )
  • 可以简单理解为，currentTarget就是绑定事件处理函数的元素

  
  
  
  
      
  
          
  列表项 1
          
  列表项 2
      
      
  
  
  

  当点击不同列表项时，始终打印：

  

  3.2事件类型相关

  • type：表示事件的类型，如click、mousemove、keydown等

  document.addEventListener('mousemove', function (event) {
      console.log('事件类型:', event.type);
  });

  3.3鼠标位置相关

  • clientX和clientY：表示鼠标点击或移动时相对于浏览器窗口可视区域左上角的坐标

  document.addEventListener('mousemove', function (event) {
      console.log('鼠标位置 (X, Y):', event.clientX, event.clientY);
  });

  • pageX和pageY：表示鼠标点击或移动时相对于整个文档左上角的坐标，考虑了页面滚动的情况

  3.4按键相关

  • type：表示按下的键的字符值，如'a'、'Enter'等

  document.addEventListener('keydown', function (event) {
      console.log('按下的键:', event.key);
  });

  • code：表示按下的键的物理代码，如'keyA'、'Enter'等，它不依赖于键盘布局

  四、event常用方法

  4.1preventDefault()

  用于阻止事件的默认行为。例如，点击链接时，默认会跳转到链接地址，使用preventDefault()可以阻止这种跳转

  
  
  
  
      点击我
      
  
  
  

  4.2stopPropagation()

  用于停止事件冒泡(事件冒泡是指事件从触发的元素开始，依次向上级元素传播)

  
  
  
  
  
      
  
          
  点击我
      
      
  
  
  

  当点击内层元素时，由于调用了stopPropagation()，事件不会再传播到外层元素，因此不会触发外层元素的点击事件处理函数

  此时，只有当点击不同元素时，对应的事件处理函数会正确执行：

  

  五、使用event进行事件委托

  基于event.target属性，可以实现事件委托

  事件委托是指将事件处理函数绑定到一个父元素上，利用事件冒泡机制，当子元素触发事件时，事件会冒泡到父元素，通过判断event.target来确定具体是哪一个子元素触发了事件，从而进行响应处理。

  这样可以减少事件处理函数的绑定数量，提高性能

  
  
  
  
      
  
          
  列表项 1
          
  列表项 2
          
  列表项 3
      
      
  
  
  

  上面代码，只有点击列表项1才会打印对应的信息，否则统一打印其他信息：