javascript 事件冒泡

桐天使未必在场

桐天使未必在场

2016-02-19 15:54

下面图老师小编跟大家分享javascript 事件冒泡,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

Html代码
!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" lang="zh" xml:lang="zh" 
head 
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / 
meta name="developer" content="Realazy" / 
titleBubble in JavaScript DOM/title 
style type="text/css" media="screen" 
 div * {display:block; margin:4px; padding:4px; border:1px solid white;}  
 textarea {width:20em; height:2em;}  
/style 
script type="text/javascript" 
    //![CDATA[ 
    function init(){ 
  var log = document.getElementsByTagName('textarea')[0]; 
  var all = document.getElementsByTagName('div')[0].getElementsByTagName('*'); 
  for (var i = 0, n = all.length; i n; ++i){ 
   all[i].onmouseover = function(e){ 
    this.style.border = '1px solid red'; 
 
    log.value = '鼠标现在进入的是: ' + this.nodeName; 
   }; 
   all[i].onmouseout = function(e){ 
    this.style.border = '1px solid white'; 
   }; 
  } 
 
  var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*'); 
  for (var i = 0, n = all2.length; i n; ++i){ 
   all2[i].onmouseover = function(e){ 
    this.style.border = '1px solid red'; 
 
    if (e) //停止事件冒泡 
     e.stopPropagation(); 
    else 
     window.event.cancelBubble = true; 
     
    log.value = '鼠标现在进入的是: ' + this.nodeName; 
   }; 
   all2[i].onmouseout = function(e){ 
    this.style.border = '1px solid white'; 
   }; 
  } 
 } 
 window.onload = init; 
    //]] 
/script 
/head 
body 
h1Bubble in JavaScript DOM/h1 
pDOM树的结构是:/p 
precode 
UL  
  - LI  
     - A  
   - SPAN  
/code/pre 
div 
 ul 
  lia href="#"spanBubbllllllllllllllle/span/a/li 
  lia href="#"spanBubbllllllllllllllle/span/a/li 
 /ul 
/div 
textarea/textarea 
p鼠标进入UL的任何一个子元素,如果不停止冒泡,我们从UL到SPAN都定义了鼠标悬停(codemouseover/code)事件,这个事件会上升了UL,从而从鼠标所进入的元素到UL元素都会有红色的边。/p 
div 
 ul 
  lia href="#"spanBubbllllllllllllllle/span/a/li 
  lia href="#"spanBubbllllllllllllllle/span/a/li 
 /ul 
/div 
p如果停止冒泡,事件不会上升,我们就可以获取精确的鼠标进入元素。/p 
/body 
/html

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

javascript 事件冒泡

Web开发
javascript 事件冒泡

阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)

Web开发
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

cancelBubble阻止事件冒泡

Web开发
cancelBubble阻止事件冒泡

javascript鼠标事件

Web开发
javascript鼠标事件

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JavaScript事件驱动及事件处理

Web开发
JavaScript事件驱动及事件处理

学习JavaScript的事件

Web开发
学习JavaScript的事件

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

好男人的qq分组图案_我老婆比她们都好 - QQ图案分组

好男人的qq分组图案_我老婆比她们都好 - QQ图案分组

随机数算法

随机数算法
下拉加载更多内容 ↓