1. 程式人生 > >JS-WEB-API 整理

JS-WEB-API 整理

原理 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),瀏覽器需要做:

  1. 定義一個 window 全局變量,對象類型
  2. 給它定義一個 alert 屬性,屬性值是一個函數

獲取元素 document.geiElementById(id),瀏覽器需要:

  1. 定義一個 document 全局變量,對象類型
  2. 給它定義一個 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 整理