标签：htm wms color author width 对话 rds 有一个 目标
onmouseover、nmouseout：鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件
onmouseenter、onmouseleave：鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title></title> <style type=‘text/css‘> *{ margin:0; padding:0;} #box3{ height:100px; background:red; } #box2{ padding:50px; background:blue; } #box1{ padding:50px; background:green; } </style> </head> <body> <div id="box1">1 <div id="box2">2 <div id="box3">3</div> </div> </div> <script type="text/javascript"> /* onmouseover onmouseout onmouseenter onmouseleave */ var oBox1 = document.getElementById(‘box1‘); ///* /* oBox1.onmouseover = function(){ //可以直接通过ID这样调用，但不提倡 console.log( ‘over‘ ); }; */ oBox1.onmouseout = function(){ //可以直接通过ID这样调用，但不提倡 console.log( ‘out‘ ); }; //*/ /* oBox1.onmouseenter = function(){ //可以直接通过ID这样调用，但不提倡 console.log( ‘enter‘ ); }; oBox1.onmouseleave = function(){ console.log( ‘leave‘ ); }; */ </script> </body> </html>
//文档碎片:类似一个临时的文档，要所有要加的dom元素先放在这里，达到不要每次操作dom元素 提高页面效率 var d1 = new Date(); //创建十个段落,常规的方式 for(var i = 0 ; i < 1000; i ++) { var p = document.createElement("p"); var oTxt = document.createTextNode("段落" + i); p.appendChild (oTxt); document.body.appendChild(p); } var d2 = new Date(); document.write("第一次创建需要的时间:"+(d2.getTime()-d1.getTime())); //使用了createDocumentFragment()的程序 var d3 = new Date(); var pFragment = document.createDocumentFragment(); for(var i = 0 ; i < 1000; i ++) { var p = document.createElement("p"); var oTxt = document.createTextNode("段落" + i); p.appendChild(oTxt); pFragment.appendChild(p); } document.body.appendChild(pFragment); var d4 = new Date(); document.write("第2次创建需要的时间:"+(d4.getTime()-d3.getTime()));
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。
2.怎么阻止事件冒泡
通常情况下我们都是一步到位，明确自己的事件触发源，并不希望浏览器自作聪明、漫无目的地去帮我们找合适的事件处理程序，即我们明确最精准目标，这种情况下我们不需要事件冒泡。另外通过对事件冒泡的理解，我们知道程序将做多较多额外的事情，这必然增大程序开销。还有一个重要的问题是：事件冒泡处理可能会激活我们本来不想激活的事件，导致程序错乱，甚至无从下手调试，这常成为对事件冒泡不熟悉程序员的棘手问题。所以必要时，我们要阻止事件冒泡。
<div onclick="openWin(‘http://www.baidu.com‘)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px"> <div onclick="openWin(‘http://www.google.com‘)" id="inSide" style="width:100px; height:100px; background:#CCC"></div> </div> <script type="text/javascript"> //本例你实际希望点击灰色盒子打开google首页，而点击黑色盒子打开baidu首页，但结果你点击灰色盒子的时候，却是同时打开了两个网页。其实在实际设计中较少遇到此问题，你可能会想如
果我在页面不同DOM深处安置了不同的按钮或链接，深层处的事件触发会不会波及顶层的按钮呢？不会，因为按钮不能形成嵌套关系。 function openWin(url) { window.open(url); } </script>
<div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px"> <div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div> </div> <script type="text/javascript"> //阻止事件冒泡后，你点击灰色盒子，整个过程只弹一次对话框了（注意与默认情况对比） function showMsg(obj,e) { alert(obj.id); stopBubble(e) } //阻止事件冒泡函数 function stopBubble(e) { if (e && e.stopPropagation) e.stopPropagation() else window.event.cancelBubble=true } </script>
标签：htm wms color author width 对话 rds 有一个 目标
原文地址：http://www.cnblogs.com/dongzw/p/7118894.html
