Javascript中的事件对象

ゝ一纸荒年。 2022-11-11 13:20 175阅读 0赞

## 1、事件对象 ##

在DOM中发生事件时，所有相关信息都会被收集并存储在一个名为event的对象中。这个对象包含了一些基本信息，比如导致事件的元素、发生的事件类型、可能与特定事件相关的任何其他数据等。

## 2、 DOM事件对象 ##

在DOM合规的浏览器中，**event对象是传给事件处理程序的唯一参数**。不管以DOM0还是DOM2指定事件处理程序，都会传入这个event对象。

### DOM事件对象的属性和方法 ###

*  `currentTarget`：当前事件处理程序所在的元素；`target`：事件目标  
    \*\*在事件处理程序内部，this对象始终等于currentTarget的值，而target只包含事件的实际目标。\*\*如果事件处理程序直接添加到意图的目标，则this、currentTarget和target的值是一样的。如：

let btn = document.getElementById('oBtn')
    btn.onclick = function(event) { 
      console.log(this === event.currentTarget) // true
      console.log(this === event.target) // true
    }

如果click事件的目标不是按钮，而是按钮的父节点，它们的值就不一样了。如：

document.body.onclick = function(event) { 
      console.log(this === event.currentTarget) // true
      console.log(this === event.target) // false
    }

点击按钮后，由于click事件注册在document.body上，在事件冒泡机制下，this和currentTarget的值都是document.body，而target的值指向了按钮本身，这才是click事件的真正目标。

*  `type`：被触发的事件类型

let btn = document.getElementById('oBtn')
    btn.onclick = function(event) { 
      console.log(event.type) // click
    }

*  `preventDefault()`：阻止特定事件的默认动作。如，链接的默认行为就是在被单击时导航到href属性指定的URL。如果想阻止这个导航行为，可以在onclick事件处理程序中取消，如：

let link = document.getElementById('link')
    link.onclick = function(event) { 
      event.preventDefault()
    }

*  `stopPropagation()`：立即阻止事件流在DOM结构中传播，取消后续的事件捕获或冒泡。例如，直接添加到按钮的事件处理程序中调用该方法可以阻止document.body上注册的事件处理程序：

let btn = document.getElementById('oBtn')
    btn.onclick = function(event) { 
      console.log(event.type) // click
      event.stopPropagation()
    }
    document.body.onclick = function (event) { 
      console.log('document.body') // 点击按钮不输出
    }

## 3、IE事件对象 ##

与DOM事件对象不同，IE事件对象可以基于事件处理程序被指定的方式以不同方式来访问。如果事件处理程序是使用DOM0方式指定的，则event对象只是window对象的一个属性。如：

let btn = document.getElementById('oBtn')
    btn.onclick = function(event) { 
      console.log(event === window.event) // true
    }

如果事件处理程序是使用attachEvent()指定的，则event对象会作为唯一的参数传给处理函数：

let btn = document.getElementById('oBtn')
    btn.attachEvent('onclick', function(event) { 
      console.log(event.type) // click
    })

如果是使用HTML属性方式指定的事件处理程序，则event对象同样可通过变量event访问：

<button id="oBtn" onclick="console.log(event.type)">click</button>

### IE事件对象的属性和方法 ###

*  `srcElement`：事件目标，与DOM的target属性相同。由于事件处理程序的作用域取决于指定它的方式，this的值并不总是等于事件目标：

let btn = document.getElementById('oBtn')
    btn.onclick = function() { 
      console.log(window.event.srcElement === this) // true
    }
    btn.attachEvent('onclick', function(event) { 
      console.log(event.srcElement === this) // false
    })

在第一个以DOM0方式指定的事件处理程序中，srcElement属性等于this，而在第二个事件处理程序中，它运行在全局作用域中，两个值不等。

*  `returnValue`：等价于DOM的preventDefault()方法，当把值设置为false时是用于取消给定事件默认的行为。

let link = document.getElementById('link')
    link.onclick = function(event) { 
      event.returnValue = false
    }

*  `cancelBubble`：用途与DOM的stopPropagation()一样，用于阻止事件冒泡，因为IE8及更早版本的不支持捕获阶段，所以只会取消冒泡。stopPropagation()既能取消捕获也能取消冒泡。

let btn = document.getElementById('oBtn')
    btn.onclick = function() { 
      window.event.cancelBubble = true
    }
    document.body.onclick = function() { 
      console.log('body clicked') // 点击按钮不输出
    }

## 4、跨浏览器事件对象 ##

DOM和IE事件对象虽有不同，但足够的相似性为跨浏览器实现提供了方案。可在EventUtil对象中编写以下方法：

let EventUtil = { 
      getEvent: function(event) { 
        return event ? event : window.event
      },
      getTarget: function(event) { 
        return event.target || target.srcElement
      },
      preventDefault: function(event) { 
        if (event.preventDefault){ 
          event.preventDefault()
        }else { 
          event.returnValue = false
        }
      },
      stopPropagation: function(event) { 
        if(event.stopPropagation){ 
          event.stopPropagation()
        }else { 
          event.cancelBubble = true
        }
      }
    }