如何处理 addEventListener 和 attachEvent 冲突？答案

【问题标题】：How to handle addEventListener and attachEvent conflict?如何处理 addEventListener 和 attachEvent 冲突？
【发布时间】：2017-07-19 10:51:34
【问题描述】：

我正在创建拖放或单击文件上传。我在处理单击和放置之间的差异时遇到了问题，因为一个使用 addEventListener 而另一个使用普通的 javascript 方法。

HTML

<input id="imageLoader" type="file" name="imageLoader">

Javascript：

  var imageLoader = document.getElementById('imageLoader');

  /* console shows : ..change { 
    target: <input#imageLoader>, 
    isTrusted: true, 
    currentTarget: <input#imageLoader>, 
    eventPhas... } 
  */
  imageLoader.addEventListener('change', handleImage, false);

  /* console shows : undefined */
  imageLoader.onchange = function(){
    handleImage();
  };

  function handleImage(e){
    console.log(e);
  }

如何使用其他方式显示与addeventlistener 方法相同的值？

【问题讨论】：

那么，通过匿名函数传递参数怎么样？
或者直接imageLoader.onchange = handleImage;
@Satpal 必须在函数中
addEventListener 是普通的 JavaScript 方法。
@Satpal 因为我必须在运行handleImage函数之前检查它是否是图像，所以之前有一堆代码

标签： javascript html events addeventlistener

【解决方案1】：

事实上addEventListener 接受一个回调函数，你可以在其中调用任何你想要的代码。

因此，您可以创建一个回调函数来调用您的 handleImage 函数，而不是直接将 handleImage 函数作为回调传递。

imageLoader.addEventListener('change', function(e){
     //do whatever you want here
     handleImage()
}, false);

要使用onchange 附加事件，您可以使用相同的方法：

imageLoader.onchange = function(event) { 
    //do whatever you want here
    handleImage(event); 
};

【讨论】：

这达到了OP想要的相反结果。
@Bergi 我的错，我以为他在说addEventListener，但无论如何都是一样的方法