Event handling is often necessary for additions to the post form and modify form. A lot of people use something like onclick, however that can cause errors. It works a lot better if you append something to the form tag. Sure, we'll use an onsubmit, but that can also be buggy. There are more advanced ways to handle events, with two functions known as attachEvent() and addEventListener(). These two functions are separate because attachEvent() is Microsoft's function (Internet Explorer), and addEventListener() is Mozilla's function (Firefox).

First, we'll look at attachEvent(). Say you want to append a function to the post form. We'll simulate such a situation:

<script type="text/javascript">
<!--
 if(document.postForm){
   document.postForm.attachEvent('onsubmit',somefunction);
 }
// -->
</script>

Now, that would work, but only in Internet Explorer. Okay, so first, we define the event, which in this case is onsubmit. The next parameter is the function to be executed.

addEventListener() is a little more complicated, but it's not that hard:

<script type="text/javascript">
<!--
 if(document.postForm){
  document.postForm.addEventListener('submit',somefunction,false);
}
// -->
</script>

The first parameter is the event to be handled, but without the on prefix. The second parameter is the function to be executed, and the last parameter is a boolean value as to whether or not to handle the event in the bubbling or capturing element. If you're unsure, then it's probably best to use the default parameter, which is false.

Now, that example will only work in Firefox. So, how do you get the advanced event handling to work in both browsers? Simple.

<script type="text/javascript">
<!--
 if(document.postForm){
  if(document.addEventListener){
   document.postForm.addEventListener('submit',somefunction,false);
 }else{
  document.postForm.attachEvent('onsubmit',somefunction);
 }
}
// -->
</script>

See? It's simple. It can get more advanced, though. Say you wanted to include several statements but don't have a function for them? In other words, you want to execute a block of code but you don't have it defined anywhere. You can use the function(){} definition.

<script type="text/javascript">
<!--
 if(document.postForm){
  if(document.addEventListener){
   document.addEventListener('submit',function(){
     window.alert("Form submitted in Firefox!");
  },false);
 }else{
   document.attachEvent('onsubmit',function(){
    window.alert("Form submitted in Internet Explorer!");
  });
 }
}
// -->
</script>

That's all there is to these functions. There are also ways to remove events from elements, as well, known as detachEvent() and removeEventListener(). Please see the tutorial on them to get more information.

---

Well, I hoped that tutorial helped you! Feel free to respond if you don't understand something.


Last Edit: Jul 30, 2009 4:42:27 GMT by Chris