注册事件(绑定事件)
1、传统注册方式
利用on开头的事件,如btn.οnclick=functon(){}
特点:注册事件的唯一性,同一个元素同一个事件只能设置一个处理函数
2、方法监听注册方式
addEventListener()
特点:同一个元素同一个事件可以注册多个监听器,按注册顺序依次执行。
eventTarget.addEventListener(type, listener[, userCapture]) //type:事件类型字符串,如click 、mouseover,注意要加单引号; listener:事件处理函数,事件发生时,会调用该监听函数
删除时间(解绑事件)
eventTarget.onclick=null; //传统注册方式
eventTarget.removeEventListener(type, listener[, useCapture]); //方法监听注册方式
DOM事件流
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流 。
DOM事件流的三个阶段
1、JS代码中只能执行捕获或者冒泡其中的一个阶段。
2、onclick 和attachEvent只能得到冒泡阶段。
3、addEventListener(type,listener[,usecapture])第三个参数如果是true,表示在事件捕
获阶段调用事件处理程序;如果是 false (不写默认就是false ),表示在事件冒泡阶段调 用事件处理程序。
4、在实际中更关注事件冒泡。 onblur、onfocus、onmouseenter、onmouseleave没 有冒泡。
事件对象
event对象代表事件的状态,比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event,它有很多属性和方法。这个event【function后面的括号里】是个形参,系统帮我们设定为事件对象,不需要传递实参过去。当我们注册事件时,event对象就会被系统自动创建,并依次传递给事件监听器(事件处理函数).
e.target 指向我们点击的对象,即谁触发了事件
this: 谁绑定了事件
阻止默认行为
阻止默认行为(事件),如让链接不跳转,提交按钮不提交
e.preventDefault();
阻止事件冒泡:
e.stopPropagation(); //
e.cancelBubble=true; //低版本浏览器
事件委托(代理、委派)
原理:不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。
案例:给ul注册点击事件,然后利用事件对象的target来找到当前点击的li,因为点击li,事件会冒泡到ul上ul有注册事件,就会触发事件监听器。
常用键盘事件
onkeyup //某个键盘被松开
onkeydown //某个键盘按键被按下
onkeypress //某个键盘按键被按下 但不能识别功能键
键盘事件的事件对象中的属性KeyCode可以返回该键的ASCLL码值,onkeydown和onkeyup不区分字母大小写,onkeypress区分字母大小写。