事件
事件就是交互事件,用户点击实现回馈,是交互体验的核心功能。
绑定事件处理函数
- ele.onxxxx = function(event){}
兼容性很好,但是一个元素的同一事件上只能绑定一个
基本等同于写在HTML行间上 - obj.addEventListener(type,fn,false)
IE9一下不兼容,可以为一个事件绑定多个处理程序 - obj.attachEvent(‘on’ + type, fn);
IE独有,一个事件同样可以绑定多个处理程序
事件处理程序的运行环境
- ele.onxxx = function (event){}
程序this指向是dom元素本身。
//谁点击,this就指向它。 - obj.addEventListener(type,fn,false);
程序this指向是dom元素本身 - obj.attachEvent(‘on’ + type, fn);
程序this指向window
给一个对象封装一个事件处理函数
function addEvent(elem , type, handle){
if(elem.addEventListener){
elem.addEventListener(type,handle,false)
}else if(elem.attachEvent){
elem.attachEvent('on' + type, function(){
handle.call(elem)
})
}else{
elem['on' + type] = handle;
}
}
解除事件处理程序
- ele.onclick = false/’’/null;
- ele.removeEventListener(type, fn, false);
- ele.detachEvent(‘on’ + type, fn)
注意:若绑定匿名函数,则无法解除绑定
事件处理模型,事件冒泡、捕获
事件冒泡:
- 结构上(非视觉上)嵌套关系的元素,会存在事件冒泡功能,即同一事件,自子元素冒泡向父元素。(自底向上)
事件捕获
- 结构上(非视觉上)嵌套关系的元素,会存在事件捕获功能,即同一事件,自父元素捕获至子元素(事件源元素)。(自顶向下)
- IE没有捕获事件
触发顺序,先捕获,后冒泡
不会触发冒泡事件的方法
- focus
- blur
- change
- submit
- rest
- select
取消冒泡和阻止默认事件
取消冒泡
- W3C标准event.stopPropagation(),不支持IE9以下版本
- IE独有的,event.cancaleBubble = true;
- 封装取消冒泡的函数stopBubble(event)
function stopBubble(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
阻止默认事件
- 默认事件—表单提交,a标签跳转,右键菜单等
- return false;以对象属性的方式注册的时间才生效
- Event.preventDefault();W3C标准,IE9以下不兼容
- event.returnValue = false;兼容IE
- 封装阻止默认事件的函数 cancelHandler(event)
function canceHandler(event){
if(event.preventDefault){
event.preventDefaule();
}else{
event.returnValue = false;
}
}
事件对象
- event || window.event 用于IE
- 事件源对象:
event.target 火狐只有这个
event.srcElement IE只有这个
谷歌浏览器都有 - 兼容性写法,方法
ele.onclick = function(e){
var event = e || window.event;
var target = event.target || event.srcElement;
}
事件委托
利用事件冒泡,和事件源对象进行处理
优点:
- 性能不需要循环所有的元素一个个绑定事件
- 灵活,当有新的子元素时不需要重新绑定事件
鼠标事件
click
鼠标点击之后
mousedown
鼠标按键事件
mousemove
鼠标移动事件
mouseup
区分鼠标按键
contextmenu
右键菜单事件
mouseover
鼠标放入区域
mouseout
鼠标离开区域
mouseenter
鼠标放入区域
mouseleave
鼠标离开区域
用button来区分鼠标的按键,0/1/2
DOM3标准规定:click事件只能监听左键,只能通过mousedown和mouseup来判断鼠标键
解决mousedown和click的冲突
键盘事件
- keydown
按下键盘触发 - keyup
松开键盘触发 - keypress
按住连续触发
keydown>keyoress>keyup - keydown 和 keypress的区别
- keydown 可以响应任意键盘按键,keypress只可以响应字符类键盘按键
- keypress返回ASCLL码,可以转换成相应字符。
- oninput监测输入框输入事件
- onchange输入框聚焦输入再离开的时候触发
- onfouce当聚焦的时候触发
- onscroll鼠标滚动条滚动触发
- onload当文档解析完之后所有页面全部渲染完之后再触发