javascript

关于2级DOM事件书上有句话是这样的：用户想要在鼠标移到文件的<p>标记上时触发一个事件处理程序，那么不必为每个<p>标记都注册一个onMouseOver事件处理程序，只需要在Document对象上注册一个onMouseOver，然后在事件传播的捕捉或起泡阶段处理这些事件即可。
本人是个菜鸟，实在不理解
哪位高手能举个例子说明一下吗？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

首先要理解DOM对象
以及Document
例如说文本中存在多个<p>那么采用document.onmouseover  是能达到你的效果但如果存在多个<p>的同时还存在例外的<div>或者<a>等.同样这样DOM对象也回有onmouseover的方法
<script   language="javascript">
  function   test()
  {
  var   o=document.getElementsByTagName("p");
  for(i=0;i<o.length;i++)
  {
  alert(o[i].id);
  }
  }
  </script>
<script>
window.onload=function(){
    var pnode=document.getElementsByTagName("p")
    for(var i=0;i<pnode.length;i++){
        document.getElementsByTagName("p")[i].onmouseover=function(){alert()}
    }
}
</script>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
</body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body onmousemove="MouseOver();">
<div>当前内容：<span id="spanMsg"></span></div>
    <p>这里是 P1</p>
    <div>这里是 DIV</div>
    <p>这里是 P2</p>
    <p>这里是 P3</p>
<script language="javascript" type="text/javascript">
    var sp = document.getElementById("spanMsg");    function MouseOver() {
        var dom = event.srcElement;
        if (dom.tagName && dom.tagName == "P") {
            sp.innerHTML = dom.innerHTML;
        }
    }
</script>
</body>
</html>
下面的是示例，
注意：IE浏览器仅支持冒泡(bubbling)事件
      非IE浏览器支持W3C的标准DOM事件方法addEventListener,最后一个参数可以让你决定事件传播的时候使用捕获还是使用冒泡
true代表捕获
false代表冒泡<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">

        #outer{
            width: 100px; height: 80px;border: 1px solid red; padding: 10px;
        }
        #inner {
            border: 1px solid blue;
        }
        </style>
    </head>
    <body>
    <div id="outer">
        Outer Element
        <p id="inner">Inner Element</p>
    </div>
    <div id="cs"></div>    <script type="text/javascript">
    function log(text) {
        var div = document.createElement('div');
        div.innerHTML = text;
        document.getElementById('cs').appendChild(div);
    }
    function eventHandler(event) {
        event = event || window.event;
        var target = event.target || event.srcElement;
        switch(event.type) {
        case "mouseover":
            if(target.id == 'outer') {
                log('Mouse Over: outer element');
            } else if(target.id == 'inner') {
                log('Mouse Over: inner element');
            }
            break;
        case "mouseout":
            if(target.id == 'outer') {
                log('Mouse Out: outer element');
            } else if(target.id == 'inner') {
                log('Mouse Out: inner element');
            }
            break;
        // more event handlers
        }
    }
    function addHandler(el, type, handler) {
        if(el.attachEvent) {// for IE, bubbling only
            el.attachEvent('on' + type, handler);
        } else if(el.addEventListener) {// for non-IE
            // true : use Capture
            // false: use Bubbling
            el.addEventListener(type, handler, false);
        } else {
            el['on' + type] = handler;
        }
    };
    window.onload = function() {
        var oBody = document.body;
        addHandler(oBody, 'mouseover', eventHandler);
        addHandler(oBody, 'mouseout', eventHandler);
    }
    </script>
    </body>
</html>