注册事件
给元素添加事件,称为注册事件和绑定事件
注册事件有两种方式:传统方式和方法监听注册方式
传统注册方式
- 利用on开头的事件onclick
- 特点:注册事件的唯一性
- 同一个元素同一个事件只能设置一个处理函数,最后处理的注册函数可以覆盖前面注册的处理函数
方法监听注册方式
- W3C标准 推荐方式
- addEventListener() 它是一个方法
- ie9以前不支持,可使用 attachEvent()代替
- 特点:同一个元素同一个事件可以注册多个监听器
- 按照注册顺序依次执行
addEventListener事件监听方式
eventTarget.addEventListener(type , listener [useCapture])
- type:事件类型字符串,click mouseover注意不要带on
- listener 事件处理函数,事件发生时,会调用该监听函数
- useCapture 可选参数,是一个布尔值 , 默认false
attachEvent事件监听方式 (了解即可 ie9以前支持)
eventTarget . attachEvent (eventNameWithon,callback)
- eventNameWithOn:事件类型字符串 , onclick、onmouseover
- callback:事件处理函数 , 当目标触发事件时回调函数被调用
删除事件(解绑事件)
删除事件的方式
- 传统注册方式:eventTarget . onclick = null
- 方法监听注册方式:eventTarget . removeEventListener(type,listener,useCapture)
- 旧版删除事件方式eventTarget . detachEvent ('onclick' fn)
DOM事件流
事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定顺序传播,这个传播过程叫DOM事件流
DOM事件流三个阶段
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
- 事件冒泡:事件开始由最具体的元素接收,逐级向上传播到DOM最顶层节点的过程
- 事件捕获:由DOM最顶层节点开始,逐级向下传播到最具体的元素接收的过程
注意:
- js代码只能执行捕获和冒泡其中的一个阶段
- onclick 和 attachEvent 只能得到冒泡阶段
- addEventListener(type , listener , useCapture) 第三个参数如果是true , 表示在事件捕获阶段调用事件处理程序 , 如果是false , 表示事件在冒泡阶段调用事件处理程序
- onblur、onfocus、onmouseenter、onmouseleave是没有冒泡的
事件对象
div.onclick = function(event){}
//event 就是一个事件对象,写到侦听函数的小括号里面当形参来看
事件对象只有有了对象才会存在,是系统自己创建,无需传递参数
事件对象是事件一系列相关数据的集合,跟事件相关
事件对象可以自己命名 event、evt、e
事件对象也有兼容问题
事件对象常用属性和方法
e . target 指向点击的对象 , 谁触发了这个事件
this 指向的是绑定事件的对象 与currentTarget 相似
return也可以阻止默认事件 , 没用兼容性问题,return后面的代码不执行,只限于传统的注册方式
阻止事件冒泡
阻止事件冒泡兼容性方案
事件委托(代理、委派)
事件委托原理:
不要给每个子节点单独设置事件监听器,而是给父节点设置事件监听器 , 然后利用冒泡原理影响每个子节点
作用
只操作一次DOM,提高程序性能
常用鼠标事件
- 禁止鼠标右键菜单 contextmenu
- 禁止鼠标选中 selectstart
常用键盘事件
三个事件的执行顺序:keydown > keypress > keyup
注意:
- 如果使用addEventListener 不需要加 on
- onkeypress和前面2个的区别 , 不识别功能键
键盘事件对象
keyCode:返回该对象的ASCll值
注意:onkeydown和 onkeyup不区分字母大小写,onkeypress区分字母大小写