首頁 > 開發者 > JavaScript
下面我們接著旅程4繼續我們的JavaScript Dom征程5，這篇博文主要講的是事件冒泡還有Dom修改元素的樣式，所以這篇博文裡面有很多舉例說明，如：網頁的開關燈效果，文字框的變色效果，還有就是評等控制項的實現，而且這些在網頁中用法都是非常普遍的。
(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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
