javascript 事件监听以及冒泡

第一种监听方式，也是最普遍使用的方式，是直接在代码上加载事件，产生效果：


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

第二种监听方式，是使用DOM的方式获取对象，并加载事件：


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

第三种监听方式，是使用标准的addEventListener方式和IE私有的attachEvent方式，因为IE的attachEvent方式在参数传递时的缺陷，这个问题被搞得稍许有些复杂了：


<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_color(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>

javascript  事件冒泡

事件冒泡此处不再多讲

在javascript 事件成员中， 有很多事件组合（小编定义的）如mousedown(before)、mouseup(last)

<div id="dd">

 

<div id="ddd">

 

</div>

</div>

当Dom对象 dd和ddd同时有mousedown时，ddd执行mousedown以后会自动dd的mousedown事件对象（事件冒泡）；如果ddd对象添加了mouseup事件 dd的mousedown事件就不执行，因为 ddd冒泡出去的事件是mouseup；所以dd的mousedown的冒泡执行被组织， 此时dd执行的冒泡事件只有一个mouseup；但是dd冒泡执行的事件有mouseup 、click点击事件 dbclick双击事件等， 因为单击、双击事件都包含了mouseup事件。javascript dom对象，event事件对象有时候会很诡异，不同浏览器也表现不同，只要我们掌握其执行原理，耐心对待调试，就会意想不到的收获，javascript也是一个神奇的世界，到处充满惊喜，与刺激，当然调试代码是件非常痛苦的事情。