File Under: JavaScript
Feb
15
2010

JavaScript Event – Change

By

This code was written based on a template by John Resig. The original can be found at John Resig’s addEvent function website.

The code, and the template, are referred to in Webmonkey’s JavaScript Events reference page. In this example, the onChange event fires whenever the value of a form field (including select lists) changes. Big caveat: the event is only recognized once a field loses focus, so the change event will not fire as soon as text is edited, for example.

The Code

<html>

<head>

<script>

// addEvent function by John Resig:

// http://ejohn.org/projects/flexible-javascript-events/

function addEvent( obj, type, fn ) {

  if ( obj.attachEvent ) {

    obj['e'+type+fn] = fn;

    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}

    obj.attachEvent( 'on'+type, obj[type+fn] );

  } else

    obj.addEventListener( type, fn, false );

}

</script>

</head>

<body>



<!-- HTML for example event goes here -->

<input id="myinput" type="text" value="Change this text" />



<script>

// Script for example event goes here

addEvent(document.getElementById('myinput'), 'change', function(event) {

	alert('The text has changed');

});

</script>

</body>

</html>

What it Looks Like

Tags: