事件绑定:是给元素的某个行为绑定一个方法,目的是当事件行为触发的时候,可以做一些事情
鼠标点击:鼠标按下弹起算一次点击
鼠标按下:不分左右键或者滚轮,只要按下/抬起就会触发
鼠标滚动
鼠标移动:鼠标尖端移动触发
鼠标经过
鼠标进入
如何选用:项目中,如果一个容器中有后代元素,想要鼠标进入和离开做啥事,我们一般都用mouseenter和mouseleave。
能绑定键盘事件的有:input、textarea、window、document.body等
使用范围:input......
使用范围:音频、视频
其它常用事件
单手指事件模型Touch
多手指事件模型Gesture
box.onclick=function(){ console.log('哈哈哈~~');}box.onclick=function(){ console.log('呵呵呵~~');}只输出后面的:
box.onclick=function(){ console.log('哈哈哈~~'); //=>移除事件绑定:DOM0直接赋值为null即可 box.onclick=null;}2、DOM2事件绑定语法:元素.addEventListener(事件行为,function(){},true/false)true/false可以省略,默认是falseIE6~8中:元素.attachEvent('on事件行为',function(){})原理:基于原型链查找机制,找到EventTarget.prototype上的方法并且执行,此方法执行,会把给当前元素某个事件行为绑定的所有方法,存放到浏览器默认的事件池中(绑定几个方法,会向事件池存储几个);当事件行为触发,会把事件池中存储的对应方法,依次按照顺序执行“给当前元素某一个事件行为绑定多个不同方法”事件池特点:
box.addEventListener('click',function(){ console.log('哈哈哈~~');},false);box.addEventListener('click',function(){ console.log('呵呵呵~~');},false);两个都能输出:
functionfn1(){console.log(1);}functionfn2(){console.log(2);}functionfn3(){console.log(3);}box.addEventListener('click',fn2,false);box.addEventListener('click',fn3,false);box.addEventListener('click',fn1,false);//=>基于addEventListener向事件池增加方法,存在去重的机制“同一个元素,同一个事件类型,在事件池中只能存储一遍这个方法,不能重复存储”box.addEventListener('click',fn1,false);//所以此步跳过,不再存储box.addEventListener('mouseover',fn1,false);
functionfn(){ console.log('哈哈哈~~'); //=>移除事件绑定:从事件池中移除,所以需要指定好事件类型、方法等信息(要和绑定的时候一样才可以移除) box.removeEventListener('click',fn,false);}box.addEventListener('click',fn,false);3、特别注意的几点-1)DOM0和DOM2可以混在一起用:执行的顺序以绑定的顺序为主box.addEventListener('click',function(){ console.log('哔咔哔咔~~');});box.onclick=function(){ console.log('哇咔咔~~');}box.addEventListener('click',function(){ console.log('call~~');});
事件对象是由事件当前本身产生的,和执行什么函数没有关系
如果是鼠标操作,获取的是MouseEvent类的实例(这个实例就是=>鼠标事件对象)
box.onclick=function(ev){console.log(ev);}
如果是键盘操作,获取的是KeyboardEvent类的实例=>键盘事件对象
window键盘码值:
这里不详细介绍了
除了上面,只有鼠标和键盘中有的属性外,还有一些公共的所有事件对象都有的属性
Event.prototype:Event原型上记录了冒泡传播的顺序
1、捕获阶段:=>CAPTURING_PHASE:1
从最外层向最里层事件源依次进行查找
2、目标阶段:=>AT_TARGET:2
3、冒泡传播:=>BUBBLING_PHASE:3
ev.stopPropagation()
效果图:
如果一个容器中很多元素都要在触发某一事件的时候做一些事情的时候,
数据是动态绑定渲染的,要给每一条数据绑定事件行为时,选用事件委托,就可以实现动态点击的处理了,不用在逐一获取绑定了
除某某事件源以外的其它事件源,操作的时候统一做某事的,基本上都要基于事件委托解决