JavaScript-DOM-事件_js 拖拽dom超出区域会选中文本-优快云博客

本文链接：https://blog.youkuaiyun.com/github_37519401/article/details/78730461

本文详细介绍了DOM事件的基础概念及其常见类型，包括鼠标事件、键盘事件、触摸事件等，并提供了丰富的示例代码来展示如何使用这些事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM能让JavaScript对HTML元素进行访问，但若要让用户对元素进行访问就需要用到DOM事件了。
事件通常和函数一起使用，函数作为事件触发后的回调，只有在事件触发后，函数才会执行。
下面是常用的事件简介：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <form action="#">
        <input name="name"/>
    </form>
    <button>Click Me!</button>
    <script>
        var oForm = document.querySelector('form');
        var oInput = document.querySelector('input');
        var oButton = document.querySelector('button');
    </script>
</body>
</html>

鼠标事件：
点击事件（onclick）
鼠标左键单击并松开后触发

oButton.onclick = function() {
    console.log('onclick');
}

双击事件（ondblclick）
鼠标左键双击并松开后触发，也触发了两次点击事件

oButton.ondblclick = function() {
    console.log('ondblclick');
}

鼠标移入事件（onmouseover）
当鼠标移入对象时触发

oButton.onmouseover = function() {
    console.log('onmouseover');
}

鼠标移动事件（onmousemove）
当鼠标在对象上移动时触发

oButton.onmousemove = function() {
    console.log('onmousemove');
}

鼠标移出事件（onmouseout）
当鼠标移出对象时触发

oButton.onmouseout = function() {
    console.log('onmouseout');
}

鼠标按下事件（onmousedown）
当鼠标在对象上按下时触发

oButton.onmousedown = function() {
    console.log('onmousedown');
}

鼠标按下松开事件（onmouseup）
当鼠标在对象上按下松开时触发

oButton.onmouseup = function() {
    console.log('onmouseup');
}

当点击一个对象通常的触发顺序就是:
onmousedown->onmouseup->onclick

键盘事件：
键盘按键按下事件（onkeydown）
当按键对象按下时触发

oButton.onkeydown = function() {
    console.log('onkeydown');
}

键盘按键按下松开事件（onkeyup）
当按键对象按下松开时触发

oButton.onkeyup = function() {
    console.log('onkeyup');
}

键盘按键按下并松开事件（onkeypress）
当按键对象按下并松开时触发

oButton.onkeypress = function() {
    console.log('onkeypress');
}

移动设备的触摸事件
手指按下事件（ontouchstart）
当手指在对象上按下时触发

oButton.ontouchstart = function() {
    console.log('ontouchstart');
}

手指按下松开事件（ontouchend）
当手指在对象上按下松开时触发

oButton.ontouchend = function() {
    console.log('ontouchend');
}

手指移动事件（ontouchmove）
当手指在对象上按下移动时触发

oButton.ontouchmove = function() {
    console.log('ontouchmove');
}

手指触摸取消事件（ontouchcancle）
取消触摸事件时触发，通常时当有电话进来时触发

oButton.ontouchcancle = function() {
    console.log('ontouchcancle');
}

域内容变化事件（onchange）
当域的内容变化并时触发(通常用于表单元素)
input,textarea元素 value变化并失去焦点时触发
checkbox,radio元素 checked值变化时触发
select元素 value改变时触发

oInput.onchange = function() {
    console.log('onchange');
}

域内容变化事件（oninput）
当域的内容变化时触发(通常用于输入元素,input、textarea)

oInput.oninput = function() {
    console.log('oninput');
}

获得焦点事件（onfocus）
对象获得焦点时触发

oInput.onfocus = function() {
    console.log('onfocus');
}

失去焦点事件（onblur）
对象失去焦点时触发

oInput.onblur = function() {
    console.log('onblur');
}

文字选中事件（onselect）
对象文字被选中触发

oInput.onselect = function() {
    console.log('onselect');
}

表单事件
表单提交事件（onsubmit）
当表单提交时触发,可在此处验证表单，并阻止表单提交

oForm.onsubmit = function() {
    console.log('onsubmit');
}

表单重置事件（onreset）
当表单被重置时触发（点击表单中的reset按钮）

oInput.onreset = function() {
    console.log('onreset');
}

window和img事件
载入完成事件（onload）
当页面或图像被载入完成后触发

window.onload = function() {
    console.log('onload');
}

载入错误事件（onerror）
当页面或图像被载入错误时触发（通常用于图片）

window.onerror = function() {
    console.log('onerror');
}

载入错误事件（onresize）
窗口或框架重置大小时触发

window.onresize = function() {
    console.log('onresize');
}

退出页面事件（onunload）
当用户关闭或刷新页面时触发（基本用不上）

window.onunload = function() {
    console.log('onunload');
}

事件的常用属性和方法：

坐标相关属性：

//事件发生在相对视口的X,Y坐标
e.clientX
e.clientY
//事件发生在相对屏幕的X,Y坐标
e.screenX
e.screenY
//鼠标指针相对于整个文档的X，Y坐标；
e.pageX
e.pageY
/**IE**/
//事件发生相对目标元素内边的X,Y坐标
e.offsetX
e.offsetY
//事件发生的位置的x，y坐标，相对于用CSS动态定位的最内层包容元素。相当于clientX,clientY
e.x
e.y

键盘相关属性：

//事件触发时按下了alt键则返回true
e.altKey
//事件触发时按下了shift键则返回true
e.shifyKey
//事件触发时按下了ctrl键则返回true
e.ctrlKey
//事件触发时按下了meta键则返回true
e.metaKey

触发事件的源对象相关：

//始终指向绑定事件回调函数的对象，相当于回调函数中的this
e.currentTarget
//指向真正触发事件的对象（事件代理基于此属性）
e.target

其他属性相关：

//鼠标事件中，点击的键的代表值
e.button
//触发事件的类型，click、mouseover等
e.type
//事件是否处于冒泡阶段
e.bubbles
//返回是否可取消事件默认动作
e.cancelable
//返回事件触发时的事件的毫秒值减去页面载入完成时的时间毫秒值
e.timeStamp

事件冒泡，阻止默认事件相关：

//阻止默认事件（如表单提交）
e.preventDefault()
//停止事件冒泡
e.stopPropagation()

/**IE**/
//设置为false,阻止默认事件
e.returnValue
//设置为true,阻止默认事件
e.cancelBubble

几个关于事件的兼容写法

oButton.onclick = function(e) {
    //获取事件对象
    e = e ? e : window.event;
    //阻止事件冒泡
    e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true)
    //阻止事件默认动作
    e.preventDefault ? e.preventDefault() : (e.returnValue = true)
    //获取target
    var target = e.target ? e.target : e.srcElement
}

常用的几个事件相关代码:
一. 实现自己的右键菜单

document.oncontextmenu = function(e){e.preventDefault();}
oButton.onkeydown = function(e){
    //鼠标右键在鼠标事件中的button属性为2
    if(e.button === 2){
        //弹出菜单
    }
}

二. 验证表单，表单验证未通过则停止提交

oForm.onsubmit = function(e){
    var name = oInput.value;
    if(name === ''){
        e.preventDefault();
    }
}

三. 事件代理
假设有如下DOM结构，并需要在点击LI标签时，弹出标签中的内容:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

使用事件代理写法：

document.querySelector('ul').onClick = function(e){
    var target = e.target;
    if(target.nodeName === 'LI'){
        alert(target.innerHTML);
    }
}

四. 使用同一个函数绑定到对象的多个事件句柄，根据事件类型做出相应动作

var handleFunc = function(e) {
    if(e.type === 'click'){
        //do something about click
    }else if(e.type === 'mouseover'){
        //do something about mouseover
    }
}
oButton.onclick = oButton.onmouseover = handleFunc;