首頁 > 開發者 > JavaScript
javascript的實現事件的一些執行個體
嘿嘿，今天學習到了事件，其實在C#中事件只需要我們觸發即可實現，但是在javascript並不是這樣的，在這裡，事件是javascript與html的互動，就是文檔或者瀏覽器視窗發生的一件特定的互動瞬間。其實從定義上面你很難想象吧，那麼下面就簡單的舉例說下。 一.實現文字改變位置 <head> <title></title> <script> function getDomText() { //該方法適用於讓“連結”和“文字”交換位置顯示在提示在提示框中 var pnode = document.getElementsByTagName("p"); //擷取p元素，讓他的子節點交換位置 var str = ""; str = document.getElementById("myspan").innerHTML; //擷取id為myspan的元素的文本 str += document.getElementById("myid").innerHTML; //擷取id為myid的元素的文本 alert(str); } </script></head><body> <p> <a id="myid" href="#">連結</a> <span id="myspan">文字</span><br /> <input type="button" name="name" value="按鈕" onclick="getDomText()" /> </p></body> 上面的button就實現了onclick單擊事件，然後通過事件調用了一個方法使其文本資訊改變位置。 二.替換文本資訊 <script> function replaceTextContent(){ //該方法適用於替換文本資訊 var pnode = document.getElementById("myDom"); pnode.innerHTML = '<span>一句話</span> <a href="">一個連結</a>';//改變id為myDom的元素的文本資訊 } </script><body> <p> <input type="button" value="替換內容 " onclick=" replaceTextContent()" /> </p> <p id="myDom"> <a href="#">一個連結</a> <span>一句話</span> </p></body> 其實在這裡是替換文本資訊，不局限於是原來的文本資訊交換位置，可以是任意內容的，嘿嘿。 三..改變圖片大小 <script> function updateImgAttribute() { var imgmsg = document.getElementById("myimg"); //擷取圖片的元素 imgmsg.width = "500"; //圖片存在屬性width和height，然後設定即可 imgmsg.height = "500"; } </script><body> <p> <input type="button" name="btn" value="修改屬性" onclick="updateImgAttribute()" /> </p> <img src="4.jpg" id="myimg" alt="載入中!" height="200" width="200"/></body> 改變圖片大小其實是通過元素的屬性設定即可，或者通過擷取其元素，在使用setAttribute也可以實現的，這樣是最簡單的。 四.顯示另一個元素的值 <script> function getOthBtnValue(btn) { //接收一個元素節點 var pnode =btn.parentNode; //把傳進來的這個元素作為p的子節點 for (var i = 0; i < pnode.childNodes.length; i++) { if (pnode.childNodes[i] != btn && pnode.childNodes[i].nodeType == btn.nodeType) { alert(pnode.childNodes[i].value); //if中的條件：當子節點滿足不是btn而且子節點的類型和btn一樣 } } } </script><body> <p> <input type="button" name="btn1" value="顯示btn2的值 " onclick="getOthBtnValue(this)"/> <!--this在這裡是指當前元素--> <input type="button" name="btn1" value="顯示btn1的值 " onclick="getOthBtnValue(this)"/> </p></body> 在這裡寫if'語句中的條件時間可能不太容易理解，但是我們可以尋找下pnode.childNodes的節點的個數即可知道我們的條件為什麼要這樣寫，子節點的個數輸出的是5，包括空白的文本節點等，所以在顯示時間需要注意的。 五.複製圖片 <script> function cloneImg() { var imgmsg = document.getElementById("myimg"); var newimg = imgmsg.cloneNode(true); //在cloneNode中需要一個bool類型的參數，true表示強度 document.getElementById("myid").appendChild(newimg); //擷取p元素，然後再p元素中添加新複製出來的元素 } </script><body> <p id="myid"> <input type="button" name="btn" value="複製圖片" onclick="cloneImg()"/> <br /> <img src="4.jpg" id="myimg" alt="載入中" height="200" width="200"/> </p></body> 其實複製圖片，從名字上面的方法的名字cloneNode就知道了實現的功能，可以點擊按鈕複製多張圖片。 六.隱藏圖片 <script> function showOrHide() { var myimg = document.getElementById("myimg"); var displaymsg = myimg.style.display; //display是用來顯示或者隱藏 //alert(displaymsg); if (displaymsg != 'none') { //當參數為none是為顯示 myimg.style.display = 'none'; } else { myimg.style.display = ''; //當為空白時間為隱藏 } } </script><body> <p id="myid"> <input type="button" name="btn" value="隱藏圖片" onclick="showOrHide()"/> <br /> <img src="4.jpg" id="myimg" alt="載入中" height="200" width="200"/> </p></body> 之前沒有介紹display的使用方法，它應該是style的屬性，在這裡需要注意的是它的參數，僅僅存在none和空。 七.文本資訊排序 <script> function changeSeriation() { var ulnode = document.getElementsByTagName("ul")[0];//擷取頁面的ul元素, 在這裡[0]是代表第一個ul if (ulnode.hasChildNodes) { //判斷是否包含子節點 var length = ulnode.childNodes.length; //擷取子節點的長度 var str = []; for (var i = 0; i < length; i++) { str[i] = ulnode.childNodes[0]; //每次擷取的子節點元素放在最前面 ulnode.removeChild(ulnode.childNodes[0]); //清除當前的子節點元素，按照上面的順序依次輸出 } for (var i = length-1; i >=0; i--) { ulnode.appendChild(str[i]); //這個是相反的，每次輸出的排在最後一個 } } } </script><body> <ul> <li >item1</li> <li >item2</li> <li >item3</li> <li >item4</li> <li >item5</li> </ul><input type="button" name="btn" value="交換順序 " onclick="changeSeriation()"/></body> 在這裡理解起來可能剛接觸不太容易理解，但是我感覺之前學習了pop方法和push方法，其實這個就是那個理解起來相似，但是最後的顯示的資訊還是打不同的，僅限於理解上面， 八.form表單 <script> window.onload = function () { document.getElementsByName("btn").onclick = function(e){ // 在這使用一個匿名的方法實現單擊事件 //function getAllValue(e) { var formmsg = document.forms[0]; //擷取第一個form元素 var formelements = formmsg.elements; //擷取form表單中的元素 //var str = ""; var count=0; for (var i = 0; i < formelements.length; i++) { //str[i] = formelements[i].name = "text"; //alert(formelements[i].name); if (formelements[i].getAttribute("type") == "text") { count++; } alert(count); } } } </script><body> <form action="/" method="post"> 文字框:<input type="text" name="mytext" value="文字框 " /><br /> 單選框:<input type="radio" name="myradio" value="單選框1" /><input type="radio" name="myradio" value="單選框2" /><br /> 下拉式清單: <select name="myselect"> <option value="下拉式清單" >==請選擇== </option> <option value="下拉式清單1">第一項</option> <option value="下拉式清單2">第二項</option> </select> <br /> <input type="button" name="name" id="btn" value="得到所有控制項的value" onclick="" /> </form></body> 在這裡需要注意的擷取form表單中的元素的value的使用和name的使用，很可惜的是我沒有寫出來，不知道哪出了問題，希望寫出來能夠改正。 九.通過一個按鈕觸發事件擷取另一個按鈕觸發事件 <script> function changeValue() { var mybtnmsg = document.getElementById("btnid").click(); //元素存在一個單擊事件 } </script><body> <p> <input type="button" value="觸發按鈕的事件 " onclick="changeValue()" /> <input type="button" id="btnid" value="按鈕提示 " onclick="alert('我被觸發了')" /></p></body> 十.建立新元素 <script> function createNewElement() { document.getElementById("p1").innerHTML = "<span>我是新添加進來的文本1</span>"; //直接通過innerHTML添加文本元素 var newspanelement = createNewElement("span"); //也可通過建立元素添加新的文本，這裡建立的是span標籤 newspanelement.appendChild(document.createTextNode("我是新添加進來的文本2"));//添加文本 var pnode = document.getElementById("p2"); //添加id為p2的p標籤的的子節點span pnode.appendChild(newspanelement); //把span的所有元素添加到p標籤中 } </script><body> <p> <input type="button" name="name" value="建立新元素 " onclick="createNewElement()" /></p> <p id="p1"></p> <p id="p2"></p></body> 十一.通過頁面載入事件開啟一個網頁 <script> //Window.onload() =function(){ //頁面載入事件 // document.body.onclick = function () { //元素可以實現onclick事件 // alert(this.innerHTML) // } //} window.navigate("http://www.baidu.com");//當發生頁面載入事件時間跳轉到連結地址 window.location.href = "http://www.rupeng.com";//同上 </script><body> <body style="background-color:red"> <p id="p">第一個DOM</p></body> 十二.onfocus與onblur的使用 <script> window.onload = function () { document.getElementById("txtname").onfocus = function () { //給文字框設定一預設值，當滑鼠進入時間顯示空白 this.value = ''; }; document.getElementById("txtname").onblur = function () { //當滑鼠離開時間仍然顯示預設值 this.value = '使用者名稱'; } } </script><body> <form action="/" method="post"> <table> <tr><td>UserName</td><td> <input type="text" id="txtname" name="txtname" value="使用者名稱 " /></td></tr> <tr> <td>UserPwd</td> <td> <input type="password" name="txtpwd" value="密碼" /> </td> </tr> <tr> <td> <input type="button" name="name" value="登入 " /></td> <td> <input type="reset" name="name" value="儲值 " /></td> </tr> </table> </form></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
