文章插圖
10.3.2onclick點擊事件onclick：鼠標點擊某個對象
動態注冊 onclick 事件
- 先拿到id=btn01的button對應的dom對象
- 通過dom對象動態綁定onclick事件
- 通過document的getElementById方法來獲取對應的dom對象
一般使用window.onload讓整個頁面加載完畢后再動態注冊
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>onclick 單擊事件</title><script type="text/javascript">function sayOK() {alert("你點擊了sayOK按鈕");}//當頁面加載完畢之后，我們再進行動態注冊window.onload = function () {//因此想要成功獲取button的dom對象，就應該讓button加載完畢再獲取 。//動態注冊 onclick 事件//1.先拿到id=btn01的button對應的dom對象//2.通過dom對象動態綁定onclick事件//3.通過document的getElementById方法來獲取對應的dom對象var btn01 = document.getElementById("btn01");btn01.onclick = function () {alert("你點擊了sayHi按鈕");}}</script></head><body><!--靜態注冊--><button onclick="sayOK()">sayOK按鈕</button><!--動態注冊--><button id="btn01">sayHi按鈕</button></body></html>
文章插圖
文章插圖
文章插圖
10.3.3onblur失去焦點事件onblur 事件會在對象失去焦點時發生 。
onblur 經常用于Javascript驗證代碼，一般用于表單輸入框 。
例子創建兩個輸入框，分別使用靜態注冊和動態注冊的方法，將輸入框中的小寫英文變為大寫
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>onblur 失去焦點事件</title><script type="text/javascript">//靜態綁定function upperCase() {//1.先得到fname輸入框的value值-->得到對應的dom對象//因為靜態綁定是通過html標簽的事件屬性直接賦于事件響應后的代碼，// 本身就是默認的頁面加載完畢再執行的var fname = document.getElementById("fname");fname.value = https://www.huyubaike.com/biancheng/fname.value.toUpperCase();}//動態綁定//在頁面加載完畢之后再進行動態綁定window.onload = function () {//1.得到fname2對應的dom對象var fname2 = document.getElementById("fname2");fname2.onblur = function () {fname2.value = https://www.huyubaike.com/biancheng/fname2.value.toUpperCase();}}靜態：輸入英文單詞
文章插圖
文章插圖
文章插圖
文章插圖
10.3.4onchange內容發生改變事件當元素的值發生改變時，會發生 onchange 事件 。
推薦閱讀
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
