javascript - 如何在不将事件监听器放在 HTML 标签中的情况下获取事件目标/this？

Question

我不太喜欢将事件监听器(特别是本例中的 onclick)放入 HTML 中，主要是因为我无法使用

$(document).ready(function(){})

我更愿意定义按钮' onclick正如我在 startup 中评论的那样功能。然而，this当我将监听器放入脚本中时，它并不引用单击的按钮(我猜测是因为它不“知道”我单击了哪个按钮)。我尝试过设置 event作为 showImage 的参数函数，并找到e.target在里面，但这也不起作用。有没有办法可以在不使用 onclick 的情况下引用单击的按钮HTML 标签内？

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

body {background-color: #EFEFEF;}
#content {width: 80%; margin: auto; background-color: white; padding: 15px; font-family: "Century Gothic",sans-serif;}
img {height: 250px; border: solid 1px black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<img id="pig" src="http://www.igjerstad.no/sites/default/files/styles/nodeimage/public/field/image/gris-750-5.jpg?itok=TJa-iUVg">
<img id="cow" src="https://www.matmerk.no/cms/images/3675/1200/1200/ku-nyt-norge.jpeg">
<img id="sheep" src="https://media.timeout.com/images/103778879/630/472/image.jpg">
<img id="hen" src="http://africahitz.com/wp-content/uploads/2017/01/hen-white-and-black-color.jpg">
<br>
<button value="pig" onclick="showImage(this)">Gris</button>
<button value="cow" onclick="showImage(this)">Ku</button>
<button value="sheep" onclick="showImage(this)">Sau</button>
<button value="hen" onclick="showImage(this)">Høne</button>

提前致谢!

PS。我猜想其他人也遇到过这个问题并且可能在这里问过。我确实检查过是否可以在网站上找到类似的问题，但一无所获。但是，我之前没能找到它，所以如果这是重复的，我很抱歉。

PS2。我的代码中的图像不是我的，我也没有它们的权利。请不要起诉我':D

PS3(!!)。我不是一个经验丰富的程序员，我的术语可能在某些地方是错误的。请随时纠正我:)

Answer 1

首先，您需要在点击函数中定义 function()，因此它应该如下所示:

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

而不是这个:

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

在按钮中调用 this 时，它将引用该按钮，如果我正确理解您的代码，则该图像是隐藏的，因此如果那是按钮，那么您无法单击隐藏的图像，如果您使用单独的按钮来隐藏图像，那么在点击函数中您需要将 e 声明为图像元素。

要使用this，您还需要将其称为$(this)，而不仅仅是this。