js事件

事件3要素

1. 事件源
2. 事件类型
3. 事件处理函数

事件绑定的方式

• 传统绑定

var btn=document.querySelector('button')
btn.onclick=function(){
console.log('传统绑定')
}

• 现代绑定（事件监听）

var btn=document.querySelector('button')
btn.addEventListener('click',function(){
console.log('现代绑定')
})

• 属性绑定

<div onclick='btn()'></div>
function btn(){
console.log('属性绑定')
}

事件对象event

function getEvent(e){
e=e||window.event//兼容性
console.log(e)
}

获取单击事件鼠标的坐标

• offsetX、offsetY相对于带定位的父元素(没有定位相当于浏览器可视区)
• clientX、clientY相对于浏览器可视区
• pageX、pageY相对于文档

var box=document.querySelector('div')
box.onclick=function(e){
e=e||window.event
console.log(e.offsetX)//相对于带定位的父元素左边的距离
console.log(e.offsetY)//相对于带定位的父元素上边的距离
console.log(e.clientX)//相对于页面可视区左边的距离
console.log(e.clientY)//相对于页面可视区上边边的距离
console.log(e.pageX)//相对于文档左边的距离
console.log(e.pageY)//相对于文档上边的距离
}

阻止默认事件

function getEvent(e){
e=e||window.event//获取事件对象
if(e.stopPropagation){
    e.stopPropagation()//阻止事件冒泡
}else{
     e.cancelBubble = true//阻止事件冒泡
}
}

获取目标对象

var ul =document.querySelector('ul')
ul.addEventListener('click',function(e){
e=e||window.event//获取事件对象
var target=e.target||e.srcElement//获取目标对象兼容ie浏览器
})

事件委托``

鼠标事件

• click 点击事件
• dbclick 双击事件
• contextmenu 右键单击事件
• mousedown 鼠标左键按下事件
• mouseup 鼠标左键抬起事件
• mousemove 鼠标移动
• mouseover 鼠标移入事件
• mouseout 鼠标移出事件
• mouseenter鼠标移入事件
• mouseleave鼠标移出事件

键盘事件

• keyup 键盘抬起事件
• keydown 键盘按下事件
• keypress 键盘按下再抬起事件

表单事件和焦点事件

• change 表单内容改变事件
• input 表单内容输入事件
• submit 表单提交事件
• onblur失去焦点
• focus 获取焦点

触摸事件

• touchstart ： 触摸开始事件
• touchend ： 触摸结束事件
• touchmove ：触摸移动事件