原生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值。