• 07_事件_BOM_定时器_特效(DOM加强)

    复习:

    事件绑定的三种方式: 

    分享图片

     

    分享图片

    分享图片

     

     

    分享图片

    事件:

    绑定事件的区别:

    分享图片

     

    为元素解绑事件:

    第一种解绑的方式:

    分享图片

     

     

    分享图片

     

     

    第二种解绑的方式:

    分享图片

    分享图片

     

     

    第三种解绑的方式:

     

     

    分享图片

     

    分享图片

     

     

    分享图片

     

     

    绑定事件和 解绑事件的兼容代码:

    分享图片

    分享图片
     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, type, fn) {
    13     if(ele.removeEventListener){
    14         ele.removeEventListener(type,fn,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 的代码如下:

    分享图片
     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, type, fn) {
    13     if(ele.addEventListener){
    14         ele.addEventListener(type,fn,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, type, fn) {
    23     if(ele.removeEventListener){
    24         ele.removeEventListener(type,fn,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"),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 (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> 
    为同一个元素绑定 多个不同的事件 ,并用同一个事件处理函数处理

     

    案例搜索引擎项目(只能提示功能实现):

    相关文章
    相关标签/搜索
    香港藏宝阁精选资料大全 北京市| 竹山县| 衢州市| 视频| 横山县| 密山市| 中卫市| 淮滨县| 中卫市| 岳普湖县| 榆社县| 定南县| 平远县| 仁怀市| 平顶山市| 松阳县| 海阳市| 高青县| 达孜县| 伊宁县| 遵义市| 勃利县| 龙海市| 正阳县| 江油市| 高碑店市| 西充县| 通渭县| 克什克腾旗| 卢氏县| 酒泉市| 砀山县| 大田县| 精河县| 黎川县| 灌阳县| 疏附县| http://fa.hz0j0r5vo.fun http://fa.hz0j2r5vo.fun http://fa.hz0j1r6vo.fun http://fa.hz0j0r5vo.fun http://fa.hz0j2r1vo.fun