JavaScript dragenter 事件
此事件會在拖拽滑鼠指標進入目標元素時觸發。
dragenter事件的注意點簡單羅列如下:
(1).事件處理函式註冊於目標元素之上。
(2).並不是被拖拽的源元素進入目標元素時觸發,而是滑鼠指標進入目標元素。
(3).可以在此事件處理函式中設定進入目標元素中的一些狀態。
關於事件處理函式註冊,可以參閱如何註冊事件處理函式一章節。
下面通過一段程式碼例項對此事件進行一下簡單演示:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> p{ width:100px; height:50px; background-color:red; } #box { width:200px; height:200px; background-color:#ccc; } .over { border: 1px dashed #000; transform: scale(0.8, 0.8); } </style> <script> window.onload = () =>{ let odiv=document.getElementById("box"); let op=document.getElementById("p"); op.ondragstart = (ev) => { ev.dataTransfer.setData("Text",ev.target.id); } odiv.ondragenter = (ev) => { ev.target.classList.add('over'); } odiv.ondragover = (ev) => { ev.preventDefault(); } odiv.ondrop = (ev) => { ev.preventDefault(); ev.stopPropagation(); ev.target.classList.remove('over'); let data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } } </script> </head> <body> <p draggable="true" id="p"></p> <div id="box"></div> </body> </html>
上述程式碼對dragenter事件進行了簡單的演示,程式碼執行效果截圖如下:
對上述程式碼分析如下:
(1).首先,並非是源元素進入目標元素後觸發此事件,而是拖拽的滑鼠指標進入時觸發。
(2).dragenter事件觸發後,通過事件處理為目標元素新增樣式類"over",於是看到縮小和虛線邊框。
(3).當拖動滑鼠指標離開目標元素的時候,再將樣式類"over"刪除。
相關閱讀:
(1).classList可以參閱JavaScript classList 屬性一章節。
(2).箭頭函式可以參閱JavaScript 箭頭函式一章節。
相關文章
- JavaScript事件JavaScript事件
- JavaScript 事件JavaScript事件
- javaScript事件(一)事件流JavaScript事件
- javaScript事件(三)事件物件JavaScript事件物件
- JavaScript dragstart 事件JavaScript事件
- JavaScript drag 事件JavaScript事件
- JavaScript dragend 事件JavaScript事件
- JavaScript dragover 事件JavaScriptGo事件
- JavaScript dragleave 事件JavaScript事件
- JavaScript drop 事件JavaScript事件
- JavaScript storage 事件JavaScript事件
- JavaScript mouseout 事件JavaScript事件
- JavaScript事件模型JavaScript事件模型
- JavaScript mouseenter 事件JavaScript事件
- JavaScript animationIteration 事件JavaScript事件
- JavaScript animationStart 事件JavaScript事件
- JavaScript dblclick 事件JavaScript事件
- JavaScript mousemove 事件JavaScript事件
- JavaScript input 事件JavaScript事件
- JavaScript hashchange 事件JavaScript事件
- JavaScript reset 事件JavaScript事件
- JavaScript resize 事件JavaScript事件
- JavaScript mousedown 事件JavaScript事件
- JavaScript focus 事件JavaScript事件
- JavaScript blur 事件JavaScript事件
- JavaScript mouseup 事件JavaScript事件
- JavaScript mouseover 事件JavaScript事件
- JavaScript 事件冒泡JavaScript事件
- JavaScript submit 事件JavaScriptMIT事件
- JavaScript change 事件JavaScript事件
- JavaScript animationEnd 事件JavaScript事件
- JavaScript transitionEnd 事件JavaScript事件
- JavaScript click 事件JavaScript事件
- JavaScript abort事件JavaScript事件
- JavaScript scroll 事件JavaScript事件
- javascript blur事件JavaScript事件
- javascript事件操作JavaScript事件
- JavaScript 事件物件JavaScript事件物件