Javascript 如何在不将事件侦听器放入HTML标记的情况下获取事件目标/this？

我不太喜欢把我的事件监听器放在HTML中，主要是因为我不能使用

$document.readyfunction{}

我更愿意定义按钮的onclick，因为我已经在启动函数中对其进行了注释。但是，当我将侦听器放入我猜测的脚本中时，这并不是指单击的按钮，因为它不知道我单击了哪个按钮。我尝试将event设置为showImage函数的一个参数，并在其中查找e.target，但这也不起作用。有没有一种方法可以引用单击的按钮，而不必在HTML标记中使用onclick

//$document.readyfunction{ window.onload=启动； 功能启动{ $img.hide； //$button.clickshowImagethis； } 函数showImagee{ 选择的var=e.值； $+已选择。fadeIn500； $'img:not'+选中+.hide； } //}; 正文{背景色：EFEFEF；} 内容{宽度：80%；边距：自动；背景色：白色；填充：15px；字体系列：世纪哥特式，无衬线；} img{高度：250px；边框：实心1px黑色；} 格里斯 库 苏

---

Høne首先，您需要在单击函数中定义函数，因此它应该如下所示：

    $("button").click(function() {
        //code to execute here
    });

与此相反：

    $("button").click(//code to execute here);

当在按钮中调用此按钮时，它将引用该按钮，如果我正确理解您的代码，则图像是隐藏的。因此，如果该按钮是隐藏的，则您不能单击隐藏的图像。如果您使用单独的按钮隐藏图像，则在单击功能中，您需要将e声明为图像元素

要使用它，您还需要将其命名为$this，而不仅仅是this。

这将在事件处理程序中设置为event.currentTarget。如果您使用的是jQuery，则可以通过执行$this从中生成jQuery对象。因此，要获得该值，您可以执行以下操作：

var chosen = $(this).prop('value');

我还向按钮添加了一个类myclass，以使用$'.myclass'进行选择，这样就可以将其与页面中其他可能的按钮分开。您也可以使用$'button'来选择所有按钮，而不考虑类

更新

刚刚看到您注释掉的代码：

$("button").click(showImage(this)); // When a button is clicked
 // call the function returned by showImage(this).. err it doesnt return 
 // a function so it fails.

您应该向单击事件注册传递函数引用或函数名。类似。单击ShowImage而不进行任何函数调用。在代码中，它将执行showImagethis并将返回的值绑定到事件侦听器，这显然会失败

实际上应该是：

$("button").click(showImage); // when a button is clicked
 // call the function showImage with this=<clicked button> and param=event

正文{背景色：EFEFEF；} 内容{宽度：80%；边距：自动；背景色：白色；填充：15px；字体系列：世纪哥特式，无衬线；} img{高度：250px；边框：实心1px黑色；} 格里斯 库 苏 Høne这应该有效

//$(document).ready(function() {
  window.onload = startup(); 
  function startup() {
   console.log("window loaded");
    $("img").hide();
    $("button").click(function() {showImage(this)});
  }
  function showImage(e) {
    console.log("onside eras");
    var chosen = e.value;
    $('#' + chosen).fadeIn(500);
    $('img:not(#' + chosen + ')').hide();
  }   
//});

---

$'button'。单击时，函数e{e.preventDefault；var selectedImage=$this；showImageselectedImage；}；或者类似的that@Stender按钮类型=按钮不需要e.preventDefault。这将使答案有点道理cleaner@JasperSeinhorst这并不是一个真正的答案：这只是我的第一个想法，就像一个符咒，非常感谢！重要的是你要理解你所面临的潜在问题，所以我将在这里陈述显而易见的问题。您所展示的示例在设置事件处理程序时正确执行该函数。Harry给出的示例定义了一个函数，但在附加事件处理程序的过程中没有执行它。这就是它成功的原因。单击按钮后，您需要传递对要使用的函数的引用，而不是在创建事件处理程序的过程中执行该函数。嗯，仅使用该函数对我来说是有效的。不应该吗？那很聪明，谢谢你：