1.作用域细节
<script> function fun(n, o) { console.log(o); return { fun: function (m) { return fun(m, n) } } } var a = fun(0); a.fun(1); a.fun(2); a.fun(3); console.log("第二次使用") var b = fun(0).fun(1).fun(2).fun(3); var c = fun(0).fun(1); c.fun(2); c.fun(3); </script>
2.事件委托（事件代理）
为什么要使用事件委托：在对于多个一样的选项标签，比如li这种，你绑定事件的时候使用循环选取，这个时候后期添加的节点没有在选择之中，那么后期添加的节点是没有绑定上事件。我们通过事件冒泡，事件不直接绑定在li上面，而是后冒泡的父节点里面。这样的好处在于通过后面的父节点获取实时节点绑定改变内容。
<body> <ul id="uls"> <li class="li">1</li> <li class="li">2</li> <li class="li">3</li> </ul> <button id="btn">添加节点</button> <script> var uls = document.getElementById("uls") var li = document.getElementsByClassName("li") console.log("开始执行") for (let i = 0; i < li.length; i++) { console.log(li[i]) li[i].onclick = function () { this.style.background = "red"; } } var btn = document.getElementById("btn"); var a = li.length + 1; btn.onclick = function () { var node = document.createElement("li"); node.innerHTML = a++; uls.appendChild(node); } </script> </body>
这个时候后期添加节点是没有绑定到事件的，则使用事件绑定。
在IE/Opera中，是window.event，而在Firefox中，是event
<body> <ul id="uls"> <li class="li">1</li> <li class="li">2</li> <li class="li">3</li> </ul> <button id="btn">添加节点</button> <script> var uls = document.getElementById("uls") var li = document.getElementsByClassName("li") console.log("开始执行") uls.onclick = function (e) { var e = window.event || e; console.log(e.srcElement) var tar = e.srcElement || e.target; if (tar.nodeName == "LI") { tar.style.background = "red"; } } var btn = document.getElementById("btn"); var a = li.length + 1; btn.onclick = function () { var node = document.createElement("li"); node.innerHTML = a++; uls.appendChild(node); } </script> </body>3.关于js类型转换的问题
遵守三条准则
1.加法里面：字符串第一优先，number第二优先，没有字符串或者数字，那么除了null,true和其他相加转换为1，undefined这种是相加为NAN，对象和任何相加为string
4.websocket和ajax
websocket是一直连接通讯，ajax是请求才连接，不请求就不连接
题外话：document.getElementByTagName打印出来是HTMLCollection，函数参数arguments打印出来是arguments不是数组，使用Array.from.
5.获取一个节点下面的所有节点
<div id="d"> <p> <li><span></span></li> </p> <span><em></em></span> </div> <script> var d = document.getElementById("d") console.log(d.getElementsByTagName("*")) </script>6.给数组添加一个实例化固有的去重方法
转载请标明出处:Web前端易错点总结（三）
文章来源: https://blog.csdn.net/qq_39125445/article/details/91955287