📅 最后修改于: 2023-12-03 15:01:14.495000 🧑 作者: Mango
在 HTML 中，ondragenter 事件属性用于向元素添加一个拖动目标进入其边界时所触发的事件处理程序。当拖动对象进入指定元素的可拖动区域时，会自动触发此事件。通常，这个事件会与ondragover事件配合使用，用于处理拖放操作的目标元素。
<element ondragenter="handler(event)">
当ondragenter事件被触发时，会自动向事件处理程序传递一个event对象。可以使用此对象来获取和操作拖放操作的相关信息。
以下示例展示了如何使用ondragenter事件。
<!DOCTYPE html>
<html>
<head>
<title>ondragenter 事件演示</title>
<style>
.drop {
border: 2px dotted #ccc;
padding: 10px;
text-align: center;
font-size: 20px;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="container" class="drop" ondragenter="dragenterHandler(event)" ondragover="dragoverHandler(event)" ondrop="dropHandler(event)">
将文件拖拽到这里
</div>
<script>
function dragenterHandler(event) {
// 改变拖拽操作目标元素的背景颜色
document.getElementById("container").style.backgroundColor = "#f1f1f1";
}
function dragoverHandler(event) {
// 防止浏览器默认行为，使得ondrop事件被触发。
event.preventDefault();
}
function dropHandler(event) {
// 改变拖拽操作目标元素的背景颜色
event.currentTarget.style.backgroundColor = "#fff";
// 停止浏览器默认行为，使得浏览器不会打开拖拽的文件
event.preventDefault();
// 获取拖拽的文件对象
var file = event.dataTransfer.files[0];
// 判断文件类型
if (file.type.match(/image.*/)) {
// 如果是图片文件，创建一个img元素，将图片显示出来
var reader = new FileReader();
reader.onload = function(event) {
var img = document.createElement("img");
img.src = event.target.result;
document.body.appendChild(img);
}
reader.readAsDataURL(file);
} else {
alert("请拖拽图片文件！");
}
}
</script>
</body>
</html>
这个例子演示了一个简单的拖放操作，当拖拽一个图片文件到指定的div上时，会在页面上显示这个图片。ondragenter和ondragover事件用来改变div元素的样式，让用户知道自己已经进入了可拖放区域，并防止浏览器默认行为。ondrop事件则用来获取拖放的文件对象，并进行相应的处理。