原生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　　可以实现到当前被触发元素为止，不再向上冒泡

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有