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也是一个神奇的世界，到处充满惊喜，与刺激，当然调试代码是件非常痛苦的事情。