js 冒泡事件示例代码

发布时间:2019-07-31编辑:脚本学堂
本文介绍了js中onMouseOver 和 onMouseOut事件冒泡的小例子,有需要的朋友参考下。

当事件在某一DOM元素被触发时,例如用户在某个节点上点击鼠标,事件将跟随着该节点继承的各个父节点冒泡穿过整个DOM的节点层次,直到它遇到依附有该事件类型处理的父节点,HTML是层次结构内层的事件能够被传播到外层,我们称之为事件冒泡。

例子:
 

复制代码 代码示例:
<div onclick="testClick(event);"> 
    <table border="1"> 
        <tr> 
            <td>this a td element</td> 
            <td id="output">nothing</td> 
        </tr> 
    </table> 
</div> 
 

当鼠标点击<td>this a td element</td>元素时,会触发testClick事件,即事件冒泡到div元素。

onMouseOut鼠标移出冒泡解决代码
例子:
 

复制代码 代码示例:
function d_1(obj,e)
{
 var e = window.event || e, relatedTarget = e.toElement || e.relatedTarget;
 while(relatedTarget && relatedTarget != obj)
 relatedTarget = relatedTarget.parentNode;
if(!relatedTarget)
{
  obj.className="d_2_1"
 }

 

在需要移出的元素上 绑定onMouseOut="d_1(this,event)移出事件。

例子:
 

复制代码 代码示例:
<div class="d_2" id="d_2" onMouseOut="d_1(this,event)">
鼠标移出div.id为"d_2"里面的子元素节点时将不会触发d_1()函数,只有移出div"d_2"本身才会。
<div />