dom事件——下面两个JavaScript语句中发生了什么

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

一些背景

imgMonsterRun是(我们假设)一个图像对象。在某些时候，它指定了一个src，它指向要从哪里加载图像。当您指定src时，浏览器开始加载图像，但允许您继续执行程序的其余部分。

然而，有些程序可能希望在加载完图像后执行某些操作，或者在加载图像时出现错误。

要做到这一点，您可以使用事件处理程序。"事件"描述发生的事情，例如正在加载图像或发生错误。事件处理程序是一个函数，当事件触发 ("happens")时被调用。

---

代码

将事件处理程序附加到图像(以imgMonsterRun为例)的load事件的一种方法是使用:

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."

它们是什么

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

它们的特殊之处

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

而且，这是非常重要的，事件处理程序将接收一个event对象作为它们的第一个参数。这个对象有很多关于事件的有价值的信息。我已经更新了小提琴，所以你可以看到它。

它们的作用

我们通常不希望某件事在其他动作发生之前发生。例如，我们不希望将图像的位图复制到画布中，直到它被加载，或者直到点击链接之后才显示图像。

为什么这个例子是错误的

一般不推荐使用这种形式。经验丰富的JavaScript开发人员通常更喜欢为这些事件附加侦听器，而不是分配单个处理程序。这提供了更大的灵活性，并防止'load'， 'click'， 'change'或其他处理程序在代码的其他地方被意外地破坏(例如替换)。

试一试!

下面是一个演示如何执行此操作的示例: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'被一个处理程序记录到控制台，第二个处理程序将图像附加到主体。请注意，您可以使用这种方法在图像负载中添加任意数量的侦听器，这非常方便。

总结

所以这就是你:一个解释，以及首选的实现方法:)