dow

時間 2019-11-12

標籤 dow 简体版

原文原文鏈接

  事件就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間 

  二、掌握HTML事件 

  三、掌握DOM0級事件 

  四、掌握經常使用的鼠標與鍵盤事件 

  五、掌握this的指向 

  交互是用事件來造成的。 

  綁定事件的方法2,3 

 
 語法：<tag 事件=「執行腳本」></tag> 

 
 功能：在HTML元素上綁定事件。  

 
 說明：執行腳本能夠是一個函數的調用。或者js 

  就是hmtl事件 

  事件的執行腳本 

  （1）ele.onclick = function （）{ 執行腳本}; 

  （2）ele.onclick = fn；function fn（）{ 執行腳本} ; 

  <body> 相似年月日的選擇器 

  <select id="sel"> 

  <option value="1">1</option> 

  <option value="2">2</option> 

  <option value="3">3</option> 

  <option value="4">4</option> 

  <option value="5">5</option> 

  </select> 

  <script type="text/javascript"> 

  var sel=document.getElementById("sel"); 

  sel.onchange=function(){ 

  console.log(this.value) //選擇幾打印幾 

}

  </script> 

  </body> //當下拉，選擇相應的數字時，系統其實也在打印相應的數字 

  分析：當下拉列表的選項發生變化時，觸發onchange事件，控制檯打印下拉列表的value值 

  <head> 

  <style type="text/css"> 

  #btn{width:100px;margin-left:65px;} 

  </style> 

  </head> 

  <body> 

  <form id="form"> 

  用戶名：<input type="text"><br/><br/> 

  &nbsp;密碼：<input type="text"><br/><br/> 

  <input type="submit" value="按鈕" id="btn"> 

  </form> 

  <script type="text/javascript"> 

  var btn=document.getElementById("btn"); 

  var form=document.getElementById("form"); 

  form.onsubmit=function(){ 

  alert("提交成功");} 

  </script> 

  </body> 

  分析：onsubmit事件綁定在<form>標籤上，當點擊「提交」時，觸發onsubmit事件，執行 

  事件的執行代碼 

  按鈕，按下點擊onclick《on 科力可》，執行腳本是彈窗 

  點擊按鈕，調用函數，鼠標滑變紅色，鼠離變成藍色 

  <body> 

  <input type="button" value="彈出」 onclick="alert"(" 我是按鈕」）"> 

  <!--鼠標劃過按鈕時調用mouseoverFn的函數--> 

  <div id 

  簡寫：（this，「參數傳遞」）鼠滑綠，鼠離灰 

  關於this指向在事件觸發的函數中，this是對該DOM對象的引用 

  事情this綁定在什麼樣的Dom上，就被什麼樣的Dom引用。 

  鼠標事件 

  onload：頁面加載時觸發 頁加《on 咯的》 

  onclick：鼠標點擊時觸發 點擊《on 科力可》 

  onmouseover：鼠標滑過期觸發 鼠滑《on 摸s oe》 

  onmouseout：鼠標離開時觸發 鼠離《on 摸s ot》 

  onfoucs：得到焦點時觸發 主要用於表單中 

  onblur：失去焦點時觸發 
 主要用於表單中 

  onchange：域的內容改變時發生 主要用在<select>標籤 

  onsubmit：表單中的確認按鈕被點擊時發生 主要用在<form>標籤 

  onmousedown：鼠標按鈕在元素上按下時觸發 

  onmousemove：在鼠標指針移動時發生 

  onmouseup：在元素上鬆開鼠標按鈕時觸發 

  onresize：當調整瀏覽器窗口的大小時觸發 主要用於window上 

  onscroll：拖動滾動條滾動時觸發 

  多個按鈕，下多個快捷綁定事件的方法。 

  DOM0級事件 

 
 語法：ele.事件=執行腳本 

 
 功能：在DOM對象上綁定事件 

 
 說明：執行腳本能夠是一個匿名函數，也能夠是一個函數的調用。 

  步驟1先經過DOM獲取HTML元素 

  2 .（獲取html元素）.事件=執行腳本 

  腳本能夠是函數，或者js 

  獲取html元素。 

  函數的調用，判斷是否鎖定，以及狀態 

  第二種判斷方法 

  也能夠掉自定義函數 

  點擊全選變成反選： 

  <body> 

  <input id="btn" type="button" value="全選"> 

  <script type="text/javascript"> 

  //獲取按鈕，獲取html屬性 

  var btn=document.getElementById("btn") 

  btn.onclick=function(){ 

  if(this.value=="全選"){ 

  this.value="反選"; 

  }else{ 

  this.value="全選"; 

}

}

  </script> 

  </body> 

  onload 

  鍵盤事件與keyCode屬性 

  onkeydown：在用戶按下一個鍵盤按鍵時發生 

  onkeypress：在鍵盤按鍵被按下並釋放一個鍵時發生 

  onkeyup：在鍵盤按鍵被鬆開時發生 

  keyCode：返回onkeypress、onkeydown或onkeyup事件觸發的鍵的字符代碼，配合鍵盤事件使用。 

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。