Question

我发现这个函数用于在Chart.js库中添加一个事件;

addEvent = helpers.addEvent = function(node, eventType, method){
   if (node.addEventListener){
      node.addEventListener(eventType, method);
   } else if (node.attachEvent){
      node.attachEvent("on"+eventType, method);
   } else {
      node["on"+eventType] = method;
   }
}

我很难理解这个功能的作用。特别是，第一个if语句评估的条件是什么，为什么使用它很重要？

if (node.addEventListener)

Answer 1

if (node.addEventListener)正在检查是否在对象上定义了函数addEventListener。如果不是，它会检查处理事件的其他替代方法。大多数浏览器（Chrome，Firefox，Safari）都使用了addEventListener，但旧版本的IE使用了attachEvent。你有可能在一个既不具备的古老浏览器上，这就是为什么还有其他选项。

Answer 2

当您在JavaScript中评估if语句中的某些内容时，它会将表达式中的任何内容转换为布尔值并对其进行求值。评估if (node.addEventListener){之类的内容时，您将获得以下两种情况之一：如果node元素具有addEventListener属性，则会将该属性评估为true 。如果没有，它将返回undefined，其将评估为false。

这种类型的行为在Polyfill方法中经常使用，这些方法旨在提供跨浏览器兼容的方法来完成某些标准行为，即使在可能不支持标准方法的浏览器中也是如此。这种类型的跨浏览器方法将使用这样的条件来确定给定浏览器是否具有运行所需功能的各种方式，并选择相应的方式来相应地实现目标。所以你发布的功能，我们这样做：

addEvent = helpers.addEvent = function(node,eventType,method){
    // if node element has addEventListener method
    if (node.addEventListener){
        // add the listener using that method
        node.addEventListener(eventType,method);
    // otherwise, if node element element has attachEvent method
    } else if (node.attachEvent){
        // create the listener using the attachEvent method
        node.attachEvent("on"+eventType, method);
    } else {
        // otherwise use onEventType (i.e. onClick, etc), if no other methods are present
        node["on"+eventType] = method;
    }
}

正如Felix Kling在评论中指出的那样，你可以进入奇怪的破坏案例：例如，如果一个对象有一个属性但该属性保存值false（或其他一些表达式，其值为false），即使属性存在，也可以使if语句无法按预期执行。因此，使用格式if(typeof object.property != "undefined") {而不仅仅是if(object.property) {更安全。前者是一种更安全的检查，它将专门确定是否定义了属性，而不管其定义为什么。

Answer 3

node是一个Object，它可能是一个DOM元素，也可能是某个类的实例

var myNode = new ClassConstructor();

eventType是一个字符串。例如，可以点击＆＃39;，＆＃39;加载＆＃39;进展＆＃39;等等。让我们说出它的点击。

method应该是一个功能。它可能像

一样简单

var myMethod = function(event) {
    console.log('called event',event);
};

我们说我们打电话

addEvent(myNode, 'click',myMethod);

让我们看看会发生什么：

        // if object node has an 'addEventListener' method
        if (myNode.addEventListener){
            // then I use it to bind myMethod to the 'click' event
            myNode.addEventListener('click',myMethod);
        // object node might have an 'attachEvent' method
        } else if (myNode.attachEvent){
            // again, I use it to bing myMethod to the 'click' event
            myNode.attachEvent("onclick", myMethod);
        } else {
            // I'll declare an 'onclick' method and attach it to my object
            myNode.onclick = myMethod;
        }

为什么在JavaScript中有一个带有函数的if语句

3 个答案: