JavaScript-DOM-事件

本文详细介绍了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;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值