CODEWITHSUNDEEP
javascriptdom
user11764873
user11764873

Reputation: 65

I do not understand Using addEventListener javascript

Hello am really stuck on getting more information on addEventListener can someone please point me to the right direction, I will like to get some more information on what type of argument can be passed into a function parameter is their a website or a link that i can view for all available javascript function and tell me what a parameter takes. in the below eg eventOne.addEventListener() is called however this code taken else where and am unsure why the argument are passed into the parameter and why a function with no name given

var eventOne = document.querySelector("h1")

eventOne.addEventListener("mouseover", function () {
    eventOne.textContent = 'mouse over'
})

Upvotes: 1

Views: 170

Answers (2)

javascwipt
javascwipt

Reputation: 1178

Anytime you interact with a browser window an event fires. The addEventListener method listens for any event you tell it to. The idea behind this method is basically you telling your browser: Hey, when this thing happens to this element, please execute this code.

Here is a link to all the events you can listen for.

The addEventListener method takes two arguments:

The first argument is the event you want to listen for. The code example listening for a mouseover event. According to the events reference this event fires off when a pointing device is moved onto the element that has the listener attached or onto one of its children.

The second argument is a callback function. This is the function that will execute when that event fires off on that DOM element.

Here is a more common example:

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

You can use this tactic to implement logic into your code when certain events happen. It is very powerful.

Upvotes: 1

Mike Robinson
Mike Robinson

Reputation: 8945

Let me briefly try to explain ... before I ask you to simply "google it" and start reading.

"When things happen," such as when the mouse-pointer moves over something, an "event" is sent to the thing that it happened to ... and it "bubbles up" from there. Of course you cannot predict when these events will happen, but you can "listen" for them.

When an event is "listened to," what happens is that the specified function() will be called at that time, with various optional parameters. (Furthermore, there's some additional "JavaScript voodoo magic" that can happen -- Google the term, "closure.")

So, when the mouse passes over this object, the specified function will be called at that time, and it will change the textContent as shown.

Now ... "off to Google-land!" There are literally thousands of articles on the Internet which explain this much better than I did. (May I recommend: "w3schools.com." There, you can actually "try things out!")

Upvotes: 0

Related Questions