【暑假學習筆記】之——JavaScript的自定義物件、繫結事件及處理機制
阿新 • • 發佈：2019-02-14
假期已經學了10天，但是事情一直比較多，馬上大三了，做你認為有意義的事！
這是js學習的最後一部分：
自定義物件：
在Js中，除了Array、Date、Number等內建物件外，開發者可以通過Js程式碼建立自己的物件。它也稱為JSON物件。
自定義物件有三種建立方式：
網頁示例：包括三個按鈕，每個按鈕點選以後會彈出三個alert(); 裡面的話是用來測試的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo1_JSON物件</title> <script type="text/javascript"> //1.採用直接量的方式建立物件 function f1() { var student = {"name":"徐靜", "age":20, "work":function(){alert("我愛學習");} }; alert(student.name); alert(student.age); student.work(); } //2.採用內建構造器建立物件 function f2() { var teacher = new Object(); teacher.name = "燕富成"; teacher.age = 21; teacher.work = function() { alert("我最帥"); } alert(teacher.name); alert(teacher.age); teacher.work(); } //3.採用自定義構造器建立物件 function Coder(name, age, work) { this.name = name; this.age = age; //this指代當前物件，.job是給此物件增加job屬性， =work是將引數work賦值給此屬性 this.job = work; } function f3() { var coder = new Coder("lisa", 20, function() { alert("我想學jQuery"); }); alert(coder.name); alert(coder.age); coder.job(); } </script> </head> <body> <input type="button" value="按鈕1" onclick="f1();"> <input type="button" value="按鈕2" onclick="f2();"> <input type="button" value="按鈕3" onclick="f3();"> </body> </html>
其中自定義構造器會在工作中經常使用，它指明瞭該物件具有的屬性，非常直觀。
事件繫結
通過給標籤繫結事件，可以在使用者對網頁進行操作的時候觸發，動態顯示網頁。繫結事件的方法有兩種：
1.直接定義：標籤上直接定義，獲取事件，需要在定義的函式裡傳入event引數，event是瀏覽器生成的，只需要呼叫即可。
2.後繫結事件：在頁面載入之後呼叫window.onload 方法，獲取元素之後，給元素繫結事件，這裡瀏覽器自動傳入event，直接函式接收。
網頁示例：兩個按鈕，在控制檯輸出。Chrome瀏覽器按F12開啟控制檯。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo2_後繫結事件</title> <script type="text/javascript"> //1.直接定義事件 function f1(e) { console.log("aaa"); console.log(e); } //2.後繫結事件,瀏覽器自動傳入event，直接接收就好 window.onload = function() { var btn = document.getElementById("btn2"); btn.onclick = function(e) { console.log("bbb"); console.log(e); }; } </script> </head> <body> <input type="button" value="按鈕1" onclick="f1(event);"/> <input type="button" value="按鈕2" id="btn2"/> </body> </html>
JS的事件處理機制
當我點選一個按鈕時，會由內向外的觸發他的父類，爺爺類的事件，這叫做冒泡。
當我給帶有圖片的div加入單擊事件以後，通過事件物件獲取事件源，可以對該div內的所有標籤繫結單擊事件。
比如一個計算器，當它有很多個按鈕的時候，我們不可能一個一個按鈕去繫結單擊事件，這時我們就可以通過給div繫結單擊事件來解決這個問題。
示例程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo3_事件傳播機制</title> <style type="text/css"> div { width: 500px; border: 1px solid red; padding: 30px; } p { border: 1px solid red; padding: 30px; } </style> <script type="text/javascript"> function f1(event) { alert("按鈕"); //停止冒泡,為了相容瀏覽器,需要判斷 if(event.stopPropagation) { event.stopPropagation(); }else { event.cancelBubble = true; } } //通過事件物件獲取事件源 function f2(e) { var obj = e.srcElement || e.target; console.log(obj); } </script> </head> <body> <div onclick="alert('div');"> <p onclick="alert('p');"> <input type="button" value="按鈕" onclick="f1(event);"/> </p> </div> <div onclick="f2(event);"> <a href="#">頂部</a> <img src="../img/01.jpg"/> <span>abc</span> </div> </body> </html>
由於不同的瀏覽器所給的event物件的方法也不一樣，為了相容瀏覽器，在停止冒泡和獲取事件源的時候都要進行判斷。
謝謝你看到這裡！寫作倉促，有疏漏之處還請評論指正，共同探討進步！