事件： 绑定事件的区别：
为元素解绑事件：
第一种解绑的方式:
第二种解绑的方式:
第三种解绑的方式:
绑定事件和 解绑事件的兼容代码：
1 //绑定事件 和 取消绑定的 兼容代码： 2 function addEventListener(ele,type,fn) { 3 if(ele.addEventListener){ 4 ele.addEventListener(type,fn,false); 5 }else if(ele.attachEvent){ 6 ele.attachEvent("on"+type,fn); 7 }else{ 8 ele["on"+type] = fn; 9 }10 }11 12 function removeEventListener(ele,fn) {13 if(ele.removeEventListener){14 ele.removeEventListener(type,false);15 }else if(ele.detachEvent){16 ele.detachEvent("on"+type,fn);17 }else{18 ele["on"+type] =null;19 }20 }VIEw Code
到目前为止，common.Js 的代码如下：
@H_404_293@
1 /** 2 * 根据ID 或者根据tagname 返回相应的元素 3 * */ 4 function getID$(ID){ 5 return document.getElementByID(ID); 6 } 7 function getTags$(tagname) { 8 return document.getElementsByTagname(tagname) 9 }10 11 //绑定事件 和 取消绑定的 兼容代码：12 function addEventListener(ele,fn) {13 if(ele.addEventListener){14 ele.addEventListener(type,false);15 }else if(ele.attachEvent){16 ele.attachEvent("on"+type,fn);17 }else{18 ele["on"+type] = fn;19 }20 }21 22 function removeEventListener(ele,fn) {23 if(ele.removeEventListener){24 ele.removeEventListener(type,false);25 }else if(ele.detachEvent){26 ele.detachEvent("on"+type,fn);27 }else{28 ele["on"+type] =null;29 }30 }common.Js
事件冒泡：
1 <!DOCTYPE> 2 <HTML lang="en"> 3 <head> 4 <Meta charset="UTF-8"> 5 <Title>这是网页标题</Title> 6 <style> 7 #dv1{ 8 wIDth: 300px; 9 height: 300px;10 background-color: cyan;11 }12 #dv2{13 wIDth: 200px;14 height: 200px;15 background-color: red;16 }17 #dv3{18 wIDth: 100px;19 height: 100px;20 background-color: green;21 }22 </style>23 </head>24 <body>25 <div ID="dv1">26 <div ID="dv2">27 <div ID="dv3"></div>28 </div>29 </div>30 <script src="Js/common.Js"></script>31 <script>32 getID$("dv1").onclick = function () {33 console.log(this.ID); 34 };35 getID$("dv2").onclick = function () {36 console.log(this.ID); 37 };38 getID$("dv3").onclick = function () {39 console.log(this.ID); 40 };41 </script>42 </body>43 </HTML>事件冒泡示例
事件冒泡有很大的坏处，一般，我们都是组织事件冒泡的。
阻止事件冒泡：
事件的阶段：
1，事件捕获阶段（1代表） ：从外到里。
2，事件目标阶段（2代表）
3，事件冒泡阶段 （3代表）：从里到外 。
1 <!DOCTYPE> 2 <HTML lang="en"> 3 <head> 4 <Meta charset="UTF-8"> 5 <Title>这是网页标题</Title> 6 <style> 7 #dv1{ 8 wIDth: 300px; 9 height: 300px;10 background-color: cyan;11 }12 #dv2{13 wIDth: 200px;14 height: 200px;15 background-color: red;16 }17 #dv3{18 wIDth: 100px;19 height: 100px;20 background-color: green;21 }22 </style>23 </head>24 <body>25 <div ID="dv1">26 <div ID="dv2">27 <div ID="dv3"></div>28 </div>29 </div>30 <script src="Js/common.Js"></script>31 <script>32 var obJs = [getID$("dv1"),getID$("dv2"),getID$("dv3")];33 // obJs.forEach(function (ele,IDx,arr) {34 // console.log("1 "+ele);35 // console.log("2 "+IDx);36 // console.log("3 "+arr);37 // })38 obJs.forEach(function (ele) {39 //为每个元素注册事件40 ele.addEventListener("click",function () {41 console.log(this.ID);42 },false); //如果false 改为ture 就是事件的捕获阶段。 43 })44 </script>45 </body>46 </HTML>vIEw code
查看具体事件的阶段可以通过属性来查看，它在事件处理函数中的参数中 evt.eventPhase .
1 <!DOCTYPE> 2 <HTML lang="en"> 3 <head> 4 <Meta charset="UTF-8"> 5 <Title>这是网页标题</Title> 6 <style> 7 #dv1{ 8 wIDth: 300px; 9 height: 300px;10 background-color: cyan;11 }12 #dv2{13 wIDth: 200px;14 height: 200px;15 background-color: red;16 }17 #dv3{18 wIDth: 100px;19 height: 100px;20 background-color: green;21 }22 </style>23 </head>24 <body>25 <div ID="dv1">26 <div ID="dv2">27 <div ID="dv3"></div>28 </div>29 </div>30 <script src="Js/common.Js"></script>31 <script>32 var obJs = [getID$("dv1"),function (evt) {41 console.log(this.ID);42 console.log("当前的事件阶段是 "+evt.eventPhase);43 },false); //如果false 改为ture 就是事件的捕获阶段。44 })45 </script>46 </body>47 </HTML>VIEw Code
注意: 事件的捕获阶段是不可能和冒泡阶段同时出现的。
要么是目标 -> 冒泡
要么是捕获 -> 目标
第三个参数如果是false 则是冒泡，如果是true 则是捕获阶段。
事件的总结：
为同一个元素注册多个不同的事件 并用同一个事件处理函数：
1 <!DOCTYPE> 2 <HTML lang="en"> 3 <head> 4 <Meta charset="UTF-8"> 5 <Title>这是网页标题</Title> 6 7 </head> 8 <body> 9 <input type="button" value="按钮" ID="btn">10 11 <script src="Js/common.Js"></script>12 <script>13 //为同一个元素绑定 多个不同的事件 ，并用同一个事件处理函数处理14 getID$("btn").onclick = f1;15 getID$("btn").onmouseenter = f1;16 getID$("btn").onmouseleave = f1;17 function f1(evt) {18 switch (evt.type) {19 case "click": alert("鼠标点击了"); break;20 case "mouseenter": this.style.backgroundcolor="cyan"; break;21 case "mouseleave": this.style.backgroundcolor =""; break;22 }23 }24 </script>25 </body>26 </HTML>为同一个元素绑定 多个不同的事件 ，并用同一个事件处理函数处理
案例搜索引擎项目（只能提示功能实现）： 总结
以上是内存溢出为你收集整理的07_事件_BOM_定时器_特效（DOM加强）全部内容，希望文章能够帮你解决07_事件_BOM_定时器_特效（DOM加强）所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）