Event Handling Issues (Javascript)

Question

Event Handling Issues (Javascript)

OK, so I have a couple, which might turn out to be too ordinary questions for this forum regarding unobtrusive event handling.

As I understand it, a properly configured document will look something like this:

<html>
<head>
<title>Title</title>
<script src="jsfile.js" type="text/javascript></script>
</head>
<body>

//Body content, like some form elements in my case

</body>
</html>

Jsfile.js will look something like this:

function a() {
//code;
}
function b()...

window.addEventListener('load', a, false);
document.getElementById("id").addEventListener('click', b, false);
document.myForm.typeSel.addEventListener('change', c, false);

//or to use better browser-compatible code...

function addEvent(obj,evt,fn) {
 if (obj.addEventListener)
   obj.addEventListener(evt,fn,false);
 else if (obj.attachEvent)
   obj.attachEvent('on'+evt,fn);
}
addEvent(window, 'load', a);
addEvent(document.getElementById('id'), 'click', b);
addEvent(document.myForm.typeSel, 'change', c);

, javascript, . ... , . , getElementById () getElementById , . loadEvents(), onload, addEvent() , . , , .

, addEvent , , ...

<input type="checkbox" id="test" />
<script type="text/javascript>
document.getElementById("test").onclick = func;
</script>

... . , , !

, : , "element.addEventListener('click', func, false)", "addEvent (, 'click', func)" "element.onclick = func" - script , ? getElementById ?

, - ?

+3

javascript-events

David 23 . '10 0:20

3

, window.addEventListener , document.getEle...().addEventListener : window , , id="abc" .

, . , script head - - , <div id="abc">...</div> . , ,

<div id="test">Blah</div>
<script type="text/javascript">document.getElementById("test").style.color = "red";</script>

, :

<script type="text/javascript">document.getElementById("test").style.color = "red";</script>
<div id="test">Blah</div>

.

. :

( </body>)

, ( ).

, ? , DOMContentLoaded. , , DOM JavaScript.

window.addEventListener("DOMContentLoaded", function() {
    //here you can safely use document.getElementById("...") etc.
}, false);

, DOMContentLoaded , , ... Google anwser. . , addEventListener IE. ... , ... ... - Google. IE, . (, Opera Firefox) W3C, IE - - Google - .

addEventListener , . .

PS. , Load . . Load . , . DOMContentLoaded.;)

EDIT: ... - , - , jQuery, , .

+1

Crozin 23 . '10 1:15

jQuery?
javascript- .
, , - js , , DOM ( ), ready().
, click\change jQuery :), .
jQuery, .

, , , API .

0

kfiroo Jan 23 '10 at 1:15

source share

Roland Bouman · Accepted Answer · 2010-01-23T00:49:59+0000

< > <script> <head>. , ajax, <script> , , , . , <script> , . , , - . . YAHOO : http://developer.yahoo.com/performance/rules.html

, , , , - , , , , . , :

document.getElementById("id").addEventListener('click', b, false);

, id="id" . , <script> , , ( lement id="id", , script , html DOM.

script , , . , . , :

//cross browser add event handler 
function addEventHandler(obj,evt,fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt,fn,false);
    } else if (obj.attachEvent) {
        obj.attachEvent('on'+evt,fn);
    }
}
addEventHandler(document, 'load', function(){
    //set up all handlers after loading the document
    addEventHandler(document.getElementById('id'), 'click', b);
    addEventHandler(document.myForm.typeSel, 'change', c);
});

.

Event Handling Issues (Javascript)

More articles: