Explain event handler connection for DOM2 event model

The Eduladder is a community of students, teachers, and programmers just interested to make you pass any exams. So we solve previous year question papers for you.
In eduladder you can Ask,Answer,Listen,Earn and Download Questions and Question papers.
Watch related videos of your favorite subject.
Connect with students from different parts of the world.
Apply or Post Jobs, Courses ,Internships and Volunteering opportunity. For FREE
See Our team
Wondering how we keep quality?
Got unsolved questions? Ask Questions

PROGRAMMING-THE-WEB-10CS73-->View question

Explain event handler connection for DOM2 event model.

Asked (10 Marks) (Jun/July -2015)


Asked On2017-05-15 19:47:03 by:Rajiv

Taged users:


Likes:
Be first to like this question

Dislikes:
Be first to dislike this question
Talk about this  Like  Dislike
View all qusetions
Answers

The DOM 2 model is a modularized interface. One of the DOM 2 modules is Events, which includes several sub-modules. The ones most commonly used are HTMLEvents and MouseEvents. The interfaces and events defined by these modules are as follows

Module :Html event

Event interface:Event

Event type:abort,blur,change,error,focus,load,reset,resize,scroll,select,submit,unload

Module :Mouse event

Event interface:MouseEvent

Event type:click,mousedown,mousemove,mouseout,mouseover,mouseup

EVENT PROPAGATION:

• A browser which understands DOM, on receiving the XHTML document from the server, creates a tree known as document tree.

• The tree constructed consists of elements of the document except the HTML • The root of the document tree is document object itself

• The other elements will form the node of the tree

• In case of DOM2, the node which generates an event is known as target node

 Once the event is generated, it starts the propagation from root node

• During the propagation, if there are any event handlers on any node and if it is enabled then event handler is executed

• The event further propagates and reaches the target node.

• When the event handler reaches the target node, the event handler gets executed

• After this execution, the event is again re-propagated in backward direction

• During this propagation, if there are any event handlers which are enabled, will be executed.

• The propagation of the even from the root node towards the leaf node or the target node is known as capturing phase.

• The execution of the event handler on the target node is known as execution phase.

• This phase is similar to event handling mechanism in DOM – 0

• The propagation of the event from the leaf or from the target node is known as bubbling phase • All events cannot be bubbled for ex: load and unload event

• If user wants to stop the propagation of an event, then stop propagation has to be executed. 

EVENT REGISTRATION:

• In case of DOM2, the events get registered using an API known as addEventListener • The first arg is the eventName. Ex: click, change, blur, focus

• The second arg is the event handler function that has to be executed when there is an event

• The third arg is a Boolean argument that can either take a true or false value

• If the value is true, it means event handler is enabled in capturing phase

• If the event value if off (false), then event handler is enabled at target node

• The addEventListener method will return event object to eventhandler function. The event object can be accessed using the keyword “Event”

• The address of the node that generated event will be stored in current target, which is property of event object

AN EXAMPLE OF THE DOM 2 EVENT MODEL

The next example is a revision of the validator.html document and validator.js script from previous example, which used the DOM 0 event model. Because this version uses the DOM 2 event model, it does not work with IE8. //validator2.html

<html>

<head>

<title>Illustrate form input validation with DOM 2</title>

<script type = "text/javascript" src = "validator2.js">

</script>

</head>

<body>

<h3>enter your details</h3>

<form action="">

<p>

<label>

<input type="text" id="custName"/>

Name(last name, first name, middle initial)

</label>

<br/>

<br>

<label>

<input type="text" id="custPhone"/>Phone (ddd-dddddddd)</label>

<br/><br>

<input type="reset" />

<input type="submit" id="submitButton"/>

</p>

</form>

<script type = "text/javascript" src = "validator2r.js"/>

</body>

</html>

//validator2.js

function chkName(event)

{

var myName = event.currentTarget; var pos = myName.value.search(/^[A-Z][a-z]+, ?[A-Z][a-z]+, ?[A-Z]\.?$/);

if(pos != 0) { alert("The name you entered (" + myName.value + ") is not in the correct form.\n" + "The correct form is: " + "last-name, first-name, middle-initial \n" + "Please go and fix your name");

myName.focus(); myName.select();

} }

function chkPhone(event) { var myPhone = event.currentTarget;

var pos = myPhone.value.search(/^\d{3}-\d{8}$/);

if(pos != 0) { alert("The phone you entered (" + myPhone.value + ") is not in the correct form.\n" + "The correct form is: " + "ddd-dddddddd \n" + "Please go and fix your phone number"); myPhone.focus(); myPhone.select(); } }

//validator2r.js

var c = document.getElementById("custName");

var p = document.getElementById("custPhone"); c.addEventListener("change",chkName,false); p.addEventListener("change",chkPhone,false);


Answerd on:2015-11-21 Answerd By:neenu2

Likes:
Be first to like this answer

Dislikes:
Be first to dislike this answer
Talk about this  Like  Dislike

You might like this video:Network and IP Address
Watch more here

Watch more videos from this user Here

Learn how to upload a video and start earning here

In DOM event model, when an event handler is registerd to a node, the handlerbecomes a method of the object that represent the node. It uses this in the handleras reference to the target node. In DOM 2, it uses the currentTarget property ofEvent, which reference the object the handler is being executed.

Answerd on:2019-08-29 Answerd By:Annaliya

Likes:
Be first to like this answer

Dislikes:
Be first to dislike this answer
Talk about this  Like  Dislike

You might like this video:Network and IP Address
Watch more here

Watch more videos from this user Here

Learn how to upload a video and start earning here



Lets together make the web is a better place

We made eduladder by keeping the ideology of building a supermarket of all the educational material available under one roof. We are doing it with the help of individual contributors like you, interns and employees. So the resources you are looking for can be easily available and accessible also with the freedom of remix reuse and reshare our content under the terms of creative commons license with attribution required close.

You can also contribute to our vision of "Helping student to pass any exams" with these.
Answer a question: You can answer the questions not yet answered in eduladder.How to answer a question
Career: Work or do your internship with us.Work with us
Create a video: You can teach anything and everything each video should be less than five minutes should cover the idea less than five min.How to upload a video on eduladder