JavaScript事件的功能
Today in this story we will see about the functions of Event Listener in JavaScript. The addEventListener() method is used to setup called function when an specified event happens. So we will discuss briefly how to implement addEventListener() method in your code.
今天，在这个故事中，我们将了解JavaScript中事件的功能。 当发⽣指定事件时， addEventListener()⽅法⽤于设置调⽤的函数。因此，我们将简要讨论如何在您的代码中实现addEventListener()⽅法。
事件和事件处理程序的功能 (Functions of Event and Event handlers)
Events are nothing but it is an action which manipulates the page in the browser when the user performs any operations in it. They plays a vital role because they cause elements of webpages to change dynamically.
事件不过是什么，它是当⽤户在浏览器中执⾏任何操作时在浏览器中操纵页⾯的动作。 它们起着⾄关重要的作⽤，因为它们使⽹页的元素动态变化。
Let’s see an example so that you will understand.
让我们看⼀个例⼦，以便您理解。
The load event occurs when the browser finishes loading the document.
当浏览器完成⽂档加载时，发⽣加载事件。
The click event occurs when the user clicks the button in the webpage.
当⽤户单击⽹页中的按钮时，将发⽣单击事件。
There are many event can be happen either once or multiple times. You may not know exactly when an event will happen, especially when an user is generated.
有很多事件可以发⽣⼀次或多次。 您可能不确切知道事件何时发⽣，尤其是在⽣成⽤户时。
The addEventListener() method provides an event handler in JavaScript. This can be attached to the HTML element. You can able to attached more than one event handler in JavaScript.
addEventListener()⽅法在JavaScript中提供了⼀个事件处理程序。 可以将其附加到HTML元素。 您可以在JavaScript中附加多个事件处理程序。
addEventListener()语法 (addEventListener() Syntax)
The syntax for addEventListener() is:
addEventListener()的语法为：
target.addEventListener(event, function, useCapture)
target- it is used to add your event handler to the HTML element. It is a part of Document Object Model (DOM).
target-⽤于将事件处理程序添加到HTML元素。 它是⽂档对象模型(DOM)的⼀部分。
event- it is a string which is used to specify the name of the event. We already seen this in load and click event.
event-它是⼀个字符串，⽤于指定事件的名称。 我们已经在加载和点击事件中看到了这⼀点。
function- it is a function used to run when the event is detected. This is main reason your webpages changes
dynamically.
函数 -它是⽤于在检测到事件时运⾏的函数。 这是您的⽹页动态更改的主要原因。
useCapture- it is a optional boolean (true or false) value used to specify whether the event is executed in the phase. This value determines which values has to executed first in nested HTML element. By default it set to false that means the innermost HTML element is executed first.
useCapture-这是⼀个可选的布尔值(true或false)，⽤于指定事件是否在阶段中执⾏。 此值确定在嵌套HTML元素中必须⾸先执⾏哪些值。 默认情况下，将其设置为false意味着最⾥⾯HTML元素⾸先被执⾏。
addEventListener()⽰例 (addEventListener () Example)
Let’s see an example for addEventListener() method in action.
如何启用javascript功能让我们来看⼀个使⽤addEventListener()⽅法的⽰例。
let button = document.querySelector('#button');
let msg = document.querySelector('#message');
button.addEventListener('click', ()=>{
le('reveal');
})
We have already discussed about the syntax for the addEventListener() method before.
之前我们已经讨论过addEventListener()⽅法的语法。
target- HTML element with id=’button’.
target -id ='button'HTML元素。
function- it is used to setup the function that reveals or hide the message.
功能 -⽤于设置显⽰或隐藏消息的功能。
useCapture- left to default value is false.
useCapture-保留为默认值是false。
We can able to reveal or hide the message by adding or removing a CSS class “reveal” which is used to changes the message elements visibility.
我们可以通过添加或删除CSS类“ reveal”来显⽰或隐藏消息，该类⽤于更改消息元素的可见性。
You can also able to customise this function in your code. You can also able to rename the anonymous function with your own named function.
您也可以在代码中⾃定义此功能。 您还可以使⽤⾃⼰的命名函数来重命名匿名函数。
传递事件作为参数 (Passing Event as a Parameter)
Sometimes we want to know more information about the event when it was clicked. For that we have to pass an event parameter to our function.
有时，我们希望在单击事件时了解有关事件的更多信息。 为此，我们必须将事件参数传递给函数。
Let’s see an example how we can implement this.
让我们看⼀个例⼦，我们如何实现它。
button.addEventListener('click', (e)=>{
console.log(e.target.id)
})
From the above example, the event parameter is a variable named e bit it can easily called anything else such as event. This is a parameter of an object contains various information about the event such as target id.
从上⾯的⽰例中，事件参数是⼀个名为e bit的变量，它可以轻松地调⽤其他任何东西，例如事件。 这是⼀个对象的参数，包含有关事件的各种信息，例如⽬标ID。
You don’t have to add any special function. JavaScript itself automatically know what to do when you pass parameter in the function.
您不必添加任何特殊功能。 当您在函数中传递参数时，JavaScript本⾝会⾃动知道该怎么做。
删除事件处理程序 (Removing Event Handlers)
For some reasons you don’t want an event handler to activate, then removes it by following code.
由于某些原因，您不希望激活事件处理程序，然后通过以下代码将其删除。
The parameters are the same as addEventListener().
参数与addEventListener()相同。
结论 (Conclusion)
I hope you enjoyed a lot and find something new today. The best way to get better in event handlers is to practice more and apply this concept in your projects.
希望您今天过得愉快，并到新的东西。 在事件处理程序中变得更好的最好⽅法是练习更多并将这种概念应⽤到项⽬中。
Have fun and thanks for reading!
玩得开⼼，感谢您的阅读！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。