JavaScript element.addEventListener() Method
You are Here:
JavaScript element.addEventListener() Method
The element.addEventListener() method calls a function whenever the specified event occurs on the specified element.
Example
HTML Online Editor
<!DOCTYPE html>
<html>
<body>
<button>Click Me</button>
<p id="point"></p>
<script>
var x = document.getElementById("point");
var elem = document.getElementsByTagName("button")[0];
elem.addEventListener("click", function(){
x.innerHTML = "You Clicked";
})
</script>
</body>
</html>
Syntax
element.addEventListener(event, function, useCapture)
Parameter Values
| Value | Type | Explanation |
|---|---|---|
| event | Required | A case-sensitive string representing the event type to listen for. |
| function | Required | Specifies the function to run when the event occurs. |
| useCapture | Optional | A Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase. If true, The event handler is executed in the capturing phase. If false, The event handler is executed in the bubbling phase. This is Default behavior. |
More Examples
Example
HTML Online Editor
<!DOCTYPE html>
<html>
<body>
<p>Click, doubleClick, or mouseover on the button, eventlistener is watch your event.</p>
<button>Click Me</button>
<p id="point"></p>
<script>
var x = document.getElementById("point");
var elem = document.getElementsByTagName("button")[0];
elem.addEventListener("click", function(){
x.innerHTML = "You Clicked";
})
elem.addEventListener("mouseover", function(){
x.innerHTML = "You Hovered";
})
elem.addEventListener("dblclick", function(){
x.innerHTML = "You Double Clicked";
})
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 97% of JavaScript Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in JavaScript.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
