DOM 2 events

berserkarithmeticInternet και Εφαρμογές Web

14 Δεκ 2013 (πριν από 3 χρόνια και 4 μήνες)

124 εμφανίσεις

JavaS
cript


Page
1
of
6


DOM 2 events


notes
013

Created
12/5/2007

T. Patrick Bailey



DOM 2 events


In DOM 2 the W3C added a new way to handle events it is outlined in
the W3C documents located at
http://ww
w.w3.org/TR/DOM
-
Level
-
2
-
Events/events.html
[1].


A better guide then this one would be
http://www.quirksmode.org/js/events_advanced.html
[2]. But I am still
writing this for my own study and q
uick reference.



One of the drawbacks to the old model of events (which still are
supported) is that you can only have one type of event per element. (ie
you can only have one ‘onclick’ event for the body element). With
the DOM 2 model you can have as
many as you want.


To add an event to an element simply use this form



element.addEventListener(‘eventType’, doFunction, false);





This will add an event of ‘eventType’ (not a real event, I will give a
short list of some of the even types later). Then
when that eventType
occurs for that element the doFunction will run. The false/true part
has to do with bubbling or capturing events (false is bubbling and true
is capturing).

You can add the same type of event to the same element multiple
times.


Ex.



element.addEventListener(‘click’, doFunction, false);

element.addEventListener(‘click’, myFunc, false);





When the element is “clicked” these two events will be called
doFunction and myFunc will be called. But according to the W3C
there is no required
order to run these in so you cannot count that one
was run before the other.



To remove an event listener use the removeEventListener method.


Ex.



element.removeEventListener(‘click’, myFunc, false);



(So basically you need to reverse it)










JavaS
cript


Page
2
of
6


IE7 problems


IE7 does not yet support the W3C event model, hopefully it will in IE8
but don’t hold your breath is the feeling I get. But there is good news
it has its own event model you can use. It uses attachEvent and
detachEvent.


Ex.



element.att
achEvent(‘onclick’, myFunc);

element.detachEvent(‘onclick’, myFunc);



Here you can see that the event name is onclick rather then just click.
I am not sure how they all differ but many examples I have seen seem
to just add “on”.


With this in mind you n
eed to write your code to be cross browser
compatible here is an example.




function setUpEvents(){

var div = document.getElementById("1");


if(div.addEventListener){

div.addEventListener('click', colorMe, false);

div.addEventListener('click', changeWidth, false);

}

else if(div.attachEvent){

div.attachEvent('onclick', colorMe);

div.attachEvent('onclick', changeWidth);

}

}






Here you can see that if addEventListener works
then it uses that
model else it uses the old Microsoft model.




Using “this”


Using the keyword “this” is a great time saver in the DOM 2 event
model. If an event calls a function like myFunc then within that
function you can use “this” to refer to the h
tml tag that handled the
event.


Ex.



function myFunc(){


this.style.backgroundColor=”red”;

}




Any event that calls this will have its tag style set to “red”


However this does not work in Internet Explorer even in IE7. Because
they are goober
heads, why make my life easier as a programmer? Oh
well here is how you handle it…




JavaS
cript


Page
3
of
6


Where I finally found this information was at
http://www.howtocreate.co.uk/tutorials/javascript/domevents
[3]
towards the bottom of the page their write up is far better than mine so
check it out.


Ex.



function myFunc(e){

var theTarget = e.target ? e.target : e.srcElement;

if( theTarget && (
theTarget.nodeType == 3 ||

theTarget.nodeType == 4 ) ) {

theTarget = theTarget.parentNode;

}

theTarget.style.color=”red”;

}




This function has the event e passed into it
and from that event you can
get the tag that caused this event to happen. However there is a little
gotcha nodeType 3 is a TEXT_NODE and nodeType 4 is a
CDATA_SECTION_NODE. So if you happen to have pressed on
one of these just get its parent tag.




Bef
ore I show a working example I created I need to list some events
you can capture. The DOM2 they can all be found at
http://www.w3.org/TR/DOM
-
Level
-
2
-
Events/events
.html#Events
-
eventgroupings

[4]





MouseEvents



click



mousedown



mouseup



mouseover



mousemove



mouseout



MutationEvents



DOMSubtreeModified



DOMNodeInserted



DOMNodeRemoved



DOMNodeRemovedFromDocument



DOMNodeInsertedIntoDocument



DOMAtrrModified



DOMCharacterDataModified


HTMLEvents



Load



Unload



abort



error



select



change



submit



reset



focus



blur



resize



scroll


JavaS
cript


Page
4
of
6


I think that covers most of them for details go to the W3C DOM page.
These only work for addEventListener for attachEvent it seems like
most
of them you just add “on” to the front like onclick, but I have not
been able to find a nice list on what IE7 supports with attachEvent.

















































JavaS
cript


Page
5
of
6


Here is a cross
-
browser working example.



<!DOCTYPE HTML PUBLIC
"
-
//W3C//DTD XHTML 1.0
Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript">

//<![CDATA[


function setUpEvents(){

var div = document.getElementById("1");


if(div.addEventListener){

div.addEventListener('click', colorMe, false);

div.addEventListener('click', changeWidth, false);

}

else if(div.attachEvent){

div.attachEvent('onclick', colorMe);

div.attachEvent('onclick', chan
geWidth);

}

}


function colorMe(e){

var theTarget = e.target ? e.target : e.srcElement;

if( theTarget && ( theTarget.nodeType == 3 || theTarget.nodeType
== 4 ) ) {

theTarget = theTarget.parentNode;

}


if(theTarget.style.background
Color == "blue"){

theTarget.style.backgroundColor="white";

theTarget.style.color="black";

}

else{

theTarget.style.backgroundColor="blue";

theTarget.style.color="white";

}

}


function changeWidth(e){

var theTarget = e.target ? e.target : e.srcElement;

if( theTarget && ( theTarget.nodeType == 3 || theTarget.nodeType
== 4 ) ) {

theTarget = theTarget.parentNode;

}


if(theTarget.style.width == "200px"){

theTarget.style.width =
"300px";

}

else{

theTarget.style.width = "200px";

}

}


//]]>

</script>

</head>

<body onload="setUpEvents();">

<div id="1" style="border:2px solid black;width:200px;height:50px">

Click me!

</div>

</body>

</html>



JavaS
cript


Page
6
of
6


References

[1]
W3C:
Document Object Model Events



http://www.w3.org/TR/DOM
-
Level
-
2
-
Events/events.html
[

Visited 2/2009

[2]
Advanced event registration models
,


http://www.quirksmode.org/js/events_advanced.html

Visited 2/2009

[3]
JavaScript Tutorials DOM events


http://www.howtocreate.co.uk/tut
orials/javascript/domevents


Visited 2
/200
9

[4]
W3C: DOM event grouping



http://www.w3.org/TR/DOM
-
Level
-
2
-
Events/events.html#Events
-
eventgroupings


Visited 2/2009

[5] Wikipedia JavaScript Page


http://en.wikipedia.org/wiki/Javascript

Visited 2/2009

[6] W3C School: JavaScript Tutorial,


http://www.w3schools.com/js/default.asp

Visited 2/2009

[7] Mozilla JavaScript


http://developer.mozilla.org/en/docs/JavaScript


Visited 2/2009

[8] Mark
Wilton
-
Jones
,
JavaScript tutorial
-
DOM objects and methods,



http://www.howtocreate.co.uk/tutorials/javascript/domstructure

1/21/2009,
Visited 8/2008