JavaScript 事件
event
只要事件发生就会产生一个event事件
e.target
返回触发事件的对象 标准
e.srcElement
返回触发事件的对象（非标准 ie6-8）使用
e.type
返回事件的类型，比如：click，mouseover 不带 on
e.returnValue
该属性阻止默认事件（默认行为 ie 6-8），比如不让链接跳转
e.preventDefault()
该属性阻止默认事件（默认行为）标准，比如不让链接跳转
e.stopPropagation()
阻止冒泡 【标准】
e.cancelBubble
阻止冒泡【ie】
鼠标事件
onclick
当鼠标点击某个对象
ondblclick
ondblclick
当鼠标双击某个对象
onmouseover
onmouseover
当鼠标被移到某元素之上
onmouseout
onmouseout
当鼠标从某元素移开
onmousemove
onmousemove
当鼠标被移动
onmousedown
onmousedown
当某个鼠标按键被按下
onmouseup
onmouseup
当某个鼠标按键被松开
oncontextmenu
oncontextmenu
右键事件
onmousewheel
onmousewheel
当滚轮被滚动的时候
鼠标事件还可以使用 addEventListener("",function(){ }) 方式进行添加，只需在引号内的事件中去掉 on 即可
<!DOCTYPE html>
<html lang="en">
<head>
<title>鼠标事件</title>
</head>
<body>
<!-- 一个事件源可以添加多个事件 -->
<button>点击试试</button>
</body>
<script>
var btn = document.querySelector('button');
// 鼠标双击
btn.ondblclick = function(){
console.log("鼠标双击");
}
// btn.addEventListener("dblclick",function(){
// console.log("鼠标双击");
// })
// 鼠标移入
btn.onmouseover = function(){
console.log("鼠标移入");
}
// btn.addEventListener("mouseover",function(){
// console.log("鼠标移入");
// })
// 鼠标离开
btn.onmouseout = function(){
console.log("鼠标离开");
}
// btn.addEventListener("mouseout",function(){
// console.log("鼠标离开");
// })
// 鼠标移动(仅在btn中移动)
btn.onmousemove = function(){
console.log("鼠标移动");
}
// btn.addEventListener("mousemove",function(){
// console.log("鼠标移动");
// })
// 鼠标按键被按下
btn.onmousedown = function(){
console.log("鼠标按键被按下");
}
// btn.addEventListener("mousedown",function(){
// console.log("鼠标按键被按下");
// })
// 鼠标按键松开，弹起
btn.onmouseup = function(){
console.log("鼠标按键松开，弹起");
}
// btn.addEventListener("mouseup",function(){
// console.log("鼠标按键松开，弹起");
// })
// 鼠标右键菜单
btn.oncontextmenu = function(){
console.log("鼠标右键菜单");
}
// btn.addEventListener("contextmenu",function(){
// console.log("鼠标右键菜单");
// })
// 鼠标滚轮
btn.onmousewheel = function(){
console.log("鼠标滚轮");
}
// btn.addEventListener("mousewheel",function(){
// console.log("鼠标滚轮");
// })
// 鼠标进入
btn.onmouseenter = function(){
console.log("鼠标进入");
}
// btn.addEventListener("mouseenter",function(){
// console.log("鼠标进入");
// })
// 鼠标移出
btn.onmouseleave = function(){
console.log("鼠标移出");
console.log("=====================");
}
// btn.addEventListener("mouseleave",function(){
// console.log("鼠标移出");
// console.log("=====================");
// })
</script>
</html>键盘事件
onkeydown
键盘的某个键被按下或按住
onkeyup
onkeyup
键盘的某个键被松开
获取键盘码
console.log(event.keyCode);
<script>
document.onkeydown = function () {
console.log(event.keyCode); // 获取键盘码
switch (event.keyCode) {
case 65:
left -= 10;
break;
case 87:
tops -= 10;
break;
case 68:
left += 10;
break;
case 83:
tops += 10;
break;
}
box.style.top = `${tops}px`;
box.style.left = `${left}px`;
}
document.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
// 再这里处理事件
}
});
</script>
移动端事件
touch 触摸
touchmove 触摸后移动
touchstart 手指触摸屏幕
touchend 手指离开屏幕
touchmove 触摸后移动
touchstart 手指触摸屏幕
touchend 手指离开屏幕
表单事件
onsubmit 提交按钮被点击
onreset 重置按钮被点击
onchange 当用户改变表单元素内容
oninput 用户输入时触发(边输入边触发)
onselect 文本内容被选中
Window.innerHeight 窗口的高度（包含滚动条）
页面事件
onscroll 页面滚动事件
onsubmit 提交按钮被点击
onreset 重置按钮被点击
onchange 当用户改变表单元素内容
oninput 用户输入时触发(边输入边触发)
onselect 文本内容被选中
Window.innerHeight 窗口的高度（包含滚动条）
页面事件
onscroll 页面滚动事件
addEventListener("scroll",function(){})
window.onresize = function(){} 浏览器大小发生改变
window.onload = function(){} 当页面加载完成后
return false 阻止默认事件
window.onload = function(){} 当页面加载完成后
return false 阻止默认事件
事件监听
event （事件监听对象） 只要触发事件，就会发生
var e = event || window.event 兼容
e.target 返回触发元素本身的标签
e.target.dataset.XXX 返回自定义属性(data-XXX)
e.type 返回事件名称(类型)
e.returnValue 阻止默认事件发生(IE6~8)
e.preventDefault() 阻止默认事件发生(非IE)
e.currentTarget 返回绑定事件本身的标签
event.stopPropagation() 阻止冒泡
event （事件监听对象） 只要触发事件，就会发生
var e = event || window.event 兼容
e.target 返回触发元素本身的标签
e.target.dataset.XXX 返回自定义属性(data-XXX)
e.type 返回事件名称(类型)
e.returnValue 阻止默认事件发生(IE6~8)
e.preventDefault() 阻止默认事件发生(非IE)
e.currentTarget 返回绑定事件本身的标签
event.stopPropagation() 阻止冒泡
浙公网安备 33010602011771号