常见的事件
浏览器事件
window.onload = function(){
}
window.onscroll = function(){
console.log("滚动起来了")
}
鼠标事件
- onclick 单击
- ondblclick 双击
- onmousedown 鼠标按下
- onmouseup 鼠标抬起
- onmousemove 鼠标移动
box.onmousedown = function(){
console.log('鼠标按下了')
}
box.onmousemove = function(){
console.log('鼠标移动了')
}
键盘事件
- onkeydown 键盘按下
- onkeyup 键盘抬起
- onkeypress 键盘按下抬起
- document整个文档
username.onkeydown = function(){
console.log('键盘按下')
}
username.onkeyup = function(){
console.log('键盘抬起')
}
表单事件
- onchange 触发change事件
- oninput 触发input事件
- onfocus 获取焦点事件
- onblur 失去焦点事件
username.onchange = function(){
console.log('触发了 change 事件')
}
username.oninput = function(){
console.log('触发了 input 事件')
}
username.onfocus = function(){
console.log('获取焦点了')
}
username.onblur = function(){
console.log('失去焦点了')
}
移动端事件
- ontouchstart
- ontouchmove
- ontouchend
事件
、事件组成
- 1、事件源(有谁触发的事件)
- 2、绑定事件的方式
- 3、事件处理函数(事件发生的时候，要执行什么代码)
事件对象
- event 事件对象
- type: " click" 事件类型
- 注：以前Chrome 和 FireFox 不支持 window.event
dv.onclick = function(e){
e = e || window.event
}
坐标信息
- clientX clientY 光标距离可视窗口左边和上边的距离
- offsetX offsetY 光标距离当前事件源左边和上边的距离
- pageX pageY 光标距离页面左边和上边的距离
鼠标右键事件
e.button 左键：0 滚轮：1 右键：2
IE兼容：which 左键：1 滚轮:2 右键 3
鼠标事件
- click 单击
- dbclick 双击
- mousedown 按下
- mousemove 移动
- mouseup 抬起
- mouseenter 鼠标进入
- mouseleave 鼠标离开
- mouseover 鼠标进入
- mouseout 鼠标离开
- contextmenu 右键事件
键盘事件
回车 13 左 37 上 38 右 39 下 40
组合键：`e.altKey && e.shiftKey && e.ctrlKey && e.keyCode === 13`
表单事件
- change
- input
- focus
- blur
- submit
移动端事件
- touchstart
- touchmove
- touchend
浏览器事件
监听事件
- addEventListener
- attachEvent
var dv = document.getElementById("box")
dv.addEventListener("click",function(){
console.log("走吧")
})
IE8及以下
dv.attachEvent("onclick",function(){
console.log("出去")
})
解绑事件
- removeEventListener
- detachEvent
解绑事件的时候，事件处理函数绑定的时候，必须是同一个函数(同一个地址)
var dv = document.querySelector("div")
var btn = document.querySelector("button")
function fn(){
console.log(123)
}
dv.addEventListener("click",fn)
btn.onclick = function(){
dv.removeEventListener("click",fn)
}
dv.attachEvent("onclick",fn)
btn.onclick = function(){
dv.detachEvent("onclick",fn)
}
事件执行的机制
- addEventListener 有第三个参数 是一个布尔值 默认是 false
false => 冒泡
true => 捕获 - 事件传播：我们把这个行为叫做事件冒泡，由最里面的那个元素向外触发
- 事件捕获：由最外层的元素向内 触发(IE)
阻止冒泡
- 谷歌：
e.stopPropagation( ) - IE：
e.cancelBubble = true
事件委托
把这个事件绑定在父级元素的身上，然后由父级元素去委派给子元素
var target = e.target || e.srcElement
阻止默认事件
- 1、return false 如果要用这个阻止默认行为，一定要写在最后，因为return 后面的代码不再执行
- 2、e.preventDefault( ) IE8及以下不支持
- 3、e.returnValue = false IE8
|