嘿嘿，今天學習到了事件，其實在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.getElementById("btn").onclick = function (e) { // 在這使用一個匿名的方法實現單擊事件 //function getAllValue(e) { var formmsg = document.forms[0]; //獲取第一個form元素 var formelements = formmsg.elements; //獲取form表單中的元素 //alert(formelements.length); //var str = ""; var count = 0; for (var i = 0; i < formelements.length; i++) { //str[i] = formelements[i].name = "text"; //alert(formelements[i].value); //獲取所有元素的value //alert(formelements[i].name); //獲取所有元素的name if (formelements[i].getAttribute("type") == "text") { //獲取tpre的值為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" /> </form> </body>
在這里需要注意的獲取form表單中的元素的value的使用和name的使用，實現單擊事件可以寫在html的外邊，可以添加onload事件，可以使用上面的方法即可，嘿嘿。
九.通過一個按鈕觸發事件獲取另一個按鈕觸發事件
<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 = document.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>
學習了這些實例，其實要自己直接寫估計還是挺為難的，感覺還是不能自己寫下來吧，不過我會更多的練習的，每次在學習做實例的時間都是非常興奮，可以把前面學習的所有的很亂的知識使用上啦，感覺它終於有用啦，原來是實現這個功能的，就寫到這里啦，發現過啦昨天好久啦，要睡覺啦，嘿嘿。