[妙味DOM]第六课：鼠标滚轮和COOKIE

知识点总结：

•  鼠标滚轮事件

存在兼容性问题：
　　IE/chorme : onmousewheel
　　FF : DOMMouseScroll，必需用在addEventListener下，例如：

if (obj.addEventListener) {
    obj.addEventListener('DOMMouseScroll',fn,false);    
}

注：addEventListener也需要做兼容，该方法在FF和chorme有效，在IE中是attachEvent

滚轮属性：
　　IE/chorme:
　　　　ev.wheelDelta
　　　　　　下:-120
　　　　　　上:120

　　FF:
　　　　ev.detail
　　　　　　下:3
　　　　　　上:-3

考虑到兼容性，通过布尔值为进行兼容的处理

        var oDiv = document.getElementById('div1');
        var b = true; //默认方向：向下

        //事件绑定兼容
        var bind = function(obj,eventName,eventFn){
            if (obj.addEventListener){
                obj.addEventListener(eventName,eventFn,false);
            } else {
                obj.attachEvent('on'+eventName,function(){
                    eventFn.call(obj);
                });
            }
        };
        //获取方向 
        var getDir = function(dir){
            if (dir){
                return '向下';
            } else {
                return '向上';
            }
        };

        
        if (oDiv.addEventListener){
            bind(oDiv,'DOMMouseScroll',function(ev){
                //firefox:下（3） 上（-3）
                var ev = ev || event;
                b = ev.detail>0 ? true : false;
                console.log(getDir(b));
            });
            bind(oDiv,'mousewheel',function(ev){
                //IE和chrome: 下（-120） 上（120）
                var ev = ev || event;
                b = ev.wheelDelta<0 ? true : false;
                console.log(getDir(b));
            });
        }

 

 

如果阻止鼠标的默认行为：
　　IE/chorme : return false
　　FF :
　　　　obj.onclick = fn =>return false;
　　　　obj.addEventListener('click',fn,false) => ev.preventDefault();

　　　　兼容处理:

            if(ev.preventDefault) {
                ev.preventDefault();
            }

•  cookie

1、cookie以域名的形式来存放的
2、一个域名下存放的cookie个数有限制，不同浏览器存放的个数不一样
3、cookie的内容大小也有限制，不同浏览器存放大小不一样
4、cookie默认是临时存放的，即浏览器关闭消失（注：不是选项卡）
5、cookie存放格式：

document.cookie = "名字=值"

获取cookie，即alert(document.cookie)，显示结果把当前网站所有的cookie显示出来，并用分号+空格的形式串联起来

例如：
    document.cookie = "username=joya"
    document.cookie = "age=11"
    alert(document.cookie)    =>结果为username=joya; age=11


document.cookie="名字＝值;expires="+字符串格式的时间

即：
    var oDate = new Date();  获取当前时间
    oDate.setDate(oDate.getDate()+7);   //cookie存放7天，setDate(18)表示设置日期18号，通常cookie的使用是当前的时间+几天，因此用getDate来获取当前日期+多少天
    document.cookie = "username ="+ encodeURI("\njoya") +";expires=" + oDate.toGMTString();  
 //注：1、需要是字符串格式的时间，oDate是对象，需要进行转换，即toGMTString
　　   2、内容最好编码存放，即encodeURI('值'),与这个相反的有decodeURI('编码')

　　alert(decodeURI(document.cookie));

•  封装cookie(增加setCookie，读取getCookie，删除removeCookie)

见js框架

 

• localStorage

localStorage.getItem('rd_lang')  获取

localStorage.setItem('rd_rang')  设置