Categories > Coding > Javascript >

Javascript event handling

Posts: 14

Threads: 8

Joined: Mar, 2023

Reputation: 0

Posted

So, while practising, I came across a code for event handling. The code is as follows:

 

//This generic event handler creates an object called eventHandler
var etHandler = {};

if (document.addEventListener) {

    //eventHandler object has two methods added to it, add()and remove(),
    etHandler.add = function(element, eventType, eventFunction) {

        /**
         * The add method in each model determines whether the event type is a load event, meaning that
         *  the function needs to be executed on page load.
         */
        if (eventType == "load") {

            .......

        }
    };// end of eventHandler.add = function()

    etHandler.remove = function(element, eventType, eventFunction) {

        element.detachEvent("on" + eventype, eventFunction);

    }; //end of  etHandler.remove = function()
}

function sendAlert() {

    alert("Hello");

} //end of sendAlert()

function startTimer() {

    var timerID = window.setTimeout(sendAlert,3200);

}//end of startTimer()

var mainBody = document.getElementById("mainBody");

etHandler.add(mainBody, "load", function() {

                                startTimer();

                            }
             );

These are the questions I'd like to pose. We start with an empty object. etHandler is a variable that should be set to;. It's all right. The condition if (document.addEventListener) is then checked.

var etHandler = {

    add: function() {

    },

    remove: function(){

    }
};

Despite the fact that no event listeners were added to the document, this condition is met. Why does this condition return true? etHandler.add = function(element, eventType, eventFunction) follows. Why are we creating etHandler.add? When we built the etHandler object, it had no properties. It's an empty object. If we construct etHandler in this manner,

After that, we can write etHandler.add. The same question applies to etHandler.remove.

 

 

  • 0

Thank you

yvneEnvy

<><><<>>><<>

Posts: 307

Threads: 47

Joined: Mar, 2023

Reputation: 3

Replied

look at me hector LOOK AT ME

Comments

Zayn 9 Reputation

Commented

@yvneEnvy :anrgy: bell *ding* *ding* *ding* *ding* *ding*

  • 0

  • 0

Posts: 8

Threads: 0

Joined: Apr, 2023

Reputation: 0

Replied

Spend some time playing. I'm interested in finding out more because I have strong views about it. Would you please provide more details to your blog post? We will all actually gain from it. stumble guys

 

Comments

TERIHAX 32 Reputation

Commented

ty for the link, i will now use this on school computers

  • 0

  • 0

Posts: 2

Threads: 0

Joined: Jul, 2023

Reputation: 0

Replied

The condition if (document.addEventListener) checks if the addEventListener method is available in the document object. The addEventListener method is used to attach an event listener to an element. If the method is available, it means that the browser supports the W3C DOM standard for event handling, and the code inside the if block will be executed.

In this case, since the condition returns true, it implies that the addEventListener method is supported by the browser. Therefore, the code proceeds to define the add and remove methods on the etHandler object.

The purpose of creating the etHandler.add method is to provide a generic way of adding event handlers to elements. It takes three parameters: element (the target element to attach the event listener to), eventType (the type of event to listen for), and eventFunction (the function to be executed when the event occurs). This method allows you to add event listeners dynamically by calling etHandler.add(element, eventType, eventFunction).

Similarly, the etHandler.remove method is created to remove event handlers from elements. It uses the detachEvent method (for older versions of Internet Explorer) to detach the event handler.

By creating these methods on the etHandler object, you can manage event handling in a modular and reusable way, irrespective of whether the browser supports the modern addEventListener method or the older detachEvent method.

  • 0

Added

I found answer to your question here, in the future you can do it on your own. Hope you'll find it helpful!

  • 0

Users viewing this thread:

( Members: 0, Guests: 1, Total: 1 )