<JavaScript>总结：注意点

2018-05-09 本文已影响11人玉圣

一、事件

1、a标签中点击事件

1、描述示例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>a标签点击事件</title>
</head>
<body>
    <a href="images/1.jpg" title="图片1"></a>
    <a href="images/2.jpg" title="图片2"></a>
    <script>
        window.onload = function () {
            var aLists = document.getElementByTag("a");
            for(var i=0; i<aLists.length; i++) {
                aLists[i].onclick = function() {
                    console.log("点击了" + this.title);  //注意这里用this
                }
            }
        }
    </script>
</body>
</html>

2、现象需求：
当点击了a标签之后，会跳转到相应的图片展示页面。

如果点击a标签之后，不想要跳转到链接的href的地址，而仅仅是想要只想一些其他的操作。

3、解决方案：
若不想跳转到指定的链接地址，则可以通过a标签的onclick事件的函数，返回一个false，即可。代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>a标签点击事件</title>
</head>
<body>
    <a href="images/1.jpg" title="图片1"></a>
    <a href="images/2.jpg" title="图片2"></a>
    <script>
        window.onload = function () {
            var aLists = document.getElementByTag("a");
            for(var i=0; i<aLists.length; i++) {
                aLists[i].onclick = function() {
                    console.log("点击了" + this.title);  //注意这里用this
                    return false;
                }
            }
        }
    </script>
</body>
</html>

4、注意：
这里需要注意的是，在遍历处理a（或其他）标签的点击（其他监听）事件的时候，要在其function中使用 this 来进行代替列表子元素去处理，因为这里涉及到同步和异步的问题，即当点击这个标签的时候，所对应的索引i 可能已经变化，并非当前的这个元素，因此可能会导致事件混乱。

2、高频率事件的节流：

在一些事件使用的时候，调用的频率是非常高的，比如：
window.onload window.onresize window.onscroll 等等
频繁的调用这些事件，会使得内存消耗过大，因此，需要在使用过程中避免调用过于频繁，这里就需要用到节流的技巧，如：

    var timer = null;
    var mouseDelay = 200;   //一般鼠标的延迟时间
    window.onscroll = function () {
        clearTimeout(timer);
        //节流
        timer = window.setTimeout(function () {
            //do something...
        }, mouseDelay);
    };

二、属性：

1、style.xxx和offsetxxx的区别及注意点：

以left为例
style.left只能获取行内的样式，而offsetLeft则可以获取到所有的
注意：在JavaScript中进行设置element.style.xxx的时候，是设置到其标签（行内）上的属性的，所以如果在做一些动画或者过渡效果的时候，通过修改已经设置了的行内style属性时，是需要在<style>中的动画（或过渡效果）的属性中添加!important 来提高此属性的级别，以达到相应的效果。

offset

各属性区别

2、兼容性属性：

1、opacity 在IE中的兼容性问题：
在IE的某些低版本中，不支持opacity属性，需要单独处理，解决方案如下：

    div {
        opacity: 0.4;
        filter: alpha(opacity: 40);
    }

三、动画：

1、缓动动画：

1、缓动公式：

var begin = 0, end = 500;
begin += (end-begin)*0.1;

2、缓动动画：

setInterval(function () {
  begin += (end-begin)*0.1;
  element.style.xxx = begin + "px";  //这里的xxx可以设置为element元素的某个属性，或者是其他的代码
 }, 10);

四、函数：

1、监听页面加载完毕

1.1、window.onload方法：
onload方法会等DOM元素加载完毕，并且还会等到资源也加载完毕才会执行，在性能上会有些低

1.2、DOMContentLoaded事件：
只会等到DOM元素加载完毕就会执行回调，会比onload方法更快

        document.addEventListener("DOMContentLoaded", function () {
            //DOM元素加载完毕
        });

注意：
addEventListener在IE8及以下并不支持，可以使用attachEvent方法进行替换，但是其中并没有DOMContentLoaded 这个事件，所以，需要使用其他的事件来替换，
document.readyState属性中有如下状态：
uninitialized ：还未开始载入
loading ：载入中
interactive ：已加载，文档于用户可以开始交互
complete ：载入完成

onreadystatechange 事件就是专门用于监听document.readyState 属性的改变的，即上面的状态有改变的时候，都会调用此事件。

        document.attachEvent("onreadystatechange", function () {
            //onreadystatechange,状态改变
            if (document.readyState==="complete") {
                //加载完毕
            }
        });

1、cloneNode方法注意点：

在原生js中，cloneNode 方法仅仅是浅复制，也就是说，只会复制元素的属性，并不会拷贝其方法。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clone方法</title>

    <script>
        window.onload = function () {
            var ul = document.getElementById("ul");
            var li = document.getElementById("li1");
            li.onclick = function() {
                alert(this.innerText);
            };

            //浅复制
            document.getElementById("btn1").onclick = function() {
                var nLi = li.cloneNode(true);
                ul.append(nLi);
            };

            //深复制
            document.getElementById("btn2").onclick = function() {
                var nLi = li.cloneNode(true);
                for (var name in li) {
                    if (name.indexOf("on")===0) {
                        nLi[name] = li[name];
                    }
                }
                ul.append(nLi);
            };
        };

    </script>
</head>
<body>
<button id="btn1">浅复制</button>
<button id="btn2">深复制</button>
<ul id="ul">
    <li id="li1">我是第一个li</li>
</ul>

</body>
</html>