我无法让我的 JavaScript 事件监听器正常工作答案

【问题标题】：I can't get my JavaScript eventlistener to work properly我无法让我的 JavaScript 事件监听器正常工作
【发布时间】：2010-03-02 11:02:51
【问题描述】：

这让我很困惑，我尝试了很多不同的东西，但我无法让它发挥作用。任何人都可以帮忙吗？无论我尝试什么，我都无法触发链接上的点击事件监听器。该代码位于greasemonkey 脚本中。我相信我必须使用闭包方法才能引用greasemonkey脚本中的函数dropit，因为它不适用于页面上的代码。

dropit = function (e) {
  e.preventDefault();
  alert(e.target.textContent);
}

document.getElementById('newlink').addEventListener('click',
         function (e){
                   return function (){
                     dropit(e);
                   }
                 }(),false);

【问题讨论】：

document.getElementById('newlink').addEventListener('click', dropit, false ) 有什么问题；
因为dropit函数是greasemonkey脚本中的代码，在点击事件发生时，页面元素将无法访问greasemonkey代码

标签： javascript scope greasemonkey closures event-listener

【解决方案1】：

你必须让你的 Greasemonkey 脚本写代码到页面中一个新的<script> 标签中。完成后，您的页内事件处理程序设置可以正常进行。至少，这是我所知道的唯一方法。

【讨论】：

【解决方案2】：

<a id='mylink' href='http://www.google.com'>google</a> the link 

<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script>
YUI().use('event', function(Y){

  Y.one('#mylink').on('click', function(e){
    e.halt();
    alert(this.get('href'));  
  });
}); 
</script>

【讨论】：

我不想使用 YUI

【解决方案3】：

这里是非 YUI 版本

<a id='mylink' href='#'>google</a> the link 

<script>

(function(){
  var dropit = function (e) {
    e.preventDefault();
    alert(e.target.textContent);
  }

  document.getElementById('mylink').addEventListener('click', dropit, false);
}());
</script>

【讨论】：

【解决方案4】：

e 必须传递给 addEventListener 中的第二个函数，而不是第一个。像这样：

dropit = function (e) {
  e.preventDefault();
  alert(e.target.textContent);
}

document.getElementById('newlink').addEventListener('click',
         function (e){
                   return function (e){
                     dropit(e);
                   }
                 }(e),false);

【讨论】：

我试过了，不幸的是它不起作用:(当它尝试添加事件监听器时，我收到错误“e未定义”
那是因为这个答案是错误的，即使它没有错，它也不会起作用。如果在 Greasemonkey 代码中定义了“dropit”函数，它将永远不可见。