<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>自定義對象方式2：{}形式</title><script type="text/javascript">//演示自定義對象方式2：{}形式var person = {//多個屬性和方法之間都要用逗號隔開name: "孫悟空",age: 999,hi: function () {console.log("person信息=" + this.name + " " + this.age);},sum: function () {}};//使用console.log("外部訪問 name=" + person.name);console.log("外部訪問 age=" + person.age);person.hi();</script></head><body></body></html>
文章插圖
10.事件JavaScript 事件 (w3school.com.cn)
10.1事件介紹什么是事件？事件是電腦輸入設備與頁面進行交互的響應 。我們稱之為事件 。
HTML 事件可以是瀏覽器行為，也可以是用戶行為 。
HTML 事件是發(fā)生在 HTML 元素上的“事情” 。
當在 HTML 頁面中使用 JavaScript 時，JavaScript 能夠“應對”這些事件 。
- 事件一覽表
https://www.w3school.com.cn/jsref/dom_obj_event.asp
文章插圖
- 事件的注冊（綁定）
事件注冊（綁定）：當事件響應（觸發(fā)）后要瀏覽器執(zhí)行哪些操作代碼，叫事件注冊或事件綁定
- 靜態(tài)注冊事件
通過html標簽的事件屬性直接賦于事件響應后的代碼，這種方式叫做靜態(tài)注冊
- 動態(tài)注冊事件
通過js代碼得到標簽的dom對象，然后再通過dom對象.事件名=function(){}，這種方式叫做動態(tài)注冊
js編程可以將瀏覽器整個頁面的所有組件都映射成dom對象
- 動態(tài)注冊事件步驟
- 獲取標簽對象/dom對象
- dom對象.事件名=function(){}
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>onload加載完成事件</title><script type="text/javascript">//定義函數(shù)// function sayOK() {//alert("靜態(tài)注冊 onload 事件sayOK");// }//1.在js中，將頁面窗口映射成window dom對象//2.window對象有很多的屬性和函數(shù)，可以使用//3.window.onload表示頁面被加載完畢//4.后面的function(){}表示頁面加載完畢后，要執(zhí)行的函數(shù)/代碼window.onload = function () {alert("動態(tài)注冊 onload 事件");}</script></head><body>hello~~~<input type="text" value="https://www.huyubaike.com/biancheng/測試"/></body></html>
文章插圖
10.3.2onclick點擊事件onclick：鼠標點擊某個對象
動態(tài)注冊 onclick 事件
- 先拿到id=btn01的button對應的dom對象
- 通過dom對象動態(tài)綁定onclick事件
- 通過document的getElementById方法來獲取對應的dom對象
一般使用window.onload讓整個頁面加載完畢后再動態(tài)注冊
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>onclick 單擊事件</title><script type="text/javascript">function sayOK() {alert("你點擊了sayOK按鈕");}//當頁面加載完畢之后，我們再進行動態(tài)注冊window.onload = function () {//因此想要成功獲取button的dom對象，就應該讓button加載完畢再獲取 。//動態(tài)注冊 onclick 事件//1.先拿到id=btn01的button對應的dom對象//2.通過dom對象動態(tài)綁定onclick事件//3.通過document的getElementById方法來獲取對應的dom對象var btn01 = document.getElementById("btn01");btn01.onclick = function () {alert("你點擊了sayHi按鈕");}}</script></head><body><!--靜態(tài)注冊--><button onclick="sayOK()">sayOK按鈕</button><!--動態(tài)注冊--><button id="btn01">sayHi按鈕</button></body></html>
經(jīng)驗總結擴展閱讀
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
