【前端】JavaScript入门及实战116-120

金歌  金牌会员 | 2024-8-1 17:49:11 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 580|帖子 580|积分 1740

116 事件的流传

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta charset="utf-8">       
  6.         <style type="text/css">
  7.                 #box1 {
  8.                         width: 300px;
  9.                         height: 300px;
  10.                         background-color: yellowgreen;
  11.                 }
  12.                        
  13.                 #box2 {
  14.                         width: 200px;
  15.                         height: 200px;
  16.                         background-color: yellow;
  17.                 }
  18.                        
  19.                 #box3 {
  20.                         width: 150px;
  21.                         height: 150px;
  22.                         background-color: skyblue;
  23.                 }       
  24.         </style>
  25.         <script type="text/javascript">       
  26.                 window.onload = function(){                               
  27.                         /*
  28.                                 分别为三个div绑定单击响应函数
  29.                         */
  30.                         var box1 = document.getElementById("box1");
  31.                         var box2 = document.getElementById("box2");
  32.                         var box3 = document.getElementById("box3");
  33.                         /*
  34.                                 事件的传播：关于事件的传播网景公司和微软公司有不同的理解
  35.                                         微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，
  36.                                          然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
  37.                                                        
  38.                                         网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，
  39.                                         然后在向内传播给后代元素。
  40.                                                        
  41.                                         W3C综合了两个公司的方案，将事件传播分成了三个阶段
  42.                                         1.捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
  43.                                         2.目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件
  44.                                         3.冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
  45.                                   
  46.                                 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
  47.                                 一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
  48.                                   
  49.                                 IE8及以下的浏览器中没有捕获阶段
  50.                         */
  51.                                
  52.                         bind(box1,"click",function(){
  53.                                 alert("我是box1的响应函数")
  54.                         });
  55.                        
  56.                         bind(box2,"click",function(){
  57.                                 alert("我是box2的响应函数")
  58.                         });
  59.                        
  60.                         bind(box3,"click",function(){
  61.                                 alert("我是box3的响应函数")
  62.                         });
  63.                 };
  64.                
  65.                 function bind(obj , eventStr , callback){
  66.                         if(obj.addEventListener){
  67.                                 // 大部分浏览器兼容的方式
  68.                                 obj.addEventListener(eventStr , callback , true);
  69.                         }else{
  70.                                 /*
  71.                                         this是谁由调用方式决定
  72.                                         allback.call(obj)
  73.                                 */
  74.                                 // IE8及以下
  75.                                 obj.attachEvent("on"+eventStr , function(){
  76.                                         // 在匿名函数中调用回调函数
  77.                                         callback.call(obj);
  78.                                 });
  79.                         }
  80.                 }
  81.         </script>       
  82. </head>
  83. <body>
  84.         <div id="box1">
  85.                 <div id="box2">
  86.                         <div id="box3"></div>
  87.                 </div>
  88.         </div>               
  89. </body>
  90. </html>
复制代码
117 拖拽（1）

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta charset = "utf-8">
  6. <style type="text/css">
  7.         #box1 {
  8.                 width: 100px;
  9.                 height: 100px;
  10.                 background-color: red;
  11.                 position: absolute;
  12.         }
  13.         #box2{
  14.                 width: 100px;
  15.                 height: 100px;
  16.                 background-color: yellow;
  17.                 position: absolute;
  18.                 left: 200px;
  19.                 top: 200px;
  20.         }                       
  21. </style>
  22. <script type="text/javascript">
  23.         window.onload = function(){
  24.                 /*
  25.                         拖拽box1元素
  26.                         拖拽的流程：1.当鼠标在被拖拽元素上按下时，开始拖拽：onmousedown
  27.                                                 2.当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove
  28.                                                 3.当鼠标松开时，被拖拽元素固定在当前位置：onmouseup
  29.                 */
  30.                
  31.                 // 获取box1
  32.                 var box1 = document.getElementById("box1");
  33.                 // 为box1绑定一个鼠标按下事件
  34.                 // 当鼠标在被拖拽元素上按下时，开始拖拽:onmousedown
  35.                 box1.onmousedown = function(event){
  36.                         // 为document绑定一个onmousemove事件
  37.                         document.onmousemove = function(event){
  38.                                 event = event || window.event;
  39.                                 // 当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove
  40.                                 // 获取鼠标的坐标
  41.                                 var left = event.clientX;
  42.                                 var top = event.clientY;
  43.                                                
  44.                                 //修改box1的位置
  45.                                 box1.style.left = left + "px";
  46.                                 box1.style.top = top + "px";
  47.                         };
  48.                         // 为document绑定一个鼠标松开事件
  49.                         document.onmouseup = function(){
  50.                                 // 当鼠标松开时，被拖拽元素固定在当前位置：onmouseup
  51.                                 // 取消document的onmousemove事件
  52.                                 document.onmousemove = null;
  53.                                 // 取消document的onmouseup事件
  54.                                 document.onmouseup = null;
  55.                         };                               
  56.                 };
  57.         };
  58. </script>
  59. </head>
  60. <body>
  61.         <div id="box2"></div>
  62.         <div id="box1"></div>
  63. </body>
  64. </html>
复制代码
118 拖拽（2）

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta charset = "utf-8">
  6. <style type="text/css">
  7.         #box1 {
  8.                 width: 100px;
  9.                 height: 100px;
  10.                 background-color: red;
  11.                 position: absolute;
  12.         }
  13.         #box2{
  14.                 width: 100px;
  15.                 height: 100px;
  16.                 background-color: yellow;
  17.                 position: absolute;
  18.                 left: 200px;
  19.                 top: 200px;
  20.         }                       
  21. </style>
  22. <script type="text/javascript">
  23.         window.onload = function(){
  24.                 /*
  25.                         拖拽box1元素
  26.                         拖拽的流程：1.当鼠标在被拖拽元素上按下时，开始拖拽：onmousedown
  27.                                                 2.当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove
  28.                                                 3.当鼠标松开时，被拖拽元素固定在当前位置：onmouseup
  29.                 */
  30.                
  31.                 // 获取box1
  32.                 var box1 = document.getElementById("box1");
  33.                 // 为box1绑定一个鼠标按下事件
  34.                 // 当鼠标在被拖拽元素上按下时，开始拖拽:onmousedown
  35.                 box1.onmousedown = function(event){
  36.                         // 设置box1捕获所有鼠标按下的事件
  37.                         /*
  38.                                 setCapture()
  39.                                 只有IE支持，但是在火狐中调用时不会报错，
  40.                                 而如果使用chrome调用，会报错
  41.                         */
  42.                         /*if(box1.setCapture){
  43.                                 box1.setCapture();
  44.                         }*/
  45.                        
  46.                         box1.setCapture && box1.setCapture();
  47.                        
  48.                         event = event || window.event;
  49.                         // div的偏移量 鼠标.clentX - 元素.offsetLeft
  50.                         // div的偏移量 鼠标.clentY - 元素.offsetTop
  51.                         var ol = event.clientX - box1.offsetLeft;
  52.                         var ot = event.clientY - box1.offsetTop;
  53.                        
  54.                         // 为document绑定一个onmousemove事件
  55.                         document.onmousemove = function(event){
  56.                                 event = event || window.event;
  57.                                 // 当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove
  58.                                 // 获取鼠标的坐标
  59.                                 var left = event.clientX - ol;
  60.                                 var top = event.clientY - ot;
  61.                                                
  62.                                 //修改box1的位置
  63.                                 box1.style.left = left + "px";
  64.                                 box1.style.top = top + "px";
  65.                         };
  66.                         // 为document绑定一个鼠标松开事件
  67.                         document.onmouseup = function(){
  68.                                 // 当鼠标松开时，被拖拽元素固定在当前位置：onmouseup
  69.                                 // 取消document的onmousemove事件
  70.                                 document.onmousemove = null;
  71.                                 // 取消document的onmouseup事件
  72.                                 document.onmouseup = null;
  73.                                 // 当鼠标松开时，取消对事件的捕获
  74.                                 box1.releaseCapture && box1.releaseCapture();
  75.                         };       
  76.                
  77.                         /*
  78.                                 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
  79.                                 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
  80.                                 如果不希望发生这个行为，则可以通过return false来取消默认行为
  81.                                
  82.                                 但是这招对IE8不起作用
  83.                         */
  84.                         return false;               
  85.                 };
  86.         };
  87. </script>
  88. </head>
  89. <body>
  90.         <div id="box2"></div>
  91.         <div id="box1"></div>
  92. </body>
  93. </html>
复制代码
119 测试IE8

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta charset = "utf-8">
  6. <style type="text/css">
  7.        
  8. </style>
  9. <script type="text/javascript">
  10.         window.onload = function(){
  11.                 // 分别为两个按钮绑定单击响应函数
  12.                 var btn01 = document.getElementById("btn01");
  13.                 var btn02 = document.getElementById("btn02");
  14.                                
  15.                 btn01.onclick = function(){
  16.                         alert(1);
  17.                 };
  18.                                
  19.                 btn02.onclick = function(){
  20.                         alert(2);
  21.                 };
  22.                                
  23.                 // 设置btn01对鼠标按下相关的事件进行捕获
  24.                 // 当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上
  25.                 btn01.setCapture();
  26.         };
  27. </script>
  28. </head>
  29. <body>
  30.         <button id="btn01">按钮01</button>
  31.         <button id="btn02">按钮02</button>
  32. </body>
  33. </html>
复制代码
120 拖拽（3）

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta charset = "utf-8">
  6. <style type="text/css">
  7.         #box1 {
  8.                 width: 100px;
  9.                 height: 100px;
  10.                 background-color: red;
  11.                 position: absolute;
  12.         }
  13.         #box2{
  14.                 width: 100px;
  15.                 height: 100px;
  16.                 background-color: yellow;
  17.                 position: absolute;
  18.                 left: 200px;
  19.                 top: 200px;
  20.         }                       
  21. </style>
  22. <script type="text/javascript">
  23.         window.onload = function(){
  24.                 /*
  25.                         拖拽box1元素
  26.                         拖拽的流程：1.当鼠标在被拖拽元素上按下时，开始拖拽：onmousedown
  27.                                                 2.当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove
  28.                                                 3.当鼠标松开时，被拖拽元素固定在当前位置：onmouseup
  29.                 */
  30.                
  31.                 // 获取box1
  32.                 var box1 = document.getElementById("box1");
  33.                 var box2 = document.getElementById("box2");
  34.                 var img1 = document.getElementById("img1");
  35.                                
  36.                 // 开启box1的拖拽
  37.                 drag(box1);
  38.                 // 开启box2的
  39.                 drag(box2);
  40.                 drag(img1);
  41.         };
  42.        
  43.         /*
  44.                 提取一个专门用来设置拖拽的函数
  45.                 参数：开启拖拽的元素
  46.         */
  47.         function drag(obj){
  48.                 // 为box1绑定一个鼠标按下事件
  49.                 // 当鼠标在被拖拽元素上按下时，开始拖拽:onmousedown
  50.                 obj.onmousedown = function(event){
  51.                         // 设置box1捕获所有鼠标按下的事件
  52.                         /*
  53.                                 setCapture()
  54.                                 只有IE支持，但是在火狐中调用时不会报错，
  55.                                 而如果使用chrome调用，会报错
  56.                         */
  57.                         /*if(box1.setCapture){
  58.                                 box1.setCapture();
  59.                         }*/
  60.                        
  61.                         obj.setCapture && obj.setCapture();
  62.                        
  63.                         event = event || window.event;
  64.                         // div的偏移量 鼠标.clentX - 元素.offsetLeft
  65.                         // div的偏移量 鼠标.clentY - 元素.offsetTop
  66.                         var ol = event.clientX - obj.offsetLeft;
  67.                         var ot = event.clientY - obj.offsetTop;
  68.                        
  69.                         // 为document绑定一个onmousemove事件
  70.                         document.onmousemove = function(event){
  71.                                 event = event || window.event;
  72.                                 // 当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove
  73.                                 // 获取鼠标的坐标
  74.                                 var left = event.clientX - ol;
  75.                                 var top = event.clientY - ot;
  76.                                                
  77.                                 //修改box1的位置
  78.                                 obj.style.left = left + "px";
  79.                                 obj.style.top = top + "px";
  80.                         };
  81.                         // 为document绑定一个鼠标松开事件
  82.                         document.onmouseup = function(){
  83.                                 // 当鼠标松开时，被拖拽元素固定在当前位置：onmouseup
  84.                                 // 取消document的onmousemove事件
  85.                                 document.onmousemove = null;
  86.                                 // 取消document的onmouseup事件
  87.                                 document.onmouseup = null;
  88.                                 // 当鼠标松开时，取消对事件的捕获
  89.                                 obj.releaseCapture && obj.releaseCapture();
  90.                         };       
  91.                
  92.                         /*
  93.                                 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
  94.                                 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
  95.                                 如果不希望发生这个行为，则可以通过return false来取消默认行为
  96.                                
  97.                                 但是这招对IE8不起作用
  98.                         */
  99.                         return false;               
  100.                 };
  101.         }
  102. </script>
  103. </head>
  104. <body>
  105.         <div id="box2"></div>
  106.         <div id="box1"></div>
  107. </body>
  108. </html>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

金歌

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表