DOM等级须知

  • DOM0级 : 直接在标签绑定事件方式 或者通过获取dom节点绑定事件 ```javascript <!DOCTYPE html>
``` - DOM2级 : 通过addEventListener (利用发布订阅模式) ```javascript ``` - DOM3属于新增一些事件: load、scroll .....等 ### 鼠标事件 #### onclick ```javascript
box
``` #### ondblclick ```javascript
box
``` #### oncontextmenu ```javascript
box
``` #### onmousedown ```javascript
box
``` #### onmouseup ```javascript
box
``` #### onmousemove ```javascript
box
``` #### onmouseleave( 阻止冒泡) ```javascript
box
``` #### onmouseenter(阻止冒泡) ```javascript
box
``` #### onmouseover( 冒泡 ) > 指的是当我们鼠标移动到子元素、在移动会来时会**频繁触发父节点mouseover**、所以一般情况下我们都是使用**mouseenter和mouseleave**方法去做移入移出的操作 ```javascript
box
``` #### onmouseout ( 冒泡 ) ```javascript
box
``` ### 键盘事件 #### onkeydown ```javascript ``` #### onkeypress ```javascript ``` #### onkeyup ```javascript ``` ### 页面/对象事件 #### onerror ```javascript DOM事件 - 图1 ``` #### onhashchange ```javascript 改变锚点 ``` #### onload ```javascript DOM事件 - 图2 ``` #### onpageshow ```javascript ``` #### onpagehide ```javascript ``` #### onresize ```javascript ``` #### onscroll ```javascript
``` ### 表单事件 #### onfocus ```javascript ``` #### onblur ```javascript ``` #### oninput ```javascript ``` ### 剪贴板事件 #### oncopy ```javascript
复制的内容111
``` #### oncut ```javascript
复制的内容111
``` #### onpaste ```javascript
复制的内容111 DOM事件 - 图3
``` ### 打印事件 ```javascript

打印的内容1

打印的内容2

  1. <a name="H2Rzq"></a>
  2. #### onbeforeprint
  3. ```javascript
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <meta charset="UTF-8">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.     <title>Document</title>
  11. </head>
  12. <body>
  13.     <div>
  14.         <div id="prints" class="prints paging">
  15.             <p>打印的内容1</p>
  16.             <p media="print">打印的内容2</p>
  17.         </div>
  18.         <button onclick="startPrint()">开始打印</button>
  19.     </div>
  20. </body>
  21. </html>
  23. <script>
  24.     function startPrint(){
  25.         // let dom = document.getElementById('prints');
  26.         // let win = window.open('');
  27.         // win.document.write(dom.outerHTML);
  28.         // win.print();
  29.         // win.close();
  31.         window.print();
  32.     }
  33.     window.onbeforeprint = function(e){
  34.         console.log('即将开始打印')
  35.     }
  36.     window.onafterprint = function(e){
  37.         console.log('开始打印',e)
  38.     }
  39. </script>
  41. <style>
  42.     .prints{
  43.         width:200px;height:200px;color:red; 
  44.         border: 1px solid #000;
  45.     }
  47.     @media print {
  48.         /* 去除眉角 */
  49.         @page {
  50.             margin: 0;
  51.         }
  52.         /* 分页 */
  53.         .paging {
  54.             page-break-after: always;
  55.         }
  56.     }
  57. </style>

拖拽事件

元素如果需要拖拽功能、我们需要把元素属性draggable设置为ture, draggable=”true”、拖拽分为拖拽元素和目标元素! 现在我们看看拖拽元素和目标元素所支持的事件!

拖拽元素事件 && 目标元素事件( 观察拖拽元素移动到目标元素事件)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <div id="box1" draggable="true" style="width: 100px;height: 100px;background: red;">拖拽元素</div>
  12.     <div id="box2" style="width: 100px;height: 100px;background: blue;">目标元素</div>
  13. </body>
  14. </html>
  16. <script>
  17.    const box1 = document.getElementById("box1");
  18.    const box2 = document.getElementById("box2");
  20.    // 拖拽元素
  21.    box1.addEventListener("dragstart",() =>{
  22.      console.log('拖拽元素开始拖动')
  23.    })
  24.    box1.addEventListener("dragend", () => {
  25.       console.log("拖拽元素结束拖拽")    
  26.    })
  27.    box1.addEventListener("drag", () =>{
  28.      // console.log("拖拽元素在拖拽")
  29.    })
  32.    // 目标元素事件
  33.    box2.addEventListener("dragenter", () =>{
  34.      console.log("拖拽元素进入目标元素")
  35.    })
  36.    box2.addEventListener("dragleave", () =>{
  37.      console.log("拖拽元素离开目标元素")
  38.    })
  39.    box2.addEventListener("dragover", (e) =>{
  40.       e.preventDefault()
  41.      // console.log("拖拽元素在目标元素里面移动")
  42.    })
  43.    box2.addEventListener("drop", () =>{
  44.      console.log("拖拽元素放入目标元素")
  45.    })
  46. </script>