原生js,兼容

  • var的作用

,通过'var'声明的全局变量,其实际上是为'window'对象增加了一个不可配置的属性, 而不加'var'声明的全局变量,其实际上是为'window'对象增加了一个可以配置的属性,delete 不可以删除那些可配置性为false的属性" ,某些内置对象的属性是不可配置的,比如通过变量声明或者函数声明创建的全局对象的属性

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.html

  • 冒泡
    IE: window.event.cancelBubble=true
    w3ce.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的话则既阻止默认行为又防止对象冒泡

  • react阻止默认事件

    阻止冒泡事件分三种情况:

    A、阻止合成事件间的冒泡,用e.stopPropagation();
    B、阻止原生事件与最外层document上的事件间的冒泡,用
        e.nativeEvent.stopImmediatePropagation();
    C、阻止合成事件与除最外层document上的原生事件上的冒泡,通过判断e.target来避免
     

      合成事件     除最外层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值。
   

猜你喜欢

转载自my.oschina.net/u/3272730/blog/1611953