JS-WEB-API 整理
阿新 • • 發佈:2018-05-13
原理 listener mod js基礎知識 bsp nodename name 一個 search
JS-WEB-API
常說的JS(瀏覽器執行的JS)包含兩部分:
- JS基礎知識:ECMA 262標準
- JS-WEB-API:W3C標準
W3C標準中關於JS的規定有:
- DOM操作
- BOM操作
- 事件綁定
- Ajax請求(包括HTTP協議)
- 存儲
例如:頁面彈窗是 window.alert(123),瀏覽器需要做:
- 定義一個 window 全局變量,對象類型
- 給它定義一個 alert 屬性,屬性值是一個函數
獲取元素 document.geiElementById(id),瀏覽器需要:
- 定義一個 document 全局變量,對象類型
- 給它定義一個 geiElementById 屬性,屬性值是一個函數
Document Object Model (DOM)
- DOM是哪種基本的數據解構? 樹形結構的文檔對象模型
- DOM操作常用API有哪些?
- DOM 節點的attr 和 propery 有何區別?
DOM節點操作
1、獲取
var a = document.getElementById("div1"); var b = document.getElementsByTagName(‘div‘); var c = document.getElementsByClassName(‘.container‘); var d = document.querySelectorAll(‘p‘);
2、property
修改的是JS對象的標準屬性
3、attribute
修改獲取的是HTML文檔中標簽的屬性
DOM結構操作
新增節點,添加節點
var div1 = document.getElementById(‘div1‘); //添加新節點 var p1 = document.createElement("p"); p1.innerHTML = ‘this is p1‘; div1.appendChild(p1); //添加創建的新元素 //移動已有節點 var p2 = document.getElementById("p2"); div1.appendChild(p2);
獲取父元素與子元素、移除節點
var div1 = document.getElementById("div1"); var parent = div1.parentElement; var child = div1.childNodes; //移除節點 div1.removeChild(child[0]);
BOM操作(Browser Object Model)
- 檢測瀏覽器類型
- 拆解 url 各部分
知識點
- navigator & screen
-
//檢測瀏覽器類型
var ua = navigator.userAgent; var isChrome = ua.indexOf(‘Chrome‘); console.log(isChrome); //screen 獲取屏幕大小 console.log(screen.width); console.log(screen.height);loaction & history
-
//拆解URL各部分
//loaction console.log(location.href); //當前域名
console.log(location.host); //當前域名
console.log(location.protocol); //協議 http: console.log(location.pathname); //當前分目錄名 console.log(location.search); // 查詢部分:‘?’之後部分 console.log(location.hash); //‘#’ 後面的字符 //history history.back(); history.forward();
事件
- 編寫一個通用的事件監聽函數
- 描述事件冒泡流程
- 對於一個無限下拉加載圖片的頁面,如何給每個圖片綁定事件
通用事件綁定
var btn = document.getElementById(‘btn1‘); btn.addEventListener(‘click‘,function(event){ console.log(‘clicked‘); }); function bindEvent(elem,type,fn){ elem.addEventListener(type,fn); } var a = document.getElementById(‘link1‘); bindEvent(a,‘click‘,function(e){ e.preventDefault(); alert(‘clicked‘); })
IE低版本使用 attachEvent 綁定事件,和 w3c 標準不一樣
事件冒泡
按照DOM樹形結構,由子級到祖級的順序傳播
案例:點擊p1彈出激活,點擊其他的彈出取消
<div id="div1"> <p id="p1">激活</p> <p id="p2">取消</p> <p id="p3">取消</p> <p id="p4">取消</p> </div> <div id="div2"> <p id="p5">取消</p> <p id="p6">取消</p> </div> <script type="text/javascript"> var p1 = document.getElementById(‘p1‘); var body = document.body; function bindEvent(elem,type,fn){ elem.addEventListener(type,fn); } bindEvent(p1,‘click‘,function(e){ e.stopPropagation(); alert(‘激活‘); }) bindEvent(body,‘click‘,function(){ alert(‘取消‘); })
事件代理
事件代理就是在祖級DOM元素綁定一個事件,當觸發子孫級DOM元素的事件時,利用事件流的原理來觸發綁定在祖級DOM的事件。
<div id="div1"> <a href="#">a1</a> <a href="#">a2</a> <a href="#">a3</a> <a href="#">a4</a> <!-- 會隨時新增更多的 a 標簽 --> </div> <script type="text/javascript"> var div1 = document.getElementById(‘div1‘); div1.addEventListener(‘click‘,function(e){ //target屬性返回觸發該事件的節點 var target = e.target; //nodeName返回的標簽名都是大寫 if(target.nodeName == ‘A‘){ alert(target.innerHTML); } }) </script>
完善通用綁定事件函數
function bindEvent(elem,type,selector,fn){ if(fn == null){ fn = selector; selector = null; } elem.addEventListener(type,function(e){ var target;
//使用代理 if (selector){ target = e.target;
//如果target是指定的選擇器 if(target.matches(selector)){
//讓target使用fn的方法,修改this的指向 fn.call(target,e); }
//不使用代理 }else{ fn(e); } }) } //使用代理 var div1 = document.getElementById(‘div1‘); bindEvent(div1,‘click‘,‘a‘,function(e){ console.log(this.innerHTML); }) //不使用代理 var a = document.getElementById(‘a‘); bindEvent(div1,‘click‘,function(e){ console.log(a.innerHTML); })
代理的好處
- 代碼簡潔
- 減少瀏覽器內存占用(因為綁一次事件瀏覽器會計一次)
JS-WEB-API 整理