Document Add Event Listener in jQuery

Wikitechy | 4903 Views | jquery | 02 Jun 2016

 

  • In jQuery the EventTarget.addEventListener() method registers the specified listener on the EventTarget when it is called .
  • The event target may be an Element in a document, the Document itself, a Window , or any other object that supports events (such as XMLHttpRequest ). 

What is document ready in jQuery?

  • In jQuery, the ready event occurs when the DOM (document object model) has been loaded. 
  • Because this event occurs after the document is ready.
  • It is a good place to have all the other jQuery events and functions. 

Sample Code: 

<!DOCTYPE html> 
<html>
<head>
    <title>

        Wikitechy - body on load event
    </title>
    <script>

        document.addEventListener("DOMContentLoaded", function(event)
        {
            alert("Welcome to WikiTechy Page Load Event`");
        });
    </script>
</head>
<body >
    <button
id="button1" >
        button1
    </button> 
</body>
</html>

Code Explanation:


    Here in this statement we write the function for the addEventListener where the “DOMContentLoaded”  event will be trigger and the alert box display the message “Welcome to wikiTechy Page Load Event”.

Sample Output:


    Here in this output the HTML document is loaded in the browser window as shown here.

    So, the alert box will show the message “welcome to WikiTechy Page Load Event”.




Workshop

Bug Bounty
Webinar

Join our Community

Advertise
<