zoukankan      html  css  js  c++  java
  • [妙味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("
    joya") +";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')  设置

  • 相关阅读:
    转载:从51CTO转来的两篇关于SQL的文章
    转载:几万年前,有一只猴子大闹地府后删库跑路...
    【java/oralce/sql】往一张仅有id,名称,创建时间三个字段的表中插入百万数据需要多久?1分26秒
    处处留心皆学问
    [oracle/java/sql]用于上十万批量数据插入Oracle表的Java程序
    Linux学习_003_虚拟机CentOS 7.5 如何固定IP地址
    Linux学习_002_VMware12.0 Pro 中安装 CentOS-7.5(桌面版)
    Linux学习_001_VMware10.0 && VMware12.0 Pro && VMware14.0 Pro && VMware 15.0 Pro 的安装与破解
    day76_淘淘商城项目_09_商品详情页动态展示实现(jsp+redis) + FreeMarker模板引擎入门 + 商品详情页静态化实现(Win版本的nginx作http服务器)_匠心笔记
    Eclipse注释模板设置详解
  • 原文地址:https://www.cnblogs.com/joya0411/p/3580139.html
Copyright © 2011-2022 走看看