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
12 responses to “Assigning event handlers in JavaScript using DOM object property”
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?
Works fine in JSBIN but doesn't work on my domain. Strange… Chrome 67
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 🙁
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 ?
U so explained everything completely
i tried executing this code, but handler1 is getting called .
nice. thx a lot.
Nice video! what if we have multiple buttons and we want to assign them different tasks using DOM object property?
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?
Very nice video. your voice is great for learning. Nice examples
Great! Would be nice to hear about. The stack and the heap ! Most regards from Sweden
nice