當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
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="按鈕" οnclick="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="替換內容 " οnclick=" 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="修改屬性" οnclick="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的值 " οnclick="getOthBtnValue(this)"/> <!--this在這里是指當前元素--><input type="button" name="btn1" value="顯示btn1的值 " οnclick="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="克隆圖片" οnclick="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="隱藏圖片" οnclick="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]是代表第一個ulif (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="交換順序 " οnclick="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); //獲取所有元素的nameif (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="觸發按鈕的事件 " οnclick="changeValue()" /><input type="button" id="btnid" value="按鈕提示 " οnclick="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標簽的的子節點spanpnode.appendChild(newspanelement); //把span的所有元素添加到p標簽中 }</script> <body><p><input type="button" name="name" value="創建新元素 " οnclick="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>? ? ? ? ? ? ? ? ? ?學習了這些實例，其實要自己直接寫估計還是挺為難的，感覺還是不能自己寫下來吧，不過我會更多的練習的，每次在學習做實例的時間都是非常興奮，可以把前面學習的所有的很亂的知識使用上啦，感覺它終于有用啦，原來是實現這個功能的，就寫到這里啦，發現過啦昨天好久啦，要睡覺啦，嘿嘿。
?
總結
以上是生活随笔為你收集整理的javascript的实现事件的一些实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C#的Equals不区分大小写
- 下一篇： opencv第一课 打开一个图片