Tuesday, July 10, 2007

Javascript function context

<html>

<head>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<h1> Test Javascript function context </h1>
<br>

<DIV id="testpad1"> Test Events in a DIV </DIV> <br/>
<DIV id="testpad2"> Test Events in a DIV </DIV> <br/>
<DIV id="testpad3"> Test Events in a DIV </DIV> <br/>
<DIV id="testpad4"> Test Events in a DIV </DIV> <br/>

<script type="text/javascript">
window.x = 'win';
var display = function () {
alert(this.x) ;
}

var obj = new Object();
obj.x = 'obj...';

display(); // dsp 'win'
display.call(obj); // dsp 'obj...'

var pad = $('testpad1'); // assign x property to this element
pad.x = 'pad!';

Event.observe($('testpad1'),"click", display) ; //dsp 'pad!'

Event.observe($('testpad2'),"click", display) ; //dsp 'undefined'

Event.observe($('testpad3'),"click", display.bind(obj)) ; //dsp 'obj...'

//Cannot do this. it does not assign display to testpad4
Event.observe($('testpad4'),"click", display.call(obj)) ;

</script>

</body>
</html>

posted by Toon at 12:28 PM

0 Comments:

Post a Comment

<< Home