js--5.事件-3.事件对象event

最新推荐文章于 2022-11-10 10:58:50 发布

qq_26553781

最新推荐文章于 2022-11-10 10:58:50 发布

阅读量190

点赞数

本文链接：https://blog.csdn.net/qq_26553781/article/details/79260865

版权

1 事件对象

1.1 产生

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,

在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标键盘哪个按键被按下鼠标滚轮滚动的方向。。。

1.2 实现兼容

在IE8中，响应函数被处罚时，浏览器不会传递事件对象，在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的

  if(!event){
        event = window.event;
    }

//解决事件对象的兼容性问题
event = event || window.event;

1.3 常用属性和方法

1.4 常用属性和方法（ie）

在IE中event对象作为window对象的属性存在的，可以使用window.event来获取event对象。

2 三个阶段

2.1 事件冒泡（事件默认触发）

2.1.1 冒泡（Bubble）

所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发，

在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡event.cancelBubble = true;

2.1.2 情况

如果没有设置span取消冒泡，点击span，

1.首先触发span单击函数，

2.然后触发box1的单击函数，如果box1没有设置取消冒泡

3.最后触发document的单击函数

2.1.3 参考代码

<style type="text/css">
           #box1{
               width:200px;
              height:200px;
              background-color: yellowgreen;
           }
           #s1{
              background-color: yellow;
           }
       </style>
       <script type="text/javascript">
           window.onload = function(){
              /*
               * 事件的冒泡（Bubble）
               * - 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
               * - 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
               *
               */
             
              //为s1绑定一个单击响应函数
              var s1 = document.getElementById("s1");
              s1.onclick = function(event){
                  event = event || window.event;
                   alert("我是span的单击响应函数");
//                event.cancelBubble= true;//可以将事件对象的cancelBubble设置为true，即可取消冒泡
              };
             
              //为box1绑定一个单击响应函数
              var box1 = document.getElementById("box1");
              box1.onclick = function(event){
                  event = event || window.event;
                  alert("我是div的单击响应函数");
                  event.cancelBubble = true;
              };
             
              //为body绑定一个单击响应函数
              document.body.onclick = function(){
                  alert("我是body的单击响应函数");
              };
           };
       </script>
    </head>
    <body>
       <div id="box1">
           我是box1
           <span id="s1">我是span</span>
       </div>
    </body>
</html>

2.2 事件目标（委派）

我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的，我们可以尝试将其绑定给元素的共同的祖先元素

2.2.1 事件的委派

指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。

事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

2.2.2 情况

2.2.3 参考代码

<scripttype="text/javascript">
                            window.onload = function(){
                                     varu1 = document.getElementById("u1");
                                    
                                     //点击按钮以后添加超链接
                                     varbtn01 = document.getElementById("btn01");
                                     btn01.οnclick= function(){
                                               //创建一个li
                                               varli = document.createElement("li");
                                               li.innerHTML= "<a href='javascript:;' class='link'>新建的超链接</a>";
                                              
                                               //将li添加到ul中
                                               u1.appendChild(li);
                                     };
                                    
                                    
                                     /*
                                      * 为每一个超链接都绑定一个单击响应函数
                                      * 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
                                      * 我们可以尝试将其绑定给元素的共同的祖先元素
                                      *
                                      * 事件的委派
                                      *   - 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
                                      *             从而通过祖先元素的响应函数来处理事件。
                                      *  - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
                                      */
                                    
                                     //为ul绑定一个单击响应函数
                                     u1.οnclick= function(event){
                                               event= event || window.event;
                                              
                                               /*
                                                * target
                                                *   -event中的target表示的触发事件的对象
                                                */
                                               //alert(event.target);
                                              
                                              
                                               //如果触发事件的对象是我们期望的元素，则执行否则不执行
                                               if(event.target.className== "link"){
                                                        alert("我是ul的单击响应函数");
                                               }
                                              
                                     };
                                    
                            };
                           
                   </script>
         </head>
         <body>
                   <buttonid="btn01">添加超链接</button>
                  
                   <ulid="u1" style="background-color: #bfa;">
                            <li>
                                     <p>我是p元素</p>
                            </li>
                            <li><ahref="javascript:;" class="link">超链接一</a></li>
                            <li><ahref="javascript:;" class="link">超链接二</a></li>
                            <li><ahref="javascript:;" class="link">超链接三</a></li>
                   </ul>
                  
         </body>

qq_26553781

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js--5.事件-3.事件对象event

1 事件对象1.1 产生当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数, 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标键盘哪个按键被按下鼠标滚轮滚动的方向。。。 1.2 实现兼容在IE8中，响应函数被处罚时，浏览器不会传递事件对象，在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
复制链接

扫一扫