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;