一.在javascript中,想要给元素添加一个事件,有两种方式
- 事件处理器
- 事件监听器
1.事件处理器
通过操作HTML属性的方式给元素添加一个事件
例:oBtn.οnclick=function(){…};
事件处理器是无法为一个元素添加多个相同事件的
2.事件监听器
(1)绑定事件
事件监听器指的是使用addEventListener()方法来为元素添加事件,又称之为绑定事件
语法:obj.addEventListener(type.fn,false)
obj是一个DOM对象,type是一个字符串,指的是事件类型,例如单击事件click,鼠标移入mouseover,这个时间类型是不需要加on前缀的 ,
fn是一个函数名,或者是一个匿名函数
false表示事件冒泡阶段调用
例:
如果想要为元素仅仅添加一个事件的话,obj.addEventListener(“click”,function(){…};false);与obj.οnclick=function(){…};是等价的
(2)解绑事件
可以使用removeEventListener()方法解绑某个事件
语法:obj.removeEventListener(type,fn,false)
其中fn必须是函数名,不是函数
实际上,removeEventListener()只可以解除事件监听器添加的事件,无法接触事件处理器添加的事件,想要解除事件处理器添加的事件,可以使用obj.事件名=null;来实现
二.event对象
当事件发生后,这个事件有关的详细信息就会临时保存到一个指定的地方,这个地方就是event对象
1.type属性
实际上,每次调用一个函数的时候,javascript都会默认给这个函数加上一个隐藏的参数,这个参数就是event对象,一般来说,event对象是作为时间函数的第一个参数传入的,e仅仅是一个变量名,它储存的是一个event对象,e可以换成其他的名字,如ev,event,a等
2.keyCode
如果想要获取按下了键盘中的哪个键,可以使用event对象的keyCode属性来获取
语法:event.keyCode返回的是一个数值
如果是shift,ctrl,alt这三个键,不需要通过keyCode属性获取,可以直接通过shiftkey,ctrlkey,altkey这三个属性获取,返回的是布尔值
3.this
在事件操作中,哪个DOM对象(元素节点)调用了this所在的函数,那么this指向的就是哪个DOM对象
例:
this指向的是一个匿名函数,然后这个函数被oDiv调用了,所以this指向的就是oDiv