event事件物件(應用案例，比如阻止冒泡)
阿新 • • 發佈：2018-12-11
event事件物件(應用案例，比如阻止冒泡)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>演示event事件物件(應用案例，比如阻止冒泡)-雪豹軟體工作室</title> <link rel="stylesheet" type="text/css" href="body.css"> <style type="text/css"> body { color: black; font-weight: bold; } input { width: 80%; height: 40px; border: 2px solid #8E388E; border-radius: 5px; /*設定邊框的4個直角變成圓角有弧度*/ font-weight: bold; /*文字框中的文字字型加粗*/ color: blue; } input[type=button] { width: auto; color: white; background-color: #8E388E; } input[type=checkbox] { width: 16px; height: 16px; } h2 { color: red; text-algin: center; vertical-align: middle; display: inline; } div { background: #f0f0f0; width: 98%; height: 100px; border: solid 3px #8E388E; border-radius: 5px; margin: 0 auto; text-align: center; height: auto; } span { border: solid 3px #CD0000; border-radius: 5px; /*圓角弧度*/ text-align: center; width: 300px; height: 60px; display: block; /*對span設定display屬性等於block後，span就會變成獨佔一行，span元素的前後內容會換行*/ display: inline-block; /*即能實現span寬度和高度生效，又讓span元素前後內容不換行*/ } .myDiv { border: solid 3px black; } .myDiv2 { border: solid 3px green; } .myDiv3 { border: solid 3px blue; } </style> <script type="text/javascript"> /** 參考網頁 http://www.jb51.net/article/48935.htm 參考網頁http://www.itxueyuan.org/view/6340.html 參考網頁http://www.w3school.com.cn/jsref/dom_obj_event.asp */ /** * 關於事件物件，以下這篇文章寫得很詳細，可以參考 參考文章http://www.jb51.net/article/26552.htm */ function testEvent() { alert(window.event); } function testFirefoxEvent() { /** 既然匿名函式的event傳入了，那麼在該閉包中clk是可以獲取到event的，事實上點 擊後Firefox會報錯：event is not defined。猜測該匿名函式的閉包和function clk(){alert(event);}不 是同一個閉包環境 */ alert(arguments.callee.caller); alert(event); } function testFirefoxEvent2(arg1, arg2) { alert(arguments.callee.caller); alert(arg1); alert(arg2); alert("arguments[0]" + arguments[0]); } /* CSS、Display(顯示)與 Visibility(可見性)參考http://www.runoob.com/css/css-display-visibility.html display 隱藏必須使用none值，該隱藏不佔位，頁面原始碼可見。 顯示可使用空或block或inline，意思分別為：無此屬性、顯示視為div（有換行符）、顯示視為span（無換行符）。 visibility 隱藏必須使用hidden值，該隱藏佔位，頁面原始碼可見。 顯示可使用空或visible，意思分別為：無此屬性、顯示。 */ //顯示或隱藏div(display的方式不會佔位置) function showOrHideElement1(elementId) { var divNode = document.getElementById(elementId); if (divNode.style.display == "none") { divNode.style.display = "block"; } else { divNode.style.display = "none"; } } //顯示或隱藏div(visibility的方式始終會佔位置) function showOrHideElement2(elementId) { var divNode = document.getElementById(elementId); if (divNode.style.visibility == "hidden") { divNode.style.visibility = "visible"; } else { divNode.style.visibility = "hidden"; } } //給每一個文字框的邊框設定隨機顏色 function randomColor(){ //定義一個顏色的陣列 var colors = new Array("red", "blue", "#228B22", "#8E388E", "#5B5B5B", "#0A0A0A"); var inputNodes = document.getElementsByTagName("input"); for (var index = 0; index < inputNodes.length; index++) { if (inputNodes[index].type == "text") { //隨機設定文字框元素的邊框顏色 inputNodes[index].style.border = "3px solid " + createRandomColor(colors); } } } //產生隨機顏色 function createRandomColor(colorArray){ //產生隨機數 var randomNumber = Math.round(Math.random() * (colorArray.length - 1)); return colorArray[randomNumber]; } //阻止元素(在這裡是指點選的那個複選框)的預設行為 function testCheckBox(e){ //阻止元素的預設行為 window.event ? window.event.returnValue = false : e.preventDefault(); } </script> </head> <body onload="randomColor()"> <div id="div1"> <h2>演示阻止元素的預設行為-雪豹軟體工作室</h2><br> 愛好1上網<input type="checkbox" onclick="testCheckBox(event)"> 愛好2看書<input type="checkbox" onclick="testCheckBox(arguments[0])"> <br> <br> <h2>演示event事件物件(應用案例，比如阻止冒泡)-雪豹軟體工作室</h2> <br> <br> <h2>演示div層的visibility屬性和display屬性的區別</h2> <br> <br> </div> <br> <div class="myDiv3"> <br> <input type="button" value="點選我-顯示隱藏層(display的方式不會佔位置)" onclick="showOrHideElement1('div1')"> <br> <br> </div> <br>你們去改變世界，我只想認真賺錢! <span id="span1">我是span1</span>在你存款沒100萬前，你所有的愛好跟理想都應該是賺錢! <span id="span2">我是span2</span>小夥伴們，當務之急我們要做的只有一件事情，那就是拼命努力認真的賺錢！ <br> <br> <input type="button" value="點選我-顯示隱藏span(display的方式不會佔位置)" onclick="showOrHideElement1('span1')"> <br> <br> <input type="button" value="點選我-顯示隱藏span(visibility的方式始終會佔位置)" onclick="showOrHideElement2('span2')"> <br> <br> <div id="div2" class="myDiv"> <br> <br> <input type="text" value="點選我執行點選事件程式碼,火狐不支援" onclick="alert(window.event.type);"> <br> <br> <input type="text" value="點選我執行點選事件程式碼,支援IE，以前不支援火狐，現在支援火狐了" onclick="alert(event.type);"> <br> <br> <input type="text" value="我們可以通過Function的一個屬性argumengs獲取到該匿名函式的第一個引數，而該引數就是事件物件" onclick="alert(arguments[0].type);"> <br> <br> <input type="text" value="把匿名函式打印出來" onclick="alert(arguments.callee);"> <br> <br> <input type="text" value="呼叫方法獲取事件物件,火狐不支援" onclick="testEvent()"> <br> <br> <input type="text" value="因為在Firefox中匿名函式是具有event引數" onclick="testFirefoxEvent()"> <br> <br> <input type="text" value="通過顯示的引數傳入" onclick="testFirefoxEvent2(this,arguments[0])"> <br> <br> </div> <br> <div id="div3" class="myDiv2"> <br> <br> <input type="button" value="點選我-顯示隱藏層(visibility的方式始終會佔位置)" onclick="showOrHideElement2('div2')"> <br> <br> </div> </body> </html>
