• Thursday , 4 June 2020

Assigning event handlers in JavaScript using DOM object property

Code Canyon



Link for all dot net and sql server video tutorial playlists
http://www.youtube.com/user/kudvenkat/playlists

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2015/01/assigning-event-handlers-in-javascript.html

In JavaScript there are several ways to associate an event handler to the event. In Part 36, we discussed, associating event handler methods to events using the attributes of HTML tags. In this video we will discuss using DOM object property to assign event handlers to events.

First let us understand, what is DOM
DOM stands for Document Object Model. When a browser loads a web page, the browser creates a Document Object Model of that page. The HTML DOM is created as a tree of Objects.

Example :
[html] [head] [title]My Page Title[/title] [/head] [body] [script type=”text/javascript”] [/script] [div] [h1]This is browser DOM[/h1] [/div] [/body] [/html]

JavaScript can be used to access and modify these DOM objects and their properties. For example, you can add, modify and remove HTML elements and their attributes. Along the same lines, you can use DOM object properties to assign event handlers to events. We will discuss the DOM object in detail in a later video session.

We will continue with the same examples that we worked with in Part 36. Notice that in this case, we are assigning event handlers using the DOM object properties (onmouseover & onmouseout) instead of using the attributes of the HTML tag. We are using this keyword to reference the current HTML element. In this example “this” references the button control.

[input type=”button” value=”Click me” id=”btn”/] [script type=”text/javascript”] document.getElementById(“btn”).onmouseover = changeColorOnMouseOver;
document.getElementById(“btn”).onmouseout = changeColorOnMouseOut;

function changeColorOnMouseOver()
{
this.style.background = ‘red’;
this.style.color = ‘yellow’;
}

function changeColorOnMouseOut()
{
this.style.background = ‘black’;
this.style.color = ‘white’;
}
[/script]

The following example is same as the above. In this case we are assigning an anonymous function to onmouseover & onmouseout properties.
[input type=”button” value=”Click me” id=”btn” /] [script type=”text/javascript”] document.getElementById(“btn”).onmouseover = function ()
{
this.style.background = ‘red’;
this.style.color = ‘yellow’;
}

document.getElementById(“btn”).onmouseout = function ()
{
this.style.background = ‘black’;
this.style.color = ‘white’;
}
[/script]

If an event handler is assigned using both, i.e an HTML attribute and DOM object property, the handler that is assigned using the DOM object property overwrites the one assigned using HTML attribute. Here is an example.
[input type=”button” value=”Click me” id=”btn” onclick=”clickHandler1()”/] [script type=”text/javascript”] document.getElementById(“btn”).onclick = clickHandler2;

function clickHandler1()
{
alert(“Handler set using HTML attribute”);
}

function clickHandler2()
{
alert(“Handler set using DOM object property”);
}
[/script]

Using this approach you can only assign one event handler method to a given event. The handler that is assigned last wins. In the following example, Handler2() is assigned after Handler1. So Handler2() owerites Handler1().
[input type=”button” value=”Click me” id=”btn”/] [script type=”text/javascript”] document.getElementById(“btn”).onclick = clickHandler1;
document.getElementById(“btn”).onclick = clickHandler2;

function clickHandler1()
{
alert(“Handler 1”);
}

function clickHandler2()
{
alert(“Handler 2”);
}
[/script]
Original source

3d Ocean

Related Posts

12 Comments

  1. Peter Bergmann
    April 21, 2019 at 17:05

    Using the method at 3:30, is it possible utilise parameters in the function? I notice that you wrote "changeColorOnMouseOver" instead of "changeColorOnMouseOver( )"
    Does this mean that I cannot use parameters in my functions?

  2. Beatrix Ducz
    April 21, 2019 at 17:05

    Works fine in JSBIN but doesn't work on my domain. Strange… Chrome 67

  3. Asma Liaquat
    April 21, 2019 at 17:05

    Very well explained..! the problem i am having is that whenever i assign functions/handlers by DOM it doesn't work,,,,,in this case handler1 is called everytime πŸ™

  4. Yeti Rssl
    April 21, 2019 at 17:05

    Why this
    document.getElementById('btn').onmouseover = ChangeColorOnMouseOver
    and not this
    document.getElementById('btn').onmouseover = ChangeColorOnMouseOver() ?

    Why are there no parentheses behind the method ? what if we want to give an controlId as a parameter ?

  5. hanumanthu k
    April 21, 2019 at 17:05

    U so explained everything completely

  6. Siddhi Singhi
    April 21, 2019 at 17:05

    i tried executing this code, but handler1 is getting called .

  7. Yang Wang
    April 21, 2019 at 17:05

    nice. thx a lot.

  8. Ibrohim Bahromov
    April 21, 2019 at 17:05

    Nice video! what if we have multiple buttons and we want to assign them different tasks using DOM object property?

  9. ConaxHGG
    April 21, 2019 at 17:05

    So the reason for 'the handler that is assigned using the DOM object property overwrites the one assigned using HTML attribute' is not because they are assigned using different way, but because even assigned using DOM will always occur after event assigned using HTML. So the latest assigned overwrites all previous assigned. Yes?

  10. Jester2b04
    April 21, 2019 at 17:05

    Very nice video. your voice is great for learning. Nice examples

  11. Peter L
    April 21, 2019 at 17:05

    Great! Would be nice to hear about. The stack and the heap ! Most regards from Sweden

  12. Jitendra Mahapatro
    April 21, 2019 at 17:05

    nice

Leave A Comment

You must be logged in to post a comment.