JavaScript 触发点击

在JavaScript编程过程中，通常会面临一些情况，我们可以在单击按钮时创建任何功能。例如，在自动化测试网页或站点的过程中，我们可能需要检查一些更多的功能。在这种情况下，JavaScript的触发点击事件技术将更可靠和高效地应对所述挑战。

在这个背景下，我们将学习JavaScript中触发点击事件的过程。

我们如何在JavaScript中触发点击事件

我们需要应用以下技术来触发JavaScript中的点击事件：

a) click()方法

b) addEventListener()和dispathEvent方法

现在，我们将使用上述方法进行演示：

方法1

使用JavaScript中的点击事件方法触发点击事件

在所提及的元素上，使用 click方法 执行操作。通过创建按钮、获取其id并触发点击事件来使用用户定义的函数，可以实现此方法。

为了进一步阐明，我们需要通过下面给出的示例：

示例：

在下面的示例中，会创建一个带有id的按钮和点击事件的 “click here” ，以便在其上获取点击事件；

<button type= "button" id= "btn" onclick= "clickEvent()">Click here</button>

通过在javascript中指定它的id，我们必须通过document.getElementById方法来访问创建的按钮。为了执行下一步操作，将调用点击事件。

const get= document.getElementById('btn');
get.click();

最后，当按钮被点击时，我们将定义以这种方式将命名为 “clickEvent()” 的函数打印到控制台，使用click方法。

function clickEvent() {
console.log("now the Click Event is triggered ")
}

从相应代码的上述输出来看，使用自动化方式中的点击方法，我们观察到“点击此处”按钮被点击了。

方法2

通过addEventListener()和dispatchEvent()方法在Javascript中触发点击事件

在Javascript中，这是由Javascript事件目标接口提供的重要方法。

通过这个方法注册了一个事件监听器。当在目标上捕获到指定的事件时，我们将调用配置好的函数。

事件的语法

target.addEventListener( type,listener);
target.addEventListener( type,listener, options);
target.addEventListener(type, listener,useCapture);

语法描述：

• 在上述语法中，有一个参数叫做 $type ，它是一个必填参数。它表示要监视的事件的类型，该参数只接受一个字符串。该参数是大小写敏感的。它支持各种事件，如键盘、点击、数据库、输入等。
• 同样地， $listener 也是一个必填参数。当发生所述类型的事件时，通过该参数作为对象接收有关事件的通知。在JavaScript函数或Eventlistener接口上，应实现该对象。
• 另一方面， $option 是一个可选参数。

示例1：

<button type="button" id="btn" onclick="openBingByMethod()">Open bing </button>
const link = document.getElementById('btn');
link.addEventListener('click', e => {});
for(let i = 0; i < 5; i++) {
link.dispatchEvent(new Event('click'));
}
function openGoogleByMethod() {
console.log("The required event is triggered")
}

输出：

"The required event is triggered".
"The required event is triggered".
"The required event is triggered".
"The required event is triggered".
"The required event is triggered".

示例2：

在这个示例中，首先，我们将包含一个带有相应id的按钮，同时还包含一个与之前相同的onclick事件和值。

<button type= "button" id= "btn" onclick= "clickEvent()">Click here</button>

之后，借助 addEventListener() 方法，我们将检索按钮并点击其中的事件，以指定其参数中的 “e” ，它引用了点击事件对象。

const get = document.getElementById('btn');
get.addEventListener('click', e => {});
get.dispatchEvent(new Event('click'));

最后，与前一种方法相同，我们将定义点击事件，在点击事件触发时在其中显示相应的消息。

function clickEvent() {
console.log("The required event is triggered ")
}