下面我们接着旅程4继续我们的JavaScript Dom征程5，这篇博文主要讲的是事件冒泡还有Dom修改元素的样式，所以这篇博文里面有很多举例说明，如：网页的开关灯效果，文本框的变色效果，还有就是评分控件的实现，而且这些在网页中用法都是非常普遍的。
- JavaScript中的事件冒泡
(1) 事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件被触发，B的onclick也会触发，触发的顺序是”由内到外”。验证：在页面上添加table,table里面有tr,tr里面有td,td里面放一个p,在p,td,tr,table中添加onclick事件响应。
<body onclick="alert('body onclick')">
<table onclick="alert('table onclick')">
<tr onclick="alert('tr onclick')">
<td onclick="alert('td onclick')">
<p onclick="alert('p onclick')">点击</p>
</td>
</tr>
</table>
</body>
(2) 其它
1) 事件中的this，除了可以使用event.srcElement在事件响应函数中，this表示发生事件的控件，只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数总不能使用，如果要使用则要将this传递给函数或者使用event.srcElement。(*)this和event.srcElement的语义是不一样的，this就是表示当前监听的这个事件，event.srcElement是引发事件的对象；事件冒泡。
<script type="text/javascript">
function btnClick2() {
alert(this.value); //在事件响应函数调用的函数里就不能通过this来获得事件对象
}
function btnClick3(btn) {
alert(btn.value); //在事件响应函数中将this传过来即可
}
function btnClick4() {
alert(event.srcElement.value);
}
</script>
<input type="button" value="click" onclick="alert(event.srcElement.value)" />
<input type="button" value="click1" onclick="alert(this.value)" />
<input type="button" value="click2" onclick="btnClick2()" />
<input type="button" value="click3" onclick="btnClick3(this)" />
<input type="button" value="click4" onclick="btnClick4()" />
2) 易错：修改元素的样式不是设置class属性，而是className属性
<style type="text/css">
.day{
background-color:Green;
}
.night{
background-color:Black;
}
</style>
<div class="day" id="divTest">
<font color="red">韩迎龙</font>
</div>
<input type="button" value="切换" onclick="document.getElementById('divTest').className='night';" />
3) 例子：实现网页开关灯效果
(1) CSS样式引用上一个案例即可，其余代码如下：
<script type="text/javascript">
(document.body.className == "day") {
document.body.className = "night";
b function switchLight() {
var btnSwitch = document.getElementById("btnSwitch");
if tnSwitch.value = "开灯";
}
else {
document.body.className = "day";
btnSwitch.value = "关灯";
}
}
</script>
<body class="night">
<input type="button" id="btnSwitch" value="开灯" onclick="switchLight()" />
</body>
(3) 易错：单独修改样式的属性使用“style.属性名”，注意在CSS中属性名在JavaScript中操作的时候属性名可能不一样，主要集中在那些属性名中含有“—”的属性，因为JavaScript中“—”是不能做属性，类名的。所以CSS中背景颜色是BackGround-Color，而JavaScript中则是style.background；元素样式名为class,在javascript中是className属性，font-size—>style.fontsize;margin-top—>style.marginTop。
<input type="button" value="点击" onclick="this.style.background='Red'" />
- 案例学习
(1) 案例1：创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景颜色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是onfocus,焦点离开控件的事件是onblur。
注释: <input type="text" onblur="alert('第一个失去焦点')" />
<input type="text" onfocus="alert('第二个获得焦点')" />
代码: <script type="text/javascript">
function initEvent() { //遍历所有的input控件，添加
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onblur = inputOnBlur;//设置inputOnBlur函数为input元素的onblur事件的响应函数
}
}
function inputOnBlur() { //焦点失去的时候进行数据检查
//inputOnBlur是onblur的响应函数，而不是被响应函数调用的函数，所以可以用this来取得发生事件的对象
if (this.value.length <= 0) { //检查文本框中文字的长度，如果c<=0就说明是空的
this.style.background = "red";
}
else {
this.style.background = "white";
}
}
</script>
<body onload="initEvent()">
<input type="text" /><br />
<input type="text" /><br />
<input type="text" />
</body>
(2) 案例2：评分控件，用一个单行5列的table的评分控件，监听td的click事件，点击一个td的时候，将这个td及之前的td背景变为红色，之后的td背景变为白色，鼠标在评分控件上的时候显示超链接形式的鼠标图标，演示：Jquery 版本。
<script type="text/javascript">
function IndexOf(arr, element) { //alert(indexOf([1,5,3],3));
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element) {
return i;
}
}
return -1;
}
function initEvent() { //给所有的td增加onclick事件
var tableRating = document.getElementById("tableRating");
var tds = tableRating.getElementsByTagName("td"); //取得tableRating下的所有的Id
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.onclick = TdOnClick;
td.style.cursor = "pointer"; //让鼠标放到td上显示手形状的光标
}
}
function TdOnClick() {
var tableRating = document.getElementById("tableRating");
var tds = tableRating.getElementsByTagName("td");
var index = IndexOf(tds, this);
for (var i = 0; i <= index; i++) {
var td = tds[i];
td.style.background = "red";
}
for (var i = index + 1; i < tds.length; i++) {
var td = tds[i];
td.style.background = "white";
}
}
</script>
</head>
<body onload="initEvent()">
<table id="tableRating">
<tr>
<td>★</td><td>★</td><td>★</td><td>★</td><td>★</td>
</tr>
</table>
</body>
(3) 练习1：超链接的单选效果，页面上若干个超链接，点击一个超链接的时候被点击的超链接变为红色背景，其它超链接背景还原为白色，window.event.returnValue=false。
<script type="text/javascript">
function initEvent() {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.onclick = LinkOnClick;
}
}
function LinkOnClick() {
var links = document.getElementsByTagName("a");
//不要把links放到全局变量中，尽量不要用全局变量，如果重复性的代码太多了，将代码放到一个公共函数中
for (var i = 0; i < links.length; i++) {
var link = links[i];
if (link == this) {
link.style.background = "red";
}
else {
link.style.background = "white";
}
window.event.returnValue = false; //阻止打开超链接
}
}
</script>
<body onload="initEvent()">
<a href="http://www.baidu.com">百度</a>
<a href="http://www.cnblogs.com">博客园</a>
<a href="http://www.sina.com">新浪</a>
</body>
(4) 练习2：点击按钮，表格隔行变色，偶数行为黄色背景，奇数行为默认颜色，通过Table的getElementByTagName取得所有的tr，以次遍历，如果是偶数行就变色
<script type="text/javascript">
function ShowIt() {
var tableMain = document.getElementById("tableMain");
var tds = tableMain.getElementsByTagName("tr");
for (var i = 0; i < tds.length; i++) {
if (i % 2 != 0) {
var tr = tds[i];
tr.style.background = "yellow";
}
}
}
</script>
<body onload="ShowIt()">
<table id="tableMain">
<tr><td>喜欢</td><td>100</td></tr>
<tr><td>讨厌</td><td>10</td></tr>
<tr><td>宿舍</td><td>100</td></tr>
<tr><td>韩迎龙</td><td>200</td></tr>
<tr><td>博客园</td><td>300</td></tr>
</table>
<input type="button" value="隔行变色" onclick="ShowIt()" />
</body>