时间戳

首页 > 解决方案 > 为什么这个 addEvent 函数不起作用？

javascript - 为什么这个 addEvent 函数不起作用？

问题描述

我是 JS 技术的新手。我以 Javascript 圣经为起点。这本书让我深入了解了 JS 行为，尽管有一些过时的主题和不推荐使用的功能。一个特定的代码块对我不起作用。

老实说，我不知道“这是不推荐使用的功能还是浏览器问题”，我已经在所有资源中搜索了 addEvent 。现在大部分人都用过addEventListener。

我只需要知道区别。我怎么可能修复这个代码？

它返回错误“Uncaught ReferenceError: addEvent is not defined”的原因是什么。我需要在哪里定义这个 addEvent？

// **jsb-23-02.js**

// initialize when the page has loaded
addEvent(window, "load", testValues);
var newElem;
var newText;
var toyGlobal = "Gumby";
var aBoy = "Charlie Brown";
var hisDog = "Snoopy";

function showLocal() {
  var toyLocal = "Pokey";
  return toyLocal;
}

function showGlobal() {
  newElem = document.createElement("div");
  newElem.className = "objProperty";
  newText = document.createTextNode("Global version of hisDog is intact: " +
    hisDog);
  // just picked up a global variable value instead
  // of the local variable in the calling function

  newElem.appendChild(newText);
  placeHolderElement.appendChild(newElem);
}

function testValues() {
  // Dangerous ground here -- declaring a global variable in a function
  placeHolderElement = document.getElementById("placeHolder");
  // Now declare the local variable
  var hisDog = "Gromit"; // initializes local version of "hisDog"
  if (placeHolderElement) {
    newElem = document.createElement("div");
    newElem.className = "objProperty";
    newText = document.createTextNode("aBoy is: " + aBoy);
    // just picked up a global variable value
    newElem.appendChild(newText);
    placeHolderElement.appendChild(newElem);
    newElem = document.createElement("div");
    newElem.className = "objProperty";
    newText = document.createTextNode("His toyGlobal is " + toyGlobal);
    newElem.appendChild(newText);
    // just picked up another global variable value
    placeHolderElement.appendChild(newElem);
    // Do not bother with toyLocal here because it will throw undefined
    newElem = document.createElement("div");
    newElem.className = "objProperty";
    newText = document.createTextNode(
      "toyLocal value returned from the showLocal function is: " +
      showLocal());
    newElem.appendChild(newText);
    placeHolderElement.appendChild(newElem);
    newElem = document.createElement("div");
    newElem.className = "objProperty";
    newText = document.createTextNode("Local version of hisDog is: " + hisDog);
    newElem.appendChild(newText);
    // just picked up another global variable value
    placeHolderElement.appendChild(newElem);
    // now call another function that does not set the variable hisDog
    // and display the value. we’ll see that the global value is intact
    showGlobal();
  }
}
<script type="text/javascript" src="jsb-23-02.js"></script>
<h1>Variable scope</h1>
<div id="placeHolder"></div>

标签： javascripthtml

解决方案

您的代码似乎很可能是从此处的答案之类的内容中复制的，它定义addEvent为一种 DRY 方式来调用（addEventListener如果存在）或调用attachEvent（在 Internet Explorer 中使用的一种非常过时的方法，与 执行相同的操作addEventListener）：

function addEvent(element, eventName, fn) {
    if (element.addEventListener)
        element.addEventListener(eventName, fn, false);
    else if (element.attachEvent)
        element.attachEvent('on' + eventName, fn);
}

像所有非内置函数一样，您需要定义addEvent函数才能调用它。

addEventListener在所有主要浏览器中都可以正常工作，包括 Internet Explorer 9+（2011 年发布；现在只有少数人使用 IE，而那些几乎只使用 IE11 的人。）。我建议完全放弃addEvent，attachEvent只使用addEventListener.

推荐阅读