javascript
JavaScript基础事件（6）
day53
參考：https://www.cnblogs.com/liwenzhou/p/8011504.html#autoid-2-3-8
事件
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標簽來定義事件動作。
常用事件
onclick 當用戶點擊某個對象時調用的事件句柄。 ondblclick 當用戶雙擊某個對象時調用的事件句柄。onfocus 元素獲得焦點。 // 練習：輸入框 onblur 元素失去焦點。 應用場景：用于表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證. onchange 域的內容被改變。 應用場景：通常用于表單元素,當元素內容被改變時觸發.（select聯動）?關于this
?綁定方式：
方式一：
<div id="d1" οnclick="changeColor(this);">點我</div> <script>function changeColor(ths) {ths.style.backgroundColor="green";} </script>注意：
this是實參，表示觸發事件的當前元素。
函數定義過程中的ths為形參。
方式二：
<div id="d2">點我</div> <script>var divEle2 = document.getElementById("d2");divEle2.οnclick=function () {this.innerText="呵呵"; } </script>?
舉例：
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>class相關操作</title><style>.c1 {height: 200px;width: 200px;border-radius: 50%;background-color: grey;}.c2 {background-color: yellow;}</style> </head> <body><!--點擊執行change函數--> <div class="c1 c2 c3" onclick="change(this);">div</div> <div class="c1 c2 c3">div</div> <div class="c1 c2 c3">div</div> <div class="c1 c2 c3">div</div><script>function change(ths) {ths.classList.toggle("c2");//有c2去掉c2變灰，沒有c2變黃 }// 第二種綁定事件的方式，批量處理用第二種var divEles = document.getElementsByTagName("div"); //div標簽有多個，找所有div標簽for (var i=0;i<divEles.length;i++){divEles[i].onclick=function () {this.classList.toggle("c2");//指向被點標簽 }} </script></body> </html>?通過class名去改變樣式，ths.classList.toggle("c2");
效果：
第一種方法處理比較繁瑣，第二種方法可以批量處理某一類標簽。
搜索框示例
onfocus、onblur
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>搜索框示例</title> </head> <body><input type="text" id="i1" value="對子哈特"> <input type="button" value="搜索"><script>// 找到input框var i1Ele = document.getElementById("i1");//找input i1Ele.onfocus=function () { //匿名函數// 把value清空this.value="";};i1Ele.onblur=function () {// 失去焦點之后把如果值為空就填回去if (!this.value.trim()){this.value="對子哈特";}} </script></body> </html>效果：
輸入框中寫了默認值，若直接直接搜索則按默認值搜索，點擊輸入框則默認值消失。
06select聯動示例
onchange
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>select聯動示例</title> </head> <body><select id="s1"><option value="0">--請選擇--</option><option value="1">北京</option><option value="2">上海</option> </select><select id="s2"></select><script>var data = {1: ["昌平區", "朝陽區", "海淀區"], 2: ["靜安區", "閔行區", "浦東區"]};// 給第一個select綁定事件,綁定的是onchange事件var s1Ele = document.getElementById("s1");//獲得id s1的值 s1Ele.onchange = function () {// 取到你選的是哪一個市 console.log(this.value); //獲得s1的值// 把對應市的區填到第二個select框里面var areas = data[this.value]; // 取到市對應的區 對應尋找// 找到s2var s2Ele = document.getElementById("s2");// 清空之前的 s2Ele.innerHTML="";//這種方式清除// 生成option標簽for (var i = 0; i < areas.length; i++) {var opEle = document.createElement("option");//生成option元素 opEle.innerText = areas[i];// 添加到select內部 s2Ele.appendChild(opEle);}} </script> </body> </html>效果：
選擇了s1中的內容，馬上在s2中跳出對應于s1的選項內容。
?
事件
?? ??? ??? ??? ?1. 常用事件
?? ??? ??? ??? ??? ?1. onclick
?? ??? ??? ??? ??? ?2. ondbclick
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?3. onfocus
?? ??? ??? ??? ??? ?4. onblur
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?5.onchange
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?2. 綁定事件的方式
?? ??? ??? ??? ??? ?1. 在標簽里直接寫屬性(οnclick=foo())
?? ??? ??? ??? ??? ?2. 通過JS給標簽綁定事件
?? ??? ??? ?
?? ??? ??? ??? ?3. this --> 代表的是觸發事件的當前標簽
轉載于:https://www.cnblogs.com/112358nizhipeng/p/10210393.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的JavaScript基础事件（6）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux安装配置SVN服务器
- 下一篇： gradle idea java ssm