原生js,兼容

時間 2019-11-24

原文原文鏈接

var的做用

，經過'var'聲明的全局變量，其其實是爲'window'對象增長了一個不可配置的屬性, 而不加'var'聲明的全局變量，其其實是爲'window'對象增長了一個能夠配置的屬性,delete 不能夠刪除那些可配置性爲false的屬性" ，某些內置對象的屬性是不可配置的，好比經過變量聲明或者函數聲明建立的全局對象的屬性javascript

delete Object.prototype; // false 不可刪除，該屬性是不可配置的
var a = 'aa';
delete window.a;//false 不可刪除，該屬性是不可配置的
function test(){};
delete window.test;//false 不可刪除，該屬性是不可配置的

事件對象
1.事件綁定的方法：addEventListener,(ie>=9),attachEvent(ie7,ie8)
2.獲取事件的兼容方法：var event = window.event || arguments[0]

        firefox裏的event跟IE裏的不一樣，IE裏的是全局變量，隨時可用；firefox裏的要用參數引導才能用
      參考：http://www.cnblogs.com/snandy/archive/2011/03/07/1976317.htmlhtml

冒泡
IE: window.event.cancelBubble=true
w3c: e.stopPropagation()

function stopBubble(e) {

    // 若是提供了事件對象，則這是一個非IE瀏覽器

    if ( e && e.stopPropagation ) {

        // 所以它支持W3C的stopPropagation()方法 

        e.stopPropagation();

    } else {

        // 不然，咱們須要使用IE的方式來取消事件冒泡

        window.event.cancelBubble = true;

    }

}

默認事件
IE: e.returnValue = false;
w3c: e.preventDefault()

function stopDefault( e ) {

    // 阻止默認瀏覽器動做(W3C)

    if ( e && e.preventDefault ) {

        e.preventDefault();

    } else {

        // IE中阻止函數器默認動做的方式

        window.event.returnValue = false;

    }

    return false;

}

javascript的return false只會阻止默認行爲，而是用jQuery的話則既阻止默認行爲又防止對象冒泡java

react阻止默認事件

阻止冒泡事件分三種狀況：react

A、阻止合成事件間的冒泡，用e.stopPropagation();
B、阻止原生事件與最外層document上的事件間的冒泡，用
e.nativeEvent.stopImmediatePropagation();
C、阻止合成事件與除最外層document上的原生事件上的冒泡，經過判斷e.target來避免
jquery

	合成事件	除最外層document外	最外層的document
原生事件			e.nativeEvent.數組 stopImmediatePropagation()瀏覽器
合成事件	e.stopPropagation()	判斷e.target來避免

escape,encodeURI,encodeURIComponent區別

escape不編碼字符有69個：*，+，-，.，/，@，_，0-9，a-z，A-Z服務器

encodeURI不編碼字符有82個：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z函數

encodeURIComponent不編碼字符有71個：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z

encodeURI用來編碼整個url,encodeURIComponent用來編碼url中的參數。
escape方法已被廢棄。在編碼整個url時，encodeURIComponent會把http和端口後的冒號也編碼測試
unload,beforeunload事件：

$(window).on('beforeunload', function() {  
    alert(1);  
});

但是這種方法只在ie瀏覽器有效果。

解釋：

1 ,其實beforeunload是起了做用的，只不過alert()彈框在瀏覽器中沒有出現（是大部分瀏覽器會阻止正在關閉的窗口彈對話框）

2, 測試這個，咱們能夠對後臺發送請求，看看後臺數據是否發生變化（AJAX的話要同步，否則這個函數返回AJAX直接被cancel了.）

3, beforeunload在ff中不兼容，咱們同時能夠加上unload事件()
4 ,惟一能阻止頁面關閉的就是beforeunload返回truthy value，而且用戶點擊了Cancel/No，瀏覽器會負責跳出個confirm對話框，返回值能夠會作爲提示的一部份也可能壓根就不用。
5,這兩個事件的區別：

1.onunload事件是已經從服務器讀取到了數據，在替換到當前頁面以前執行的。

onbeforeunload事件是正要去服務器讀取數據尚未讀取到頁面數據時執行的，所以onbeforeunload事件優先於onunload事件執行，能夠阻止onunload事件的執行。

2.onunload事件在窗口打開、刷新、關閉時都會執行。

onbeforeunload事件在新窗口被打開的時候並不會執行，只在刷新和關閉時執行。

注：

1.全部的Falsy值，當進行邏輯判斷時均爲false。Falsy值包括：false、undefined、null、正負0、 NaN、」"。 2.其他全部的值均爲Truthy，當進行邏輯判斷時均爲true。值得注意的是，Infinity、空數組、」0″都是Truthy值。