如何使用 click() 通过 id 激活此功能？ (Javascript)

Question

我有点困惑以下是如何工作的？我先post出代码，

html

    <form>
        <input type="text" id="guessInput" placeholder="A0" />
        <input type="button" id="fireButton" value="Fire!" />
    </form>

js

 function handleFireButton(){
    console.log("I am clicked");
}

function init(){
    var fireButton = document.getElementById("fireButton");
    fireButton.onclick = handleFireButton;

    var guessInput = document.getElementById("guessInput");
    guessInput.onkeypress = handleKeyPress;
}


function handleKeyPress(e){
    var fireButton = document.getElementById("fireButton");
    if(e.keyCode === 13){
        fireButton.click();
        return false;
    }
}

window.onload = init;

我的问题是，在其中 init 我可以理解第一部分 fireButton.onclick = handleFireButton; 这样它会在单击时激活该功能，但后半部分是我有点困惑的地方。

我知道什么时候 onkeypress 它会激活传递事件对象的 handleKeyPress 以检查 keyCode === 13 如果是 fireButton.click() 是否会被激活但这里什么也没有提到任何关于激活 handleFireButton() 它怎么知道什么时候 fireButton.click() 它应该去 handleFireButton()?

Answer 1

click() 函数触发点击事件，该事件会被任何相关的事件侦听器接收。它本质上是模拟用户点击元素。

来自MDN：

The HTMLElement.click() method simulates a mouse click on an element.

When click is used with elements that support it (e.g. one of the <input> types listed above), it also fires the element's click event which will bubble up to elements higher up the document tree (or event chain) and fire their click events too. However, bubbling of a click event will not cause an <a> element to initiate navigation as if a real mouse-click had been received.

因此，fireButton.click() 没有直接调用 handleFireButton()，而是生成一个事件，handleFireButton() onclick 事件侦听器正在响应该事件。

Answer 2

这两个地方的 dom 元素相同。您首先将事件处理程序附加到 dom 按钮。现在您正在从 dom 访问同一个按钮。并点击它。由于处理程序已经附加，它正在触发处理程序。

Answer 3

你用的是jquery还是普通的JavaScript？

对于jquery，您可以简单地在点击中调用函数

fireButton.click(funktion(){fireButton handle()})

对于纯 JS 你必须使用 onclick 函数

如何使用 click() 通过 id 激活此功能？ (Javascript)

how is this function being actived through an id by using click()? (Javascript)

javascript

function

click

onclick