A deep analysis of three kinds of listening methods for events in JavaScript _javascript skills

Event is the heartbeat of the JavaScript application and the glue that sticks everything together, and it happens when we interact with some type of Web page in the browser.

The first way to listen, and most commonly used, is to load events directly on the code and produce results:

<table>
<tr onmouseover= ' this.style.backgroundcolor= ' "Red" ' onmouseout= ' this.style.backgroundcolor= ' "' ><td>text1</td><td>text2</td></tr>
<tr onmouseover= ' this.style.backgroundcolor= "Red" ' onmouseout= ' this.style.backgroundcolor= ' "' ><td>text3</td>< td>text4</td></tr>
<tr onmouseover= ' this.style.backgroundcolor= ' red ' ' onmouseout= ' This.style.backgroundcolor= "" ' ><td>text5</td><td>text5</td></tr>
</ Table>

The second way to listen is to get the object using DOM and load the event:

<table>
<tr><td>text1</td><td>text2</td></tr>
<tr>< Td>text3</td><td>text4</td></tr>
<tr><td>text5</td><td> text5</td></tr>
</table>
<script>
doms = document.getElementsByTagName (' tr ') ;
for (i=0;i<doms.length;i++)
{
  doms[i].onmouseover = function ()
  {
    This.style.backgroundColor = "Red";
  }
  Doms[i].onmouseout = function ()
  {
    this.style.backgroundColor = "";
  }
}
</script>

The third way of listening is to use the standard AddEventListener method and IE private attachevent mode, because the attachevent mode of IE in the parameter pass when the flaw, this problem is slightly somewhat complicated:

 <table> <tr><td>text1</td><td>text2</td></tr > <tr><td>text3</td><td>text4</td></tr> <tr><td>text5</td
><td>text5</td></tr> </table> <script> doms = document.getElementsByTagName (' tr '); function Show_color (where) {this.tagname? where = this:null Where.style.backgroundColor = "Red";} function Hide_c
Olor (where) {this.tagname? where = This:null Where.style.backgroundColor = "";}
  function For_ie (where,how) {return function () {how (where);
    } for (i=0;i<doms.length;i++) {try {doms[i].addeventlistener (' mouseover ', show_color,false);
  Doms[i].addeventlistener (' mouseout ', hide_color,false);
    catch (E) {doms[i].attachevent (' onmouseover ', For_ie (Doms[i],show_color));
  Doms[i].attachevent (' onmouseout ', For_ie (Doms[i],hide_color)); } {</script> 

When you bind multiple identical events, the first two methods produce an overlay, and the third method executes multiple events at the same time.