我不理解使用addEventListener javascript

问题描述 投票:1回答:2

您好不容易获得有关addEventListener的更多信息,有人可以向我指出正确的方向,我想获得有关可以将哪些类型的参数传递给函数参数的更多信息,例如他们的网站或链接,我可以查看所有可用的javascript函数,并告诉我参数需要什么。在下面的示例中,例如,调用了eventOne.addEventListener(),但是该代码在其他地方使用,并且不确定为什么将参数传递给参数以及为什么没有给出名称的函数

var eventOne = document.querySelector("h1")

eventOne.addEventListener("mouseover", function () {
    eventOne.textContent = 'mouse over'
})
javascript dom
2个回答
1
投票

[只要您与浏览器窗口互动,就会触发事件。 addEventListener方法侦听您告诉它的任何事件。该方法背后的思想基本上是告诉浏览器:嘿,当此元素发生此情况时,请执行此代码。

这里是您可以收听的所有事件的link

addEventListener方法采用两个参数:

第一个参数是您要监听的事件。该代码示例侦听mouseover事件。根据引用的事件,当将指针设备移动到已连接侦听器的元素上或其子元素之一上]时,将触发此事件。

第二个参数是回调函数。当该事件在该DOM元素上触发时,将执行此函数。

这是一个更常见的示例:

const heading = document.querySelector('h1');
heading.addEventListener('click', function () {
console.log("I have clicked the h1 tag")
})

当某些事件发生时,您可以使用此策略在代码中实现逻辑。它非常强大。

让我简短地尝试解释一下...,在我要求您简单地“谷歌搜索”并开始阅读之前。

“当事物发生时,例如当鼠标指针移到某物上时,会向发生它的事物发送一个“事件”,然后从那里“冒泡”。当然,您无法预测这些事件何时发生,但是您可以

“听”他们。

事件被“监听”时,发生的情况是,那时将使用各种可选参数调用指定的function()。 (此外,还有其他一些可能会发生的“ JavaScript巫术魔术”-Google术语“ closure。”)

因此,当鼠标移过该对象时,指定的功能将被称为当时],并且它将更改textContent,如图所示。

现在...“前往Google土地!”互联网上确实有数以千计的文章比我解释的要好得多。 (我可以推荐:“ w3schools.com。”在那里,您实际上可以“尝试一下!”)


0
投票

让我简短地尝试解释一下...,在我要求您简单地“谷歌搜索”并开始阅读之前。

© www.soinside.com 2019 - 2024. All rights reserved.