09-javascript-各种事件

常见的事件

浏览器事件

• onload
• onscroll 浏览器滚动事件

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 右键事件

键盘事件

• keydown
• keyup
• keypress

//特殊键的keyCode值：
回车  13     左   37    上  38    右   39   下   40
组合键：`e.altKey && e.shiftKey && e.ctrlKey && e.keyCode === 13`

表单事件

• change
• input
• focus
• blur
• submit

移动端事件

• touchstart
• touchmove
• touchend

浏览器事件

• load
• scroll
• resize

监听事件

• addEventListener
• attachEvent

var dv = document.getElementById("box")
//IE9以上和Chrome  兼容问题
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)
}
//addEventListener  removeEventListener
dv.addEventListener("click",fn)
btn.onclick = function(){
    dv.removeEventListener("click",fn)
}
//attachEvent     detachEvent
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