Events is base for Java script to interact with HTML , Events indicates some type of actions occurs in document or in browser etc,
Dom level 0 Event Handlers
The traditional way of assigning event handlers in Java script is to assign a function to an Event handler property, This was the events handler assignment method introduced in the fourth generation of web browser and still remains in all modern browser due to its simplicity and cross browser support. to assign an event handler to Java script , you must first retrieve a reference to the object to act on , each element has event handler properties the are typically all lowercase , such as onclick , An event handler is assigned by settings the property equal to a function as in this example
<html>
<body>
<div id="myBtn"> Click Here </div>
<script>
var btn = document.getElementById("myBtn");
btn.onclick = function()
{
alert(this.id); //"myBtn"
alert(this.innerHTML);
};
</script>
</body>
</html>
Dom level 2 Event Handler
DOM level 2 Events defines two methods to deal with assignment and removal of Events handlers
addEventListeners() and removeEventListener() . These methods exist on all DOM nodes and accept
three arguments : the event name to handler function and a Boolean value indicating whether to call the event handler during the capture phase (true) or during the bubble phase , Each element has event handler properties that are typically all the lowercase such as onclick, An event handler is assigned by setting the property equal to a function as this example
<html>
<div id="myBtn"> Click Here </div>
<script>
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function()
{
alert(this.id);
}, false);
btn.addEventListener("click", function(){
alert("Hello world!");
}, false);
</script>
</body>
</html>
ps: source: Wrox Professional JavaScriptTM for Web Developers
No comments:
Post a Comment