以下2个JavaScript语句中发生了什么？

Question

imgMonsterRun.onload = handleImageLoad;
imgMonsterRUn.onerror = handleImageError;

什么是handleImageLoad和handleImageError？

它们是变量，方法还是对象？

如果它们是对象，那么在调用该对象时该对象将以什么方式运行？

Answer 1

一些背景

imgMonsterRun是（我们假设）一个图像对象。在某些时候，它指定了src，指向要从中加载图像的位置。当您指定src时，浏览器会开始加载图片，但您可以继续使用该程序的其余部分。

但是，某些程序可能希望在图像加载之后执行某些操作，或者可能是在加载图像时发生错误。

为此，您使用事件处理程序。 “事件”描述了发生的事情，例如正在加载的图像或发生错误。事件处理程序是函数，当事件触发（“发生”）时会被调用。

<小时/>

您的代码

将事件处理程序附加到图像的load事件（imgMonsterRun作为示例）的一种方法是使用：

imgMonsterRun.onload = handleImageLoad;

预计

handleImageLoad将成为一种功能。例如，您可以定义：

function handleImageLoad() {
    console.log("Image loaded!");
}

这将记录“图像已加载！”当onload事件触发时（可能是在图像imgMonsterRun完成加载时）。

---

更多细节

在JavaScript中，函数是第一类对象。这意味着它们可以被传递和处理，就像它们是“普通”对象一样。

因此，当您将handleImageLoad分配给imgMonsterRun.onload时，imgMonsterRun.onload()实际上等同于handleImageLoad()。

---

试试吧！

要掌握这个概念，请尝试这样的事情：

function foo() {
    alert("Hi! I'm foo.");
}

var bar = foo; // The "reference" to the `foo` function is now assigned to `bar`.
// `bar` is now a function, too.

bar(); // This will alert "Hi! I'm foo."

Answer 2

他们是什么

它们是功能。它们被称为处理程序，因为它们处理特定事件，例如load或change。请注意，有些浏览器会使用onload或onchange而不是更简单的表单。

是什么让他们与众不同

根据定义，事件处理程序是异步的。换句话说，它们可以“随时发生”。例如，如果图像快速加载，则几乎会立即调用load事件处理程序。或者，如果存在网络错误，则load事件可能永远不会发生。

此外，这非常重要，事件处理程序会收到一个event对象作为其第一个参数。该对象包含有关该事件的大量有价值信息。我已经更新了小提琴，所以你可以看到它。

它们用于什么

在发生其他一些行动之前，我们通常不希望发生任何事情。例如，我们不希望在加载图像之前将图像的位图复制到画布中，或者在点击链接之前将图像复制到图像中。

为什么这个例子是坏形式

通常，此表单已弃用。有经验的JavaScript开发人员通常更喜欢为这些事件附加侦听器，而不是分配单个处理程序。这提供了更大的灵活性，并防止“加载”，“点击”，“更改”或其他处理程序被代码中的其他位置意外破坏（例如替换）。

试试吧！

这是一个小提琴，展示了如何执行此操作：http://jsfiddle.net/2em7T/14/

以下是如何将多个处理程序附加到事件

这是小提琴的代码：

// BEGIN x-browser utility /addListener/
// Supports IE8 with alternate function name
//  
var addListener = (function () {
  var add_fn_str, prefix_str, add_listener;

  add_listener = function ( dom_el, event_type, func ) { 
    if ( ! add_fn_str ) { 
      if ( dom_el.addEventListener ) { 
        prefix_str = '';
        add_fn_str = 'addEventListener';
      }   
      else if ( dom_el.attachEvent ) { 
        prefix_str = 'on';
        add_fn_str = 'attachEvent';
      }   
      else {
        console.warn( '_error_', '_no_means_to_add_listeners_' );
        return false;
      }   
    }

    dom_el[ add_fn_str ]( prefix_str + event_type, func );
    return true;
  };  

  return add_listener;
}());
// END x-browser utility /addListener/

var imgMonsterRun = new Image();
var handleImageLoad = function ( event) { 
  console.log( 'foo', event ); 
};
var handleImageLoad2 = function ( event ) { 
  document.body.appendChild( imgMonsterRun );
  console.log( event );
};                         

addListener( imgMonsterRun, 'load', handleImageLoad  ); 
addListener( imgMonsterRun, 'load', handleImageLoad2 );  

imgMonsterRun.src = 'http://www.tmlcustomgifts.com/1TML_Logo_2_12.jpg';

如何运作

加载ImgMonsterRun图像元素源后，一个处理程序将“foo”记录到控制台，第二个处理程序将图像附加到正文。请注意，您可以使用此方法添加尽可能多的侦听器图像的负载，这非常方便。

总结

所以你有：一个解释，以及首选的实施方法：）