Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder Common's Avatar
    Join Date
    Jan 2009
    Location
    Glasgow, UK
    Posts
    133
    Thanks
    16
    Thanked 13 Times in 13 Posts

    Couple of very basic questions do with Event Handling

    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 )

    Code:
    <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!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,141
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    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.

  • #3
    Regular Coder Common's Avatar
    Join Date
    Jan 2009
    Location
    Glasgow, UK
    Posts
    133
    Thanks
    16
    Thanked 13 Times in 13 Posts
    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.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,141
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by Common View Post
    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.

    Code:
    <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'.
    Last edited by Philip M; 12-19-2010 at 09:45 AM. Reason: typo

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,141
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    This works in IE and FF:-

    Code:
    <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>

  • Users who have thanked Philip M for this post:

    Common (12-19-2010)

  • #6
    Regular Coder Common's Avatar
    Join Date
    Jan 2009
    Location
    Glasgow, UK
    Posts
    133
    Thanks
    16
    Thanked 13 Times in 13 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •