當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS里的onclick事件
生活随笔
收集整理的這篇文章主要介紹了
JS里的onclick事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
可以通過以下代碼了解JS里的onclick事件：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><style>#divclass{cursor:pointer;}#uiclass{}#uiclass li{display:inline-block;}</style><script type="text/javascript">window.onload = function (){document.getElementById("txt").onchange = function (){//alert("我的值改變啦~~~");//事件的方法里面的this：誰調用的方法，方法里的this就是誰 alert(this.value);};//通過文本框調用onchange 那么 onchange里面的this就是文本框// document.getElementById("txt").onchange(); document.getElementById("selNation").onchange = function (){//下拉框的this.value可以獲取到選中的option的value值//var curoptionIndex = this.selectedIndex;//alert(this.childNodes.length);//dom元素的childnodes中包含了所有類型的子節點（html元素節點、文本節點）//alert(this.children.length);//dom元素的children里只包含html元素節點//alert(this.selectedIndex);//alert(this.value+","+this.innerHTML);var curOptionIndex = this.selectedIndex;var opts = this.children;var selectOpt = opts[curOptionIndex];alert(selectOpt.innerHTML);};document.getElementById("txtName").onfocus = focus;document.getElementById("txtName").onblur = blur;document.getElementById("txtPwd").onfocus = focus;var li = document.getElementsByTagName("li");for (var i = 0; i < li.length; i++) {li[i].onclick = doClick;}};function doClick(){this.style.backgroundColor = "white";//選取當前選中li對象的下一個兄弟li對象var nextObj = this.nextElementSibling;//循環判斷是否存在下一個li對象while (nextObj){//修改下一個背景顏色 nextObj.style.backgroundColor = "red";//再把 下一個的下一個對象找出 如果沒有了就返回空 nextObj = nextObj.nextElementSibling;}//找出當前選中的li的前一個li，并設置前一個li的背景色if (isNaN(this.previousElementSibling)){var preObj = this.previousElementSibling;preObj.style.backgroundColor = "blue";preObj = preObj.previousElementSibling;}}function focus(){document.getElementById("msgBox").innerHTML = this.value;alert(this.value);}function blur(){alert("我走了~~~");}//為下拉框 綁定onchange事件</script> </head> <body><div id="divBox" style="margin:100px auto;"><input type="text" value="1" id="txt"/><select id="selNation"><option id="1">中國</option><option id="2">美國</option><option id="3">韓國</option></select><input type="text" id="txtName" value="my i love you~~~~~"/><input type="text" id="txtPwd" value="me too~~~" /></div><div id="msgBox"></div><div id="divclass"><ul id="uiclass"><li>aaaaaaaa</li><li>bbbbbbbb</li><li>cccccccc</li><li>dddddddd</li></ul></div> </body> </html>?
轉載于:https://www.cnblogs.com/miaoying/p/5263306.html
總結
以上是生活随笔為你收集整理的JS里的onclick事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mcgs组态连接oracle数据库,昆仑
- 下一篇： 【操作系统】对操作系统的了解