獲取調用 onclick 函數的元素

Question

我有一個帶有 onclick 屬性的按鈕，它指向函數test() 。

<button onclick="test()">Button 1</button>
<button onclick="test()">Button 2</button>
<button onclick="test()">Button 3</button>

功能測試（）：

function test()
{
    var button_name = this.html;
    console.log("Im button "+ button_name);
}

如何獲取有關單擊按鈕的信息？ 例如，我如何閱讀 html？

jsfiddle ： https ://jsfiddle.net/c2sc9j9e/

Answer 1

將this引用傳遞給函數，然后讀取textContent屬性節點的文本內容。

HTML

<button onclick="test(this)">Button 1</button>

腳本

function test(clickedElement){
   var button_name = clickedElement.textContent;
}

小提琴

Answer 2

四個選項：

1. this傳遞給函數。

    <button onclick="test(this)">Button 1</button>

   然后在函數中使用該參數。

2. 使用addEventListener或 jQuery 的on連接處理程序，然后在處理程序中使用this 。

    var buttons = document.querySelectorAll("selector-for-the-buttons"); Array.prototype.forEach.call(buttons, function(btn) { btn.addEventListener("click", handler, false); }); function handler() { // Use `this` here }

   jQuery版本：

    $("selector-for-the-buttons").on("click", function() { // Use `this` here });

3. 在這些按鈕所在的容器上連接一個處理程序，並使用事件對象的target屬性來確定哪個被單擊（但請注意，如果您在button中使用其他元素，則需要先循環到該button ）。

    document.querySelector("selector-for-the-container").addEventListener("click", function(e) { // Use `e.target` here }, false);

   為您處理button內嵌套元素可能性的 jQuery 版本：

    $("selector-for-the-container").on("click", "button", function() { // Use `this` here (note this is different from the DOM version above) });

Answer 3

我在 Vanilla JS 中遇到了另一種非常簡單的方法，所以我在這里發布以供參考：

 function whoami () { var caller = event.target; alert("I'm " + caller.textContent); }

 <button onclick="whoami()">Button 1</button> <button onclick="whoami()">Button 2</button> <button onclick="whoami()">Button 3</button>

我不確定瀏覽器是否支持它，但它至少適用於 Safari、Firefox 和基於 Blink 的瀏覽器。

Answer 4

 function test(button) { var button_name = button.getAttribute('name'); console.log("Im button "+ button_name); }

 <button onclick="test(this)" name="button1">Button 1</button> <button onclick="test(this)" name="button2">Button 2</button> <button onclick="test(this)" name="button3">Button 3</button>

Answer 5

如果你想使用 Jquery，那么你可以在函數中調用 $(this) 對象。

Answer 6

您必須將“this”傳遞給功能

<button onclick="test(this)">1</button>
<button onclick="test(this)">2</button>
<button onclick="test(this)">3</button>

<script>
    function test(t)
    {
        console.log(t);
    }
</script>

Answer 7

這是您的解決方案jsfiddle ，使用 jquery。

<button onclick="test(this)">1</button>
<button onclick="test(this)">2</button>
<button onclick="test(this)">3</button>

<script>
   function test(button)
   {
       var button_name = $(button).html();
       alert("Im button "+ button_name);
   }
</script>

Answer 8

只需將 id 添加到每個按鈕並將其傳遞給您的測試功能

這是工作的jsfiddle

<button onclick="test(this.id)" id="button1">1</button>
<button onclick="test(this.id)" id="button2">2</button>
<button onclick="test(this.id)" id="button3">3</button>

<script>
    function test(id)
    {
        var button_name = id;
        alert("Im button name is : "+ button_name);
        console.log("Im button name is :"+ button_name);
    }
</script>

Answer 9

您想要的是觸發點擊的事件，您可以通過將函數調用指定為 MyFunction(event) 來實現。 例如：

<ul>
 <li onclick="MyFunction(event)">Red</li>
 <li onclick="MyFunction(event)">Orange</li>
 <li onclick="MyFunction(event)">Yellow</li>
</ul>

然后你的Javascript函數可以是：

function MyFunction(ev) {
  // Now you have access to everything in the event
  //- including the triggering element

  var element = ev.srcElement;

}

通過在 onclick 函數調用的規范中省略 (event) 參數，您不會得到它。