生活随笔
收集整理的這篇文章主要介紹了
js之事件编程
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
js事件編程三要素：
?? ??? ??? ?1）事件源：html標(biāo)簽
?? ??? ??? ?2）事件監(jiān)聽：定義一個函數(shù)
?? ??? ??? ?3）注冊事件監(jiān)聽器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>事件編程的分類</title><!--常用的：和點擊相關(guān)的事件單擊點擊 -- 屬性名稱:onclick雙擊點擊--- ondbclick和焦點相關(guān)的事件獲取焦點 onfocus失去焦點 onblur和選項卡發(fā)生變化相關(guān)的事件:onchange 省市聯(lián)動效果(原生js完成)和頁面載入相關(guān)的事件 onload ,在body中使用將body中的內(nèi)容加載完會觸發(fā)該事件!鼠標(biāo)經(jīng)過事件:onmouseover鼠標(biāo)移出事件:onmouseout...--></head><body><input type="button" value="單擊" onclick="testClick()"/><br /><input type="button" value="雙擊" ondblclick="testDbClick()"/><br /><input type="text" value="請輸入用戶名" id="username" onfocus="testFocus()" onblur="testBlur()" /><span id="tip"></span><br />籍貫：<select id="jiguan" onchange="testChange()"><option value="請選擇">請選擇</option><option value="陜西省">陜西省</option><option value="山西省">山西省</option><option value="廣東省">廣東省</option></select><select id="city"><!--設(shè)置select標(biāo)簽對象innerHTML = "<option value="西安市">西安市</option>"--></select></body><script>function testClick(){alert("觸發(fā)了單擊點擊事件");}function testDbClick(){alert("觸發(fā)了雙擊點擊事件");}function testFocus(){//獲取id="username"所在的input標(biāo)簽對象var input=document.getElementById("username");//設(shè)置input標(biāo)簽對象的value屬性input.value="";}function testBlur(){//獲取input標(biāo)簽對象同時獲取文本輸入框的內(nèi)容var username = document.getElementById("username").value ;//獲取id="tip"所在的span標(biāo)簽對象var span = document.getElementById("tip") ;//判斷if(username == "tom"){//設(shè)置span它的innerHTML屬性span.innerHTML="用戶名不可用".fontcolor("red") ;}else{span.innerHTML= "用戶名可用".fontcolor("green") ;}}function testChange(){//獲取id="jiguan"所在的select標(biāo)簽對象并且獲取選擇的內(nèi)容var jiguan=document.getElementById("jiguan").value;//獲取id="city"所在的select標(biāo)簽對象var city=document.getElementById("city");city.innerHTML="";if(jiguan=="陜西省"){var arr=["西安","銅川","榆林","商洛"];for(var i=0;i<arr.length;i++){//獲取每一個arr[i]//設(shè)置id="city"的select標(biāo)簽對象innerHTML = "<option value="西安市">西安市</option>"city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;}}if(jiguan=="山西省"){var arr= ["太原市","大同市","晉中市","運城市"] ;for(var i=0;i<arr.length;i++){//獲取每一個arr[i]//設(shè)置id="city"的select標(biāo)簽對象innerHTML = "<option value="西安市">西安市</option>"city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;}}if(jiguan=="廣東省"){var arr=["深圳市","東莞市","惠州市","中山市"] ;for(var i=0;i<arr.length;i++){//獲取每一個arr[i]//設(shè)置id="city"的select標(biāo)簽對象innerHTML = "<option value="西安市">西安市</option>"city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;}}}</script>
</html>
?
?
總結(jié)
以上是生活随笔為你收集整理的js之事件编程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
