整理一些js容易混淆遗忘的东西

2016-05-17 本文已影响1732人李代宁

程序猿.jpg

1. 事件冒泡

同种事件同时实现时子元素优先触发,如以下代码:

...
<input type="button" name="" id="" value="" />
...
var btn = document.querySelector("input");
document.onclick = function () {
    console.log("doc点击");
 }
btn.onclick = function () {
    console.log("btn点击");   
}

点击btn时相对于也点击了整个文档,这是会先打印btn点击,再打印doc点击,在console.log("btn点击");下方添加window.event.cancelBubble = true;,这时只打印btn点击,这就是如何取消事件冒泡.

2.阻止系统的默认事件

鼠标右键时会弹出系统默认的菜单,如果想自己定义一个菜单就要消除系统默认的菜单,在你的右键函数最后写上return false;或者event.preventDefault()即可.但是此方法并不被ie支持，在ie下需要用window.event.returnValue = false;来实现.(我是比较讨厌ie的,大家都懂的...), 下面是我写的右键菜单,比较简单,代码就不写了哈.

鼠标右键.png

3.几个事件兼容

(1)firefox

firefox火狐浏览器中事件为触发函数的第一个参数
其他浏览器为window.event

var evObj = ev || window.event;

(2)兼容ie的事件绑定函数

...
div{
    width: 100px;
    height: 100px;
    background-color: yellow;
}
...
<div></div>
...
var div = document.querySelector('div');
if(window.navigator.userAgent.indexOf() =='IE'){
    div.addEventListener('onclick' ,function(){
        alert(1)
    })
    }else{
        div.addEventListener('click',function(){
            alert(1)
        })
}

window.navigator.userAgent.indexOf() ==‘IE’也可以写成window.navigator.userAgent.indexOf(‘IE’) == -1

(3)事件监听兼容

function fn() {
    alert(1);
}
if (document.addEventListener) {
    document.addEventListener("click", fn);
} else if (document.attachEvent) {
    // 兼容ie6-8
    // 事件名需要加on
    document.addEventListener("onclick", fn)
}

document.attachEvent就是为了兼容IE6-IE8,而且事件名要加on

3.各种宽度

clientWidth 包括width和padding
offsetWidth 包括width,padding和border

innerWidth 包括width和padding
outerWidth 包括width,padding和border

4.时间获取

getDay() 返回表示星期的某一天的数字, 如果今天是周二就返回2
getDate() 返回月份的某一天, 如果今天是17号就返回17
getTime() 返回距 1970 年 1 月 1 日之间的毫秒数

5.cookie

cookie: 保存在浏览器上的数据
大小: 5kb
数据类型: 数字/字符串
数据格式: 键值对(key-value)
用处: 登录界面,保存用户名和密码

document.cookie = "user1=marry;";
document.cookie = "pwd=123456;";
document.cookie = "user=bibhi;";
// 保存到cookie的数据是一整个字符串 
// string.split(分割符) 字符串切割
var cookies = document.cookie.split("; ");
for (var i = 0; i < cookies.length; i++) {
        // 把每一个条目通过=切割
        // 0位 -> 条目的描述(key)
        // 1位 -> 具体的值(value)
        var t = cookies[i].split("=");
        console.log(t[0]);
        console.log(t[1]);
}

打印结果.png

保存用户名和密码这种东西可以写一个框架,以后要的时候调用就可以了,框架如下:

function setCookie(name, www) {
    document.cookie = name + "=" + www + ";";
}
// 获取
function getCookie(name) {
    // 条目数组
    var cookies = document.cookie.split("; ")
    for (var i = 0; i < cookies.length; i++) {
        var a = cookies[i].split("=")
            // a中包含两个数据
            // 0->name
            // 1->www
        if (a[0] == name) {
            return a[1];
        }
    }
    // 如果没有找到对应内容返回false
    return false;
}
function removeCookie(name) {
    setCookie(name,"");
}

忘了写cookie的一些注意事项了:
1.字符串切割时使用"; "切割( 要有空格)
2.cookie中不要保存中文
3.当添加的数据key值不存在时新建条目 , 如果key值存在覆盖原数据覆盖后条目在cookie的末尾
4.一旦保存数据会一直存在

6.图片懒加载

如果一个页面很长,照片很多,当用户打开页面时如果所有照片都加载了会很浪费时间,用户体验较差.所以可以设置当用户向下滑动滚轮时再加载剩余的照片,这就是图片懒加载.
整体思想: 当页面滚动的距离大于图片距顶端的距离与窗口可视高度的差时,图片开始加载
具体写法如下:

简单的设置下图片的样式:
<style type="text/css">
    img{
        width: 600px;
        height: 400px;
        background-color: #CCCCCC;
        position: absolute;
        top: 1000px;
    }
</style>
注意图片地址要写在 data-src 里
<body>
        <img src="" data-src = "http://img2.zol.com.cn/product/98_940x705/577/ceDYOL5WHbbM.jpg"/>
</body>
js部分:
<script type="text/javascript">
        var img = document.querySelector("img");
        // 图片距顶端距离
        var t = img.offsetTop;
        // 窗口可视高度
        var  h = document.documentElement.clientHeight;
        // 显示图片所需要的最小自动距离
        var distance = t - h;
        // 滑动触发
        window.onscroll = function () {
            // 滑动时 顶端距离
            var scrollTop = document.body.scrollTop || window.pageYOffset ||document.documentElement.scrollTop;
            // 懒加载
            if (scrollTop >= distance) {
                var imPath = img.getAttribute("data-src");
                img.setAttribute("src", imPath);
            }
        }
</script>

这里scrollTop是一个比较头疼的问题,又涉及到兼容的问题
(1)IE6/IE7/IE8：
对于没有doctype声明的页面里可以使用 document.body.scrollTop来获取 scrollTop高度；
有声明的可以直接使用document.documentElement.scrollTop；
(2)Firefox:
直接用document.documentElement.scrollTop ；
(3)chrome:
document.body.scrollTop和document.documentElement.scrollTop ；可能都取不到值
(4)Safari:
有自己获取scrollTop的函数： window.pageYOffset ；
所以保险的写法就是var scrollTop = document.body.scrollTop || window.pageYOffset ||document.documentElement.scrollTop;, 不管你是啥浏览器我都兼容.yi