JavaScript——DOM(Document Object Model)文档对象模型

r囧r小猫 2023-10-06 17:12 154阅读 0赞

节点:Node

构成HTML文档最基本的单元。常用节点分为四类

  • 文档节点:整个HTML文档（#document）
  • 元素节点:HTML文档中的HTML标签
  • 属性节点∶元素的属性
  • 文本节点:HTML标签中的文本内容（#text）

实例

  1. <button id="btn">我是一个按钮</button>
  2. <script type="text/javascript">
  3.     /*
  4.      * 浏览器已经为我们提供 文档节点 对象这个对象是window属性
  5.      *     可以在页面中直接使用，文档节点代表的是整个网页
  6.      */
  7.     //console.log(document);
  8.     //获取到button对象
  9.     var btn = document.getElementById("btn");
  11.     //修改按钮的文字
  12.     btn.innerHTML = "I'm Button";
  13. </script>

实例二

  1. <button id="btn">我是一个按钮</button>
  2. <script>
  3.     /* onload事件会在整个页面加载完成之后才触发
  4.     为window绑定一个onload事件
  5.     该事件对应的响应函数将会在页面加载完成之后执行，
  6.     这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了 */
  8.     window.onload = function() {
  10.         var test = document.getElementById("btn")
  11.         test.onclick = function() {
  13.             alert("hello")
  14.         }
  15.         var result = test.innerHTML;
  16.         console.log(test)
  17.     }
  18. </script>

获取元素节点

  1. 通过document对象调用
  2. 1、getElementById()
  3.     -通过id属性获取一个元素节点对象，没找到则返回null,找到则返回对象
  4.     var test = document.getElementById("btn");
  5.     var result = test.innerHTML;
  6.     console.log(result)
  7. 2、getElementsByTagName()
  8.     -通过标签名获取一组元素节点对象，没找到则返回null,找到则返回类数组对象
  9.     var test = document.getElementsByTagName("p");
  10.     var result = p[0].innerHTML;//innerText和innerHTML类似但是会去掉标签
  11.     console.log(result)
  12. 3、getElementsByName()
  13.     -通过name属性获取一组元素节点对象
  14. 4、getElementsByClassName()//IE8及以下不支持

图片切换例子

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style>
  7.             .outer{
  9.                 width: 550px;
  10.                 padding:10px;
  11.                 margin: 50px auto;
  12.                 text-align: center;
  13.                 background-color: #8b9bff;
  14.             }
  15.         </style>
  16.         <script>
  17.             window.onload = function() {
  19.                 var image=["./1.jpg","./2.jpg","./3.jpg","./4.jpg","./5.jpg"]
  20.                 //当前图片的索引
  21.                 var index=0;
  22.                 var img=document.getElementsByTagName("img")[0];
  23.                 //
  24.                 var info = document.getElementById("info");
  25.                 info.innerHTML="一共"+image.length+"张图片"+"  "+"这是第"+(index+1)+"张";
  27.                 var prev = document.getElementById("prev")
  28.                 prev.onclick = function() {
  30.                     index--;
  31.                     if(index<0){
  33.                         index=image.length-1;
  34.                     }
  35.                     img.src=image[index];
  36.                     info.innerHTML="一共"+image.length+"张图片"+"  "+"这是第"+(index+1)+"张";
  37.                 }
  39.                 var next = document.getElementById("next")
  40.                 next.onclick = function() {
  42.                     index++;
  43.                     if(index>=image.length){
  45.                         index=0;
  46.                     }
  47.                     img.src=image[index];
  48.                     info.innerHTML="一共"+image.length+"张图片"+"  "+"这是第"+(index+1)+"张";
  49.                 }
  51.             }
  52.         </script>
  53.     </head>
  54.     <body>
  55.         <div class="outer">
  56.             <h2 id=info></h2>
  57.             <img src="./1.jpg" />
  58.             <button id="prev">上一张</button>
  59.             <button id="next">下一张</button>
  60.         </div>
  61.     </body>
  62. </html>

在这里插入图片描述

获取元素节点的子节点

  1. 通过具体的元素节点调用
  2. 1. getElementsByTagName()
  3.     -方法,返回当前节点的指定标签名后代节点
  4. 2. childNodes
  5.     -属性，表示当前节点的所有子节点
  6.     childNodes属性会获取包括文本节点在呢的所有节点
  7.     根据DOM标签标签间空白也会当成文本节点
  8.     注意:在工E8及以下的浏览器中，不会将空白当成子节点
  10.     children属性可以获取当前元素的所有子元素
  12. 3. firstChild
  13.     -属性,表示当前节点的第一个子节点
  14.     //firstChild可以获取到当前元素的第一-个子节点(包括空白文本节点)
  15.     var fir = phone.firstChild;
  16.     //firstElementChild获取当前元素的第一个子元素
  17.     firstElementChild不支持IE8及以下的浏览器，
  18.     如果需要兼容他们尽量不要使用
  19.     */
  21. 4. lastChild
  22.     -属性,表示当前节点的最后-个子节点

获取父节点和兄弟节点

  1. 通过具体的节点调用
  2. 1. parentNode
  3.     -属性,表示当前节点的父节点
  4. 2. previousSibling
  5.     -属性,表示当前节点的前一个兄弟节点，也可能获取空白文档
  6.     previousElementSibling不会获取空白文档，不兼容ie8及以下
  7. 3. nextSibling
  8.     -属性,表示当前节点的后一个兄弟节点

全选练习

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  7.         <script>
  8.             window.onload = function() {
  11.                 var items = document.getElementsByName("items");
  12.                 //全选/全不选
  13.                 var checkedAllBox = document.getElementById("checkedAllBox");
  15.                 //全选
  16.                 var checkedAllBtn = document.getElementById("checkedAllBtn");
  17.                 checkedAllBtn.onclick = function() {
  20.                     for (var i = 0; i < items.length; i++) {
  22.                         items[i].checked = true;
  23.                     }
  24.                     checkedAllBox.checked = true;
  25.                 }
  26.                 //全不选
  27.                 var checkedNoBtn = document.getElementById("checkedNoBtn");
  28.                 checkedNoBtn.onclick = function() {
  31.                     for (var i = 0; i < items.length; i++) {
  33.                         items[i].checked = false;
  34.                     }
  35.                     checkedAllBox.checked = false;
  36.                 }
  37.                 //反选
  38.                 var checkedRevBtn = document.getElementById("checkedRevBtn");
  39.                 checkedRevBtn.onclick = function() {
  41.                     checkedAllBox.checked = true;
  43.                     for (var i = 0; i < items.length; i++) {
  45.                         items[i].checked = !items[i].checked;
  46.                         //判断四个多选框是否全选
  47.                         if (!items[i].checked) {
  49.                             checkedAllBox.checked = false;
  50.                         }
  51.                     }
  52.                 }
  53.                 //提交按钮
  54.                 var sendBtn = document.getElementById("sendBtn");
  55.                 sendBtn.onclick = function() {
  57.                     for (var i = 0; i < items.length; i++) {
  59.                         if (items[i].checked == true) {
  61.                             alert(items[i].value);
  62.                         }
  63.                     }
  64.                 }
  66.                 checkedAllBox.onclick = function() {
  68.                     for (var i = 0; i < items.length; i++) {
  70.                         items[i].checked = checkedAllBox.checked;
  71.                     }
  72.                 }
  74.                 /* 如果四个多选框全都选中，则chec kedAllBox也应该选中
  75.                 如果四个多选框没都选中，则chec kedAllBox也不应该选中
  76.                 */
  77.                 //为四个多选框分别绑定点击响应函数
  78.                 for (var i = 0; i < items.length; i++) {
  80.                     items[i].onclick = function() {
  82.                         checkedAllBox.checked = true;
  83.                         for (var j = θ; j < items.length; j++) {
  85.                             //判断四个多选框是否全选
  86.                             if (!items[j].checked) {
  88.                                 checkedAllBox.checked = false;
  89.                             }
  90.                             break;
  91.                         }
  92.                     }
  93.                 }
  94.             }
  95.         </script>
  96.     </head>
  97.     <body>
  98.         <form method="post" action="">
  99.             你爱好的运动是? <input type="checkbox" id="checkedAllBox" />全选/全不选
  100.             <br />
  101.             <input type="checkbox" name="items" value="足球" />足球
  102.             <input type="checkbox" name="items" value="篮球" />篮球
  103.             <input type="checkbox" name="items" value="羽毛球" />羽毛球
  104.             <input type="checkbox" name="items" value="乒乓球" />乒乓球
  105.             <br />
  106.             <input type="button" id="checkedAllBtn" value="全选" />
  107.             <input type="button" id="checkedNoBtn" value="全不选" />
  108.             <input type="button" id="checkedRevBtn" value="反选" />
  109.             <input type="button" id="sendBtn" value="提交" />
  110.         </form>
  112.     </body>
  113. </html>

在这里插入图片描述

DOM查询的其他方法

  1. //获取body标签
  2.                 var body=document.getElementsByTagName("body")[0];
  3.                 //或
  4.                 var body=document.body;
  5.             //获取html标签
  6.                 var html=document.documentElement;
  7.             //document.all代表页面的所有元素
  8.             //document.querySelector(),如果有多个，但是只会返回第一个
  9.                 document.querySelector(".box1 div")
  10.             //document.querySelectorAll(),如果有多个返回多个，只有一个也会返回数组
  11.                 document.querySelectorAll(".box1")

创建节点

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  7.         <script>
  8.             window.onload = function() {
  10.                 myClick("btn01", function() {
  12.                     //创建节点
  13.                     var p = document.createElement("p");
  14.                     //创建文本节点对象
  15.                     var bjText=document.createTextNode("北京");
  16.                     //添加子节点:语法：父节点.document.appendChild(子节点)
  17.                     p.appendChild(bjText);
  19.                     var add = document.getElementById("addp");
  20.                     add.appendChild(p);
  21.                     //=========或则使用以下方法，更简便==================================
  22.                     var p = document.createElement("p");
  23.                     p.innerHTML="湛江";
  24.                     var add = document.getElementById("addp");
  25.                     add.appendChild(p);
  26.                 })
  28.             }
  30.             function myClick(idStr, fun) {
  32.                 var btn = document.getElementById(idStr);
  33.                 btn.onclick = fun;
  34.             }
  35.         </script>
  36.     </head>
  37.     <body>
  38.         <button id="btn01">创建节点</button>
  39.         <h3 id="addp"></h3>
  41.     </body>
  42. </html>

CDES

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  7.         <script>
  8.             function delA() {
  10.                 //点击哪个，this就是哪个按钮
  11.                 //获取当前的tr
  12.                 var tr = this.parentNode.parentNode;
  13.                 //获取员工的名字
  14.                 var deleteName = tr.children[0].innerHTML;
  15.                 //是否删除提示
  16.                 var flag = confirm("是否" + deleteName + "删除?")
  17.                 //删除<tr>
  18.                 if (flag) {
  20.                     tr.parentNode.removeChild(tr);
  21.                 }
  22.                 return false;
  23.             }
  24.             window.onload = function() {
  26.                 //删除信息
  27.                 //获取超链接
  28.                 var allA = document.getElementsByTagName("a");
  29.                 for (var i = 0; i<allA.length; i++) {
  31.                     allA[i].onclick = delA; //将对象赋值过去而不是返回值
  32.                 }
  34.                 //添加信息
  35.                 //提交按钮
  36.                 var addEmpButton = document.getElementById("addEmpButton");
  37.                 addEmpButton.onclick = function() {
  40.                     //获取名字
  41.                     var name = document.getElementById("empName").value;
  42.                     alert(name);
  43.                     //获取email
  44.                     var email = document.getElementById("email").value;
  45.                     //获取salary
  46.                     var salary = document.getElementById("salary").value;
  48.                     //创建一个<tr>
  49.                     var tr = document.createElement("tr");
  51.                     //设置tr的内容
  52.                     tr.innerHTML = "<td>"+name+"</td>" +
  53.                         "<td>"+email+"</td>" +
  54.                         "<td>"+salary+"</td>" +
  55.                         "<td><a href='javascript:;'>Delete</a></td>";
  56.                     //获取超链接
  57.                     var a = tr.getElementsByTagName("a")[0];
  58.                     a.onclick = delA;
  61.                     // //创建四个<td></td>
  62.                     // var nameTd = document.createElement("td");
  63.                     // var emailTd = document.createElement("td");
  64.                     // var salaryTd = document.createElement("td");
  65.                     // var aTd = document.createElement("td");
  67.                     // //创建一个a
  68.                     // var a = document.createElement("a");
  70.                     // //创建文本节点
  71.                     // var nameText = document.createTextNode(name);
  72.                     // var emailText = document.createTextNode(email);
  73.                     // var salaryText = document.createTextNode(salary);
  74.                     // var delText = document.createTextNode("Delete");
  76.                     // //将文本添加到td中
  77.                     // nameTd.appendChild(nameText);
  78.                     // emailTd.appendChild(emailText);
  79.                     // salaryTd.appendChild(salaryText);
  80.                     // a.appendChild(delText);
  81.                     // aTd.appendChild(a);
  83.                     // //将td添加到tr中
  84.                     // tr.appendChild(nameTd);
  85.                     // tr.appendChild(emailTd);
  86.                     // tr.appendChild(salaryTd);
  87.                     // tr.appendChild(aTd);
  89.                     // //向a中添加href属性
  90.                     // a.href = "javascript:;";
  91.                     // a.onclick = delA;
  93.                     //获取table
  94.                     //var employeeTable = document.getElementById("employeeTable");
  96.                     //获取employeeTable中的<tbody>
  97.                     var tbody = employeeTable.getElementsByTagName("tbody")[0];
  99.                     //将tr添加到tbody中
  100.                     tbody.appendChild(tr);
  101.                 };
  102.             };
  104.             // function myClick(idStr, fun) {
  106.             //     var btn = document.getElementById(idStr);
  107.             //     btn.onclick = fun;
  108.             // }
  109.         </script>
  110.     </head>
  111.     <body>
  112.         <table id="employeeTable">
  113.             <tr>
  114.                 <th>Name</th>
  115.                 <th>Email</th>
  116.                 <th>Salary</th>
  117.                 <th> </th>
  118.             </tr>
  119.             <tr>
  120.                 <td>wang</td>
  121.                 <td>787@qq.com</td>
  122.                 <td>8000</td>
  123.                 <td><a href="deleteEmp?id=001">delete</a></td>
  124.             </tr>
  125.             <tr>
  126.                 <td>Tony</td>
  127.                 <td>742347@qq.com</td>
  128.                 <td>10000</td>
  129.                 <td><a href="deleteEmp?id=002">Delete</a></td>
  130.             </tr>
  131.         </table>
  133.         <div id="formDiv">
  134.             <h4>添加信息</h4>
  135.             <table>
  136.                 <tr>
  137.                     <td class="word">name:</td>
  138.                     <td class="inp">
  139.                         <input type="text" name="empName" id="empName" />
  140.                     </td>
  141.                 </tr>
  142.                 <tr>
  143.                     <td class="word">email:</td>
  144.                     <td class="inp">
  145.                         <input type="text" name="email" id="email" />
  146.                     </td>
  147.                 </tr>
  148.                 <tr>
  149.                     <td class="word">salary:</td>
  150.                     <td class="inp">
  151.                         <input type="text" name="salary" id="salary" />
  152.                     </td>
  153.                 </tr>
  154.                 <tr>
  155.                     <td colspan="2" align="center">
  156.                         <button id="addEmpButton">
  157.                             Submit
  158.                         </button>
  159.                     </td>
  160.                 </tr>
  161.             </table>
  162.         </div>
  163.     </body>
  164. </html>

操作“内联”样式

修改

  1. 通过JS修改元素的样式:
  2.     语法:元素.style.样式名=样式值
  3. 注意:如果CSS的样式名中含有一，
  4.     这种名称在JS中是不合法的比如background-color
  5.     需要将这种样式名修改为驼峰命名法，
  6.     去掉-，然后将-后的字母大写
  7. box1.style.width="300px" ;
  8. box1.style.height = " 300px" ;
  9. box1.style backgroundColor = "yellow";
  10. 我们通过sty1 e属性设置的样式都是内联样式，
  11. 而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
  12. 但是如果在样式中写了! important,则此时样式会有最高的优先级，
  13. 即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效
  14. 所以尽量不要为样式添加!important

读取

  1. 语法：元素.style.样式名
  2. box1.style.height

获取元素的样式(只读)

  1. currentStyl
  2.     获取元素当前正在显示的样式，不局限内联样式
  3.     语法：元素.currentStyle.样式名
  4.     currentStyle只有IE支持
  5.     box1.currentStyle.height
  6. 在其他浏览器中可以使用
  7. getComputedstyle( )这个方法来获取元素当前的样式
  8.     这个方法是window的方法，可以直接使用!
  9.     需要两个参数
  10.     第一个:要获取样式的元素
  11.     第二个:可以传递一个伪元素，-般都传null
  12.         alert(getComputedStyle(box1,null).width);
  13.     该方法会返回一个对象，对象中封装了当前元素对应的样式
  14.     可以通过对象.样式名来读取样式
  15.     如果获取的样式没有设置，则会获取到真实的值，而不是默认值
  16.     比如:没有设置width,它不会获取到auto,而是一个长度
  17.         alert(getComputedStyle(box1,null).backgroundColor);不兼容IE8
  19. 处理兼容问题
  20.     定义一个函数，用来获取指定元素的当前的样式
  21.         参数:
  22.         obj要获取样式的元素
  23.         name要获取的样式名
  24.     alert(getStyle(box1,backgroundColor));
  25.     function getStyle(obj,name){
  26.         if(window.getComputedStyle){
  27.             //正常浏览器
  28.             return getComputedStyle(obj,null)[name];
  29.         }
  30.         else{
  31.             //IE8
  32.             return obj.currentStyle[name];
  33.         }
  34.     }

其他样式的相关属性

获取元素的宽度和高度（只读）

  1. clientWidth
  2. clientHeight
  3.     -这两个属性可以获取元素的可见宽度和高度
  4.     -这些属性都是不带px的，返回都是一个数字， 可以直接进行计算
  5.     -会获取元素宽度和高度，包括内容区和内边距
  6.     box1.clienwidth
  7. offsetWidth
  8. offsetHeight
  9.     获取元素的整个的宽度和高度，包括内容区、内边距和边框
  10. offsetParent
  11.     -可以用来获取当前元素的定位父元素
  12.     -会获取到离当前元素最近的开启了定位的祖先元素，如果所有的祖先元素等候没有开启定位，则返回body
  13.     var op = box1. offsetParent ;
  14.     alert(op.id);
  15. offsetL eft
  16.     -当前元素相对于其定位父元素的水平偏移量
  17. offsetTop
  18.     当前元素相对于其定位父元素的垂直偏移量
  19. scrollWidth
  20. scrollHeight
  21.     可以获取元素整个滚动区域的高度和宽度
  22. scrollLeft
  23.     可以获取水平滚动条滚动的距离
  24. scrollTop
  25.     可以获取垂直滚动条滚动的距离
  26. scrollHeight-scrollTop==clientHeight时垂直滚动条滚动到底
  27.     例如：info.scrollHeight-info.scrollTop==info.clientHeight
  28. scrollWidth-scrollLeft==clientWidth时水平滚动条滚动到底

事件对象

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style>
  7.             #areaDiv {
  9.                 width: 200px;
  10.                 height: 50px;
  11.                 border: 1px solid #000000;
  12.             }
  14.             #showMsg {
  16.                 width: 200px;
  17.                 height: 20px;
  18.                 border: 1px solid #000000;
  19.                 margin-top: 10px;
  20.             }
  21.         </style>
  22.         <script>
  23.             window.onload = function() {
  25.                 var areaDiv = document.getElementById("areaDiv");
  26.                 var showMsg = document.getElementById("showMsg");
  27.                 // 事件对象
  28.                 // 当事件的响应函数被触发时，浏览器每次都会将一一个事件对象作为实参传递进响应函数
  30.                 areaDiv.onmousemove = function(event) {
  32.                     // clientX    返回当事件被触发时，鼠标指针的水平坐标。
  33.                     // clientY    返回当事件被触发时，鼠标指针的垂直坐标。
  34.                     //通过判断兼容浏览器
  35.                     if (!event) {
  37.                         event = window.event;
  38.                     }
  39.                     //或则evnet=event||window.event;
  40.                     var x = event.clientX;
  41.                     var y = event.clientY;
  43.                     showMsg.innerHTML = "x=" + x + "," + "y = "+y;
  45.                 }
  46.             };
  47.         </script>
  48.     </head>
  49.     <body>
  50.         <div id="areaDiv"></div>
  51.         <div id="showMsg"></div>
  52.     </body>
  53. </html>

在这里插入图片描述

使div跟随鼠标移动

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style>
  7.             #box1 {
  9.                 width: 100px;
  10.                 height: 100px;
  11.                 background-color: #00FF00;
  12.                 /*开启定位*/
  13.                 position: absolute;
  14.             }
  15.         </style>
  16.         <script>
  17.             window.onload = function() {
  19.                 var box1 = document.getElementById("box1");
  20.                 document.onmousemove = function(event) {
  22.                     //使div跟随鼠标移动
  23.                     if (!event) {
  25.                         event = window.event;
  26.                     }
  27.                     //获取滚动条的滚动距离
  28.                     var st =document.body.scrollTop || document.documentElement.scrollTop;
  29.                     var sl =document.body.scrollLeft || document.documentElement.scrollLeft;
  31.                     //获取到鼠标的坐标
  32.                     /*
  33.                     clientX和clientY
  34.                     用于获取鼠标在当前的可见窗口的坐标
  35.                     div的偏移量，是相对于整个页面的
  36.                     pageX和pageY可以获取鼠标相对于当前页面的坐标
  37.                     但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
  38.                     */
  40.                     var left = event.clientX;
  41.                     var top = event.clientY;
  43.                     //设置div的偏移量
  44.                     box1.style.left = left+sl + "px";
  45.                     box1.style.top = top +st+ "px";
  47.                 }
  48.             }
  49.         </script>
  50.     </head>
  51.     <body>
  52.         <div id="box1"></div>
  53.     </body>
  54. </html>

事件的冒泡

取消冒泡
可以将事件对象的cancelBubble设置为true，即可取消冒泡
event=event || window.event;
event.cancelBubble=true;

事件的委派

  1. 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
  2. 我们可以尝试将其绑定给元素的共同的祖先元素
  4. 事件的委派
  5.     指将事件统一-绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会- -直 冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
  6.     事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
  7. ul.οnclick=function(event){
  8.     //如果触发事件的对象是我们期望的元素，则执行否则不执行
  9.     event=event || window.event;
  10.     if(event.target.className=="link"){
  11.         alert("只有点击a中的内容才会触发事件");
  12.     }
  13. }
  15. <ul id="ul">
  16.     <li><a href="javascript:;" class="link">超链接一</a></li>
  17.     <li><a href="javascript:;" class="link">超链接一</a></li>
  18.     <li><a href="javascript:;" class="link">超链接一</a></li>
  19. </ul>

事件的绑定

同时为一个元素的相同事件同时绑定多个响应函数

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script>
  7.             window.onload = function() {
  9.                 var btn01 = document.getElementById("btn01");
  10.                 // addEventListener( )
  11.                 // -通过这个方法也可以为元素绑定响应函数
  12.                 // -参数:
  13.                 // 1.事件的字符串，不要on
  14.                 // 2.回调函数，当事件触发时该函数会被调用
  15.                 // 3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
  17.                 // 使用addEventListener( )可以同时为一个元素的相同事件同时绑定多个响应函数，
  18.                 // 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
  20.                 //addEventListener//IE8以下不支持
  22.                 // btn01.addEventListener("click",function(){
  24.                 //     alert(1)
  25.                 // },false)
  26.                 // btn01.addEventListener("click",function(){
  28.                 //     alert(2)
  29.                 // },false)
  30.                 // btn01.addEventListener("click",function(){
  32.                 //     alert(3)
  33.                 // },false)
  35.                 //attachEvent不兼容
  37.                 // btn01.attachEvent("onclick",function(){
  39.                 //     alert(1);
  40.                 // })
  41.                 // btn01.attachEvent("onclick",function(){
  43.                 //     alert(2);
  44.                 // })
  45.                 // btn01.attachEvent("onclick",function(){
  47.                 //     alert(3);
  48.                 // })
  49.                 bind(btn01,"click",function(){
  51.                     alert(this);
  52.                 });
  53.             }
  54.             //定义一一个函数，用来为指定元素绑定响应函数
  55.             // addEventListener( )中的this,是绑定事件的对象
  56.             // attachEvent( )中的this,是window
  57.             // 需要统-两个方法this
  59.             /*
  60.             参数:
  61.             *
  62.             obj要绑定事件的对象
  63.             *
  64.             eventStr事件的字符串（不用on）
  65.             *
  66.             callback回调函数
  67.             */
  68.             //兼容的解决方法
  70.             function bind(obj, eventStr, callback) {
  72.                 if (obj.addEventListener) {
  74.                     //大部分浏览器兼容的方式
  75.                     obj.addEventListener(eventStr, callback, false);
  76.                 } else {
  78.                     //this由调用方式决定
  79.                     //IE8及以下
  80.                     obj.attachEvent("on" + eventStr, function(){
  82.                         callback.call(obj);
  83.                     });
  84.                 }
  85.             }
  86.         </script>
  87.     </head>
  88.     <body>
  89.         <button id="btn01"></button>
  90.     </body>
  91. </html>

事件的传播

事件的拖拽1

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             #box1 {
  9.                 width: 100px;
  10.                 height: 100px;
  11.                 background-color: #00FF00;
  12.                 position: absolute;
  13.             }
  14.         </style>
  15.         <script>
  16.             window.onload = function() {
  18.                 var box1 = document.getElementById("box1");
  19.                 /* 拖拽box1元素
  20.                 拖拽的流程
  21.                 1.当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
  22.                 2.当鼠标移动时被拖拽元素跟随鼠标移动onmous emove
  23.                 3.当鼠标松开时，被拖拽元素固定在当前位置onmouseup */
  24.                 box1.onmousedown = function() {
  26.                     document.onmousemove = function(event) {
  28.                         event = event || window.event;
  30.                         //获取鼠标的坐标
  31.                         var left = event.clientX;
  32.                         var top = event.clientY;
  34.                         //修改box1的位置
  35.                         box1.style.left = left + "px";
  36.                         box1.style.top = top + "px";
  37.                     }
  38.                     document.onmouseup = function() {
  40.                         //当鼠标松开时，被拖拽元素固定在当前位置onmouseup
  41.                         //取消document的onmousemove事件
  42.                         document.onmousemove = null;
  43.                         //取消document的onmouseup事件
  44.                         document.onmouseup = null ;
  46.                     }
  47.                 }
  49.             }
  50.         </script>
  51.     </head>
  52.     <body>
  53.         <div id="box1"></div>
  55.     </body>
  56. </html>

事件的拖拽2

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             #box1 {
  9.                 width: 100px;
  10.                 height: 100px;
  11.                 background-color: #00FF00;
  12.                 position: absolute;
  13.             }
  14.         </style>
  15.         <script>
  16.             window.onload = function() {
  18.                 var box1 = document.getElementById("box1");
  19.                 /* 拖拽box1元素
  20.                 拖拽的流程
  21.                 1.当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
  22.                 2.当鼠标移动时被拖拽元素跟随鼠标移动onmous emove
  23.                 3.当鼠标松开时，被拖拽元素固定在当前位置onmouseup */
  24.                 box1.onmousedown = function(event) {
  26.                     //div的偏移量鼠标.clentX -元素.offsetLeft
  27.                     //div的偏移量鼠标.clentY -元素.offsetTop
  28.                     event = event || window.event;
  29.                     var ol=event.clientX-box1.offsetLeft;
  30.                     var ot=event.clientY-box1.offsetTop;
  32.                     document.onmousemove = function(event) {
  34.                         event = event || window.event;
  36.                         //获取鼠标的坐标
  37.                         var left = event.clientX;
  38.                         var top = event.clientY;
  40.                         //修改box1的位置
  41.                         box1.style.left = left-ol + "px";
  42.                         box1.style.top = top-ot + "px";
  43.                     }
  44.                     document.onmouseup = function() {
  46.                         //当鼠标松开时，被拖拽元素固定在当前位置onmouseup
  47.                         //取消document的onmousemove事件
  48.                         document.onmousemove = null;
  49.                         //取消document的onmouseup事件
  50.                         document.onmouseup = null ;
  52.                     }
  53.                 }
  55.             }
  56.         </script>
  57.     </head>
  58.     <body>
  59.         <div id="box1"></div>
  61.     </body>
  62. </html>

事件的拖拽3

  1. //设置btn01对鼠标按下相关的事件进行捕获
  2. //当调用一个元素的setCapture( )方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上
  3. if(box1.setCapture){
  4.     box1.setCapture();
  5. }
  6. box1.setCapture&&box1.setCapture();
  8. //当鼠标松开时，取消对事件的捕获
  9. box1.releaseCapture && box1.releaseCapture( );

发表评论

表情：
评论列表 （有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读

    相关 DOM 文档对象模型

    优点和缺点 编辑 DOM的优势主要表现在：易用性强，使用DOM时，将把所有的XML文档信息都存于内存中，并且遍历简单，支持XPath，增强了易用性。 DOM的缺点主要

    野性酷女野性酷女/ 0 赞/ 381 阅读