跨浏览器脚本编码指南第2部分：事件规范化-优快云博客

规范JavaScript中的事件触发器

对于那些懒得跟上最新JavaScript版本标准的人来说，这足够了：

elem.onmouseup = SomeFunction;

但是，该方法有很多限制。

每个事件触发器仅一个功能
无法控制冒泡/捕捉
动态添加和删除事件需要创建和删除对象
老了

正确的，现代的处理事件触发器的方法是以下方法：

addEventListener，removeEventListener
attachEvent，detachEvent

您会发现有两种不同的方式，对吗？这是因为，微软再次决定将自己的方法强加给我们。从概念上讲，这些功能对完全相同，但实际上却没有。 Microsoft的方式（attachEvent / detachEvent）不允许您控制

是否要捕获事件。

有两种不同的方法可以做到这一点，这意味着我们需要知道浏览器支持哪种方法才能知道使用哪种方法。您可以使用if语句检查浏览器是否支持addEventListener或attachEvent来执行此操作，但是您可能会遇到如此多的事件触发器，这将是不切实际的。因此，我编写了两个函数为您完成此操作：

/**
*   Add an event listener to an object
*   @param      object
*   @param      evt         event
*   @param      func            function
*   @param      capture
*   @return     boolean
*/
function AddEvent(object, evt, func, capture)
{
    if(typeof func != 'function')
    {
        return false;
    }
    if(object.addEventListener)
    {
        object.addEventListener(evt, func, capture);
        return true;
    }
    else if(object.attachEvent)
    {
        object.attachEvent('on' + evt, func);
        return true;
    }
    return false;
} 
/**
*   Removes an event listener
*   @param      object
*   @param      evt         event
*   @param      func            function
*   @param      capture
*   @return     boolean
*/
function RemoveEvent(object, evt, func, capture)
{
    if(typeof func != 'function')
    {
        return false;
    }
    if(object.removeEventListener)
    {
        object.removeEventListener(evt, func, capture);
        return true;
    }
    else if(object.detachEvent)
    {
        object.detachEvent('on' + evt, func);
        return true;
    }
    return false;
}

使用方法如下：

AddEvent(elem, 'mouseup', SomeFunction, false);
RemoveEvent(elem, 'mouseup', SomeFunction, false);

第一个参数是将事件侦听器添加到的元素
第二个参数是事件的名称（不带 “ on”）
第三个参数是函数（带括号的实际函数对象）
最后一个参数是布尔值，询问确定是否捕获事件

这将简化您的代码。您唯一需要注意的是，即使将last参数设置为true，它也会在Internet Explorer中冒泡而不是捕获，因此您仍然必须进行冒泡编码。那些是休息。

如果这些方法都不可用，这些函数将返回false，但是所有现代浏览器都至少支持其中一种方法，因此可以放心地忽略它。

您应该将这两个事件都保存在所有脚本中使用的全局JavaScript文件中，以简化事件处理。

原始资料：

标准化JavaScript中的事件触发器标准化JavaScript中的 事件对象

就像几乎所有值得在JavaScript中使用的东西一样，Microsoft的Event对象和标准Event对象也不相同。因此，我们需要规范化Event对象才能使用它。

对于那些不熟悉的人

JavaScript的Event对象，无论您做什么，它们都会自动发送到作为第一个参数附加到事件触发器的Function对象。

Event对象具有许多不同的属性，其中许多与跨浏览器不兼容。差异包括：

layerX / layerY和offsetX / offsetY
relatedTarget和fromElement / toElement
目标和srcElement
keyCode和charCode

因此，我编写了一个函数，分别将所有这些都标准化为以下变量：

offsetX / offsetY
relatedTarget
src
键

当然，您可以根据需要在follow函数中更改变量的名称。这样，您就可以使用事件对象，而不必担心跨浏览器问题。

/**
*   Gets an event with all needed properties
*   @param      e           event
*   @return     event object
*/
function GetEvent(e)
{
    if(!e)
    {
        e               = window.event;
    } 
    if(e.layerX)
    {
        e.offsetX       = e.layerX;
        e.offsetY       = e.layerY;
    } 
    if(e.type == 'mouseover' && !e.relatedTarget)
    {
        e.relatedTarget     = e.fromElement;
    }
    else if(e.type == 'mouseout' && !e.relatedTarget)
    {
        e.relatedTarget     = e.toElement;
    } 
    e.src               = e.srcElement || e.target;
    e.key               = e.keyCode || e.charCode; 
    return e;
}

使用方法如下：

function HandleEvent(e)
{
    // Normalize the event
    e = GetEvent(e); 
    // Do stuff with the event object
}

现在，您可以通过实际更改要在浏览器之间标准化的事件对象来简化事件处理代码。您应该将这个函数放在所有脚本中都包含的文件中。

原始资料：

在JavaScript中标准化事件对象

From: https://bytes.com/topic/javascript/insights/741435-guide-coding-cross-browser-scripts-part-2-event-normalization