web_16day

最新推荐文章于 2023-06-05 14:32:49 发布

金涛骇浪 ৫

最新推荐文章于 2023-06-05 14:32:49 发布

阅读量74

点赞数

本文链接：https://blog.csdn.net/weixin_45598725/article/details/101297342

版权

---------------------------------添加超链接-----------------------------------------------------------
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript">

           window.onload = function(){

               var u1 = document.getElementById("u1");

               //点击按钮以后添加超链接
               var btn01 = document.getElementById("btn01");
               btn01.onclick = function(){
                   //创建一个li
                   var li = document.createElement("li");
                   li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";

                   //将li添加到ul中
                   u1.appendChild(li);
               };


               /*
               * 为每一个超链接都绑定一个单击响应函数
               * 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，
               *    而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
               */
               //获取所有的a
               var allA = document.getElementsByTagName("a");
               //遍历
               /*for(var i=0 ; i<allA.length ; i++){
                   allA[i].onclick = function(){
                       alert("我是a的单击响应函数！！！");
                   };
               }*/

               /*
               * 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
               * 我们可以尝试将其绑定给元素的共同的祖先元素
               *
               * 事件的委派
               *    - 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
               *        从而通过祖先元素的响应函数来处理事件。
               * - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
               */

               //为ul绑定一个单击响应函数
               u1.onclick = function(event){
                   event = event || window.event;

                   /*
                   * target
                   *    - event中的target表示的触发事件的对象
                   */
                   //alert(event.target);


                   //如果触发事件的对象是我们期望的元素，则执行否则不执行
                   if(event.target.className == "link"){
                       alert("我是ul的单击响应函数");
                   }
                   if(event.target.className == "yy"){
                       alert("我是yy");
                   }


               };

           };

       </script>
   </head>
   <body>
       <button id="btn01">添加超链接</button>

       <ul id="u1" style="background-color: #bfa;">
           <li>
               <p>我是p元素</p>
           </li>
           <li><a href="javascript:;" class="link">超链接一</a></li>
           <li><a href="javascript:;" class="link">超链接二</a></li>
           <li><a href="javascript:;" class="yy">超链接三</a></li>
       </ul>

   </body>
</html>
-------------------------------------响应函数------------------------------------------------
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript">

           window.onload = function(){

               /*
               * 点击按钮以后弹出一个内容
               */
               //获取按钮对象
               var btn01 = document.getElementById("btn01");

               /*
               * 使用对象.事件 = 函数的形式绑定响应函数，
               *    它只能同时为一个元素的一个事件绑定一个响应函数，
               *    不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
               */

               //为btn01绑定一个单击响应函数
               btn01.onclick = function(){
                   alert(1);
               };

               //为btn01绑定第二个响应函数
               /*btn01.onclick = function(){
                   alert(2);
               };*/

               /*
               * addEventListener()
               *    - 通过这个方法也可以为元素绑定响应函数
               * - 参数：
               *        1.事件的字符串，不要on
               *        2.回调函数，当事件触发时该函数会被调用
               *        3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
               *
               * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
               *    这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
               *
               * 这个方法不支持IE8及以下的浏览器
               */
               /*btn01.addEventListener("click",function(){
                   alert(1);
               },false);

               btn01.addEventListener("click",function(){
                   alert(2);
               },false);

               btn01.addEventListener("click",function(){
                   alert(3);
               },false);*/

               /*
               * attachEvent()
               *    - 在IE8中可以使用attachEvent()来绑定事件
               * - 参数：
               *        1.事件的字符串，要on
               *        2.回调函数
               *
               * - 这个方法也可以同时为一个事件绑定多个处理函数，
               *        不同的是它是后绑定先执行，执行顺序和addEventListener()相反
               */
               /*btn01.attachEvent("onclick",function(){
                   alert(1);
               });

               btn01.attachEvent("onclick",function(){
                   alert(2);
               });

               btn01.attachEvent("onclick",function(){
                   alert(3);
               });*/

               /*btn01.addEventListener("click",function(){
                   alert(this);
               },false);*/

               /*btn01.attachEvent("onclick",function(){
                   alert(this);
               });*/

               bind(btn01 , "click" , function(){
                   alert(this);
               });


           };

           //定义一个函数，用来为指定元素绑定响应函数
           /*
           * addEventListener()中的this，是绑定事件的对象
           * attachEvent()中的this，是window
           * 需要统一两个方法this
           */
           /*
           * 参数：
           *    obj 要绑定事件的对象
           *    eventStr 事件的字符串(不要on)
           * callback 回调函数
           */
           function bind(obj , eventStr , callback){
               if(obj.addEventListener){
                   //大部分浏览器兼容的方式
                   obj.addEventListener(eventStr , callback , false);
               }else{
                   /*
                   * this是谁由调用方式决定
                   * callback.call(obj)
                   */
                   //IE8及以下
                   obj.attachEvent("on"+eventStr , function(){
                       //在匿名函数中调用回调函数
                       callback.call(obj);
                   });
               }
           }

       </script>
   </head>
   <body>

       <button id="btn01">点我一下</button>
   </body>
</html>
----------------------------------------响应函数2-----------------------------------------------
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">

           #box1{
               width: 300px;
               height: 300px;
               background-color: yellowgreen;
           }

           #box2{
               width: 200px;
               height: 200px;
               background-color: yellow;
           }

           #box3{
               width: 150px;
               height: 150px;
               background-color: skyblue;
           }

       </style>

       <script type="text/javascript">

           window.onload = function(){

               /*
               * 分别为三个div绑定单击响应函数
               */
               var box1 = document.getElementById("box1");
               var box2 = document.getElementById("box2");
               var box3 = document.getElementById("box3");

               /*
               * 事件的传播
               *    - 关于事件的传播网景公司和微软公司有不同的理解
               *    - 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，
               *        然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
               * - 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，
               *        然后在向内传播给后代元素
               *    - W3C综合了两个公司的方案，将事件传播分成了三个阶段
               *        1.捕获阶段
               *            - 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
               *        2.目标阶段
               *            - 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
               *        3.冒泡阶段
               *            - 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
               *
               *        - 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
               *            一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
               *
               *    - IE8及以下的浏览器中没有捕获阶段
               */

               bind(box1,"click",function(){
                   alert("我是box1的响应函数")
               });

               bind(box2,"click",function(){
                   alert("我是box2的响应函数")
               });

               bind(box3,"click",function(){
                   alert("我是box3的响应函数")
               });

           };


           function bind(obj , eventStr , callback){
               if(obj.addEventListener){
                   //大部分浏览器兼容的方式
                   obj.addEventListener(eventStr , callback , false);
               }else{
                   /*
                   * this是谁由调用方式决定
                   * callback.call(obj)
                   */
                   //IE8及以下
                   obj.attachEvent("on"+eventStr , function(){
                       //在匿名函数中调用回调函数
                       callback.call(obj);
                   });
               }
           }

       </script>
   </head>

   <body>

       <div id="box1">
           <div id="box2">
               <div id="box3"></div>
           </div>
       </div>

   </body>
</html>
-----------------------------------------偏移量（鼠标拖拽）----------------------------------------------------
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">

           #box1{
               width: 100px;
               height: 100px;
               background-color: red;
               position: absolute;
           }

           #box2{
               width: 100px;
               height: 100px;
               background-color: yellow;
               position: absolute;

               left: 200px;
               top: 200px;
           }

       </style>

       <script type="text/javascript">

           window.onload = function(){
               /*
               * 拖拽box1元素
               * - 拖拽的流程
               *        1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
               *        2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
               *        3.当鼠标松开时，被拖拽元素固定在当前位置   onmouseup
               */
               //获取box1
               var box1 = document.getElementById("box1");
               //为box1绑定一个鼠标按下事件
               //当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
               box1.onmousedown = function(event){
                   event = event || window.event;
                   //div的偏移量鼠标.clentX - 元素.offsetLeft
                   //div的偏移量鼠标.clentY - 元素.offsetTop
                   var ol = event.clientX - box1.offsetLeft;
                   var ot = event.clientY - box1.offsetTop;


                   //为document绑定一个onmousemove事件
                   document.onmousemove = function(event){
                       event = event || window.event;
                       //当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
                       //获取鼠标的坐标
                       var left = event.clientX - ol;
                       var top = event.clientY - ot;

                       //修改box1的位置
                       box1.style.left = left+"px";
                       box1.style.top = top+"px";

                   };

                   //为document绑定一个鼠标松开事件
                   document.onmouseup = function(){
                       //当鼠标松开时，被拖拽元素固定在当前位置   onmouseup
                       //取消document的onmousemove事件
                       document.onmousemove = null;
                       //取消document的onmouseup事件
                       document.onmouseup = null;
                   };
               };




           };


       </script>
   </head>
   <body>
       <div id="box1"></div>

       <div id="box2"></div>
   </body>
</html>

-----------------------------------------------偏移量2（鼠标拖拽）--------------------------------------------------------------------------------
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">

           #box1{
               width: 100px;
               height: 100px;
               background-color: red;
               position: absolute;
           }

           #box2{
               width: 100px;
               height: 100px;
               background-color: yellow;
               position: absolute;

               left: 200px;
               top: 200px;
           }

       </style>

       <script type="text/javascript">

           window.onload = function(){
               /*
               * 拖拽box1元素
               * - 拖拽的流程
               *        1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
               *        2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
               *        3.当鼠标松开时，被拖拽元素固定在当前位置   onmouseup
               */

               //获取box1
               var box1 = document.getElementById("box1");
               var box2 = document.getElementById("box2");
               //为box1绑定一个鼠标按下事件
               //当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
               box1.onmousedown = function(event){

                   //设置box1捕获所有鼠标按下的事件
                   /*
                   * setCapture()
                   *    - 只有IE支持，但是在火狐中调用时不会报错，
                   *        而如果使用chrome调用，会报错
                   */
                   /*if(box1.setCapture){
                       box1.setCapture();
                   }*/
                   box1.setCapture && box1.setCapture();


                   event = event || window.event;
                   //div的偏移量鼠标.clentX - 元素.offsetLeft
                   //div的偏移量鼠标.clentY - 元素.offsetTop
                   var ol = event.clientX - box1.offsetLeft;
                   var ot = event.clientY - box1.offsetTop;


                   //为document绑定一个onmousemove事件
                   document.onmousemove = function(event){
                       event = event || window.event;
                       //当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
                       //获取鼠标的坐标
                       var left = event.clientX - ol;
                       var top = event.clientY - ot;

                       //修改box1的位置
                       box1.style.left = left+"px";
                       box1.style.top = top+"px";

                   };

                   //为document绑定一个鼠标松开事件
                   document.onmouseup = function(){
                       //当鼠标松开时，被拖拽元素固定在当前位置   onmouseup
                       //取消document的onmousemove事件
                       document.onmousemove = null;
                       //取消document的onmouseup事件
                       document.onmouseup = null;
                       //当鼠标松开时，取消对事件的捕获
                       box1.releaseCapture && box1.releaseCapture();//所以采用这行代码
                   };

                   /*
                   * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
                   *    此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
                   *    如果不希望发生这个行为，则可以通过return false来取消默认行为
                   *
                   * 但是这招对IE8不起作用
                   */
                   return false;

               };



           };


       </script>
   </head>
   <body>

       我是一段文字

       <div id="box1"></div>

       <div id="box2"></div>
   </body>
</html>
----------------------------------------------添加删除练习-------------------------------------------------------------------
<html>

   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <title>添加删除记录练习升级
       </title>
       <link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
       <script type="text/javascript">

           /*
           * 删除tr的响应函数
           */
           function delA() {

               //点击超链接以后需要删除超链接所在的那行
               //这里我们点击那个超链接this就是谁
               //获取当前tr
               var tr = this.parentNode.parentNode;

               //获取要删除的员工的名字
               //var name = tr.getElementsByTagName("td")[0].innerHTML;
               var name = tr.children[0].innerHTML;

               //删除之前弹出一个提示框
               /*
               * confirm()用于弹出一个带有确认和取消按钮的提示框
               *    需要一个字符串作为参数，该字符串将会作为提示文字显示出来
               * 如果用户点击确认则会返回true，如果点击取消则返回false
               */
               var flag = confirm("确认删除" + name + "吗?");

               //如果用户点击确认
               if(flag) {
                   //删除tr
                   tr.parentNode.removeChild(tr);
               }

               /*
               * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
               *    但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
               */
               return false;
           };

window.onload = function() {

               /*
               * 点击超链接以后，删除一个员工的信息
               */

//获取所有额超链接
var allA = document.getElementsByTagName("a");

               //为每个超链接都绑定一个单击响应函数
               for(var i = 0; i < allA.length; i++) {
                   allA[i].onclick = delA;
               }

               /*
               * 添加员工的功能
               *    - 点击按钮以后，将员工的信息添加到表格中
               */

               //为提交按钮绑定一个单击响应函数
               var addEmpButton = document.getElementById("addEmpButton");
               addEmpButton.onclick = function() {

                   //获取用户添加的员工信息
                   //获取员工的名字
                   var name = document.getElementById("empName").value;
                   //获取员工的email和salary
                   var email = document.getElementById("email").value;
                   var salary = document.getElementById("salary").value;

                   //alert(name+","+email+","+salary);
                   /*
                   * <tr>
                           <td>Tom</td>
                           <td>tom@tom.com</td>
                           <td>5000</td>
                           <td><a href="javascript:;">Delete</a></td>
                       </tr>
                       需要将获取到的信息保存到tr中
                   */

//创建一个tr
var tr = document.createElement("tr");

                   //设置tr中的内容
                   tr.innerHTML = "<td>"+name+"</td>"+
                                   "<td>"+email+"</td>"+
                                   "<td>"+salary+"</td>"+
                                   "<td><a href='javascript:;'>Delete</a></td>";

                   //获取刚刚添加的a元素，并为其绑定单击响应函数
                   var a = tr.getElementsByTagName("a")[0];
                   a.onclick = delA;

                   //获取table
                   var employeeTable = document.getElementById("employeeTable");
                   //获取employeeTable中的tbody
                   var tbody = employeeTable.getElementsByTagName("tbody")[0];
                   //将tr添加到tbodye中
                   tbody.appendChild(tr);
                   /*tbody.innerHTML += "<tr>"+

                   "<td>"+name+"</td>"+
                                   "<td>"+email+"</td>"+
                                   "<td>"+salary+"</td>"+
                                   "<td><a href='javascript:;'>Delete</a></td>"

                   +"</tr>";*/

};

           };
       </script>
   </head>

<body>

       <table id="employeeTable">
           <tr>
               <th>Name</th>
               <th>Email</th>
               <th>Salary</th>
               <th> </th>
           </tr>
           <tr>
               <td>Tom</td>
               <td>tom@tom.com</td>
               <td>5000</td>
               <td>
                   <a href="javascript:;">Delete</a>
               </td>
           </tr>
           <tr>
               <td>Jerry</td>
               <td>jerry@sohu.com</td>
               <td>8000</td>
               <td>
                   <a href="deleteEmp?id=002">Delete</a>
               </td>
           </tr>
           <tr>
               <td>Bob</td>
               <td>bob@tom.com</td>
               <td>10000</td>
               <td>
                   <a href="deleteEmp?id=003">Delete</a>
               </td>
           </tr>
       </table>

<h4>添加新员工</h4>

           <table>
               <tr>
                   <td class="word">name: </td>
                   <td class="inp">
                       <input type="text" name="empName" id="empName" />
                   </td>
               </tr>
               <tr>
                   <td class="word">email: </td>
                   <td class="inp">
                       <input type="text" name="email" id="email" />
                   </td>
               </tr>
               <tr>
                   <td class="word">salary: </td>
                   <td class="inp">
                       <input type="text" name="salary" id="salary" />
                   </td>
               </tr>
               <tr>
                   <td colspan="2" align="center">
                       <button id="addEmpButton">
                       Submit
                   </button>
                   </td>
               </tr>
           </table>

</div>

</body>

</html>

金涛骇浪 ৫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web_16day

---------------------------------添加超链接-----------------------------------------------------------<html> <head> <meta charset="utf-8" /> <title></title&g...
复制链接

扫一扫

web_16day

“相关推荐”对你有帮助么？