...

View Full Version : Couple of very basic questions do with Event Handling



Common
12-19-2010, 08:47 AM
Hi there,
I've been a web designer for a while and have always used basic javascript in my pages, but decided recently that I would get right into the nitty gritty, however I'm having a problem with some really basic code.
Secondly, the book which I'm using is from 2005 and is extolling the virtues of event listeners and so on, is this still the accepted means of handling events?
And thirdly, are there still chasms between the browsers in compatability in this area? I'm aware IE has become more and more compliant recently, is it still necessary to write code to cover different browsers or does it all pretty much work nowadays (besides older browsers)?

So, to the code! Basically, the browser doesn't get into the function to display the alert(), and i'm not sure why. (Told you it was basic ;))


<html>
<head>
<title>Javascript Testing</title>

<script type="text/javascript">
<!--

function aKeyWasPressed(e){
alert('Sausages!');
}

var textarea = document.getElementById('myta');
textarea.addEventListener('keyup', aKeyWasPressed, false);

-->
</script>

</head>
<body>
<textarea id="myta"></textarea>
</body>
</html>

Thanks!

Philip M
12-19-2010, 09:08 AM
See http://www.quirksmode.org/js/events_advanced.html

http://www.javascriptkit.com/domref/windowmethods.shtml

<script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead. The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code.


All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Common
12-19-2010, 09:12 AM
Thanks for the link. Heh, I dunno where you saw <script language="javascript">? And the <!-- --> is my mistake, when I learned JS many years ago, that was fairly standard practice.

I am heartened to know that my book is not obsolete. Although I still don't know what I've done wrong in that code, element.addEventListener seems to correspond with what I've written.

Philip M
12-19-2010, 09:17 AM
Heh, I dunno where you saw <script language="javascript">? And the <!-- --> is my mistake, when I learned JS many years ago, that was fairly standard practice.

I am heartened to know that my book is not obsolete. Although I still don't know what I've done wrong in that code, element.addEventListener seems to correspond with what I've written.

Oh, sorry, when I saw the <!-- tags I must have assumed the old "language" attribute.

When you code in the head runs the textarea does not exist. You need to call the addEventListener (which is not supported by IE) with a function within body onload.


<html>
<head>
<title>Javascript Testing</title>
<script type = "text/javascript">
function aKeyWasPressed(e){
alert('Sausages!');
}
function init() {
var t = document.getElementById('myta');
t.addEventListener('keyup', aKeyWasPressed, false);
}
</script>

</head>
<body onload = "init()">
<textarea id="myta"></textarea>
</body>
</html>

That works in FF.

I would avoid assigning the name textarea to a JavaScript variable. You should also avoid giving names or id's to your variables/functions/arguments/forms words which are JavaScript methods/properties/attributes such as 'name' or 'id' or 'value' or 'test' or 'text' or 'checked' or 'go' or 'replace' or 'button' or 'radio' or 'parseInt'.

Philip M
12-19-2010, 09:44 AM
This works in IE and FF:-


<html>
<head>
<title>Javascript Testing</title>
<script type = "text/javascript">

function aKeyWasPressed(e){
alert('Sausages!');
}
function init() {
var IE = ("v"=="\v"); // vertical tab is undefined in IE8-
var t = document.getElementById('myta');
if (!IE){
t.addEventListener('keyup', aKeyWasPressed, false);
}
if (IE) {
t.attachEvent('onkeyup', aKeyWasPressed);
}

}
</script>

</head>
<body onload = "init()">
<textarea id="myta"></textarea>
</body>
</html>

Common
12-19-2010, 10:00 AM
Excellent, thanks for your help! The fact that the textarea may not have loaded occurred to me but I dismissed it in the same instant, should have followed through!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum