原生js总结(干货)
1.js基本数据类型
number string boolean underfined null
2.查找文档中的特定元素
document.getElementById("id");
document.getElementByTagName("div");
document.getElementByClassName("aa"); //有兼容问题
document.getElementByName("username"); //有兼容问题
3.定时器
setTimeout(function(){
执行代码
},time); //time为定时几秒
4.js获取块元素宽高
var oDiv = document.getElementById("id"); //获取元素id
oDiv.offsetWidth //offsetWidth = content + padding + border
oDiv.offsetHeight
oDiv.offsetLeft
oDiv.offsettop
oDiv.offsetParent
5.事件冒泡与事件捕获
事件冒泡：从触发的事件开始，自下而上的触发事件,默认为false // 我 -->爸爸 -->爷爷
事件捕获：从document到触发事件的节点，自上而下的触发事件,第三个参数为true // 爷爷-->爸爸-->我
然后，上代码
HTML:
1 <div id="div1"> 2 <div id="div2" class="div2"> 3 4 </div> 5 </div>
js:
事件冒泡（结果：div1 div2）
1 var oDiv1 = document.getElementById("div1"); 2 var oDiv2 = document.getElementById("div2"); 3 oDiv1.addEventListener("click",function (){ 4 alert("div1被触发"); 5 }); 6 oDiv2.addEventListener("click",function (){ 7 alert("div2被触发"); 8 });
事件捕获(结果：div2 div1)
1 var oDiv1 = document.getElementById("div1"); 2 var oDiv2 = document.getElementById("div2"); 3 oDiv1.addEventListener("click",function (){ 4 alert("div1被触发"); 5 }); 6 oDiv2.addEventListener("click",function (){ 7 alert("div2被触发"); 8 },true);
ps:阻止事件冒泡的函数：
jq: e.stopPropagation 可以实现到当前被触发元素为止，不再向上冒泡
