14前端javascript——事件

1、注册事件

• 1.1传统的注册事件：利用on开头的事件

  • 注册事件的唯一性

  • 同一个元素同一事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数

• 1.2方法监听注册方式

  • addEventListener(type,listener,[,useCapture])事件监听方式，可以注册多个监听器

    • type:事件类型，不用on开头

    • listener:事件处理函数，最好不能是匿名函数，否则不知道删除事件就不知道删除哪个了

    • 可选参数，boolean类型，默认false（冒泡） true（捕获）

2、删除事件

• 2.1传统方式解绑：eventTarget.onclick = null;

• 2.2方法监听解绑事件

  • removeEventListener(type,listener[,useCapture])

    • type:事件类型，不用on开头

    • listener:事件处理函数:不能是匿名函数，否则不知道删除谁

    • 可选参数，boolean类型，默认false（冒泡） true（捕获）

3、DOM事件流

• 事件流描述的是事件在页面中的接收顺序

• 事件捕获：从DOM最顶层结点开始，逐级向下传播

• 事件冒泡：事件由具体元素接收后，逐级向上传播到DOM最顶层节点

• onblur、onfocus、onmouseenter、onmouseleave事件没有冒泡

4、事件对象event

• 放在监听函数的小括号里面，只有有了事件，才有事件对象，系统创建的

• 事件对象是事件的一系列数据集合，和事件相关的信息

• 事件对象我们自己可以自己命名

• ie678 window.event获取事件对象

• 事件对象常用的属性和方法

  • 3.1 e.target 返回触发事件的对象

  • 3.2 e.srcElement 返回触发事件的对象非标

  • 3.3 e.type 返回事件的类型

  • 3.4 e.cancelBubble 阻止冒泡非标

  • 3.5 e.returnValue 阻止默认事件非标

  • 3.6 e.preventDefault() 阻止默认事件

  • 3.7 e.stopPropagation() 阻止冒泡

5、事件委托

• 原理：不给每个子节点单独设置事件监听器，而且事件监听器设置在父节点上，然后利用冒泡原理影响到每一个子节点，优点是只操作一次dom

6、鼠标

6.1常用的鼠标事件

• onclick 鼠标点击触发

• onmouseover 鼠标经过触发

• onmouseout 鼠标离开触发

• onfocus 获得鼠标焦点触发

• onblur 失去鼠标焦点触发

• onmousemove 鼠标移动触发

• onmouseup 鼠标弹起触发

• onmousedown 鼠标按下触发

• contextmenu 禁止鼠标右键 e.preventDefault();

• selectstart 禁止选中文字 e.preventDefault();

6.2鼠标事件对象

• MouseEvent

• e.clientX鼠标在可视区的x坐标

• e.clientY鼠标在可视区的x坐标

• e.pageX鼠标在文档区的x坐标

• e.pageY鼠标在文档区的y坐标

• e.screenX鼠标在电脑屏幕的x坐标

• e.screenY鼠标在电脑屏幕的y坐标

常用的键盘事件

• onkeyup 某个键盘被松开时触发，

• onkeydown 某个键盘被按下触发

• onkeypress 某个键盘被按下触发，不包括功能键

• 执行顺序：onkeydown、onkeypress、onkeyup

• 用addEventListener不需要加on

键盘事件对象

• keyboardEvent对象里面属性和方法

  • keyCode 按键的ascii码：onkeyup、onkeydown不区分字母大小写，onkeypress区分字母大小写