08.js基础知识-高级事件

高级事件

1. 注册事件
2. 删除事件
3. DOM事件流
4. 事件对象
5. 阻止事件冒泡
6. 事件委托
7. 常用的鼠标事件
8. 常用的键盘事件

1.注册事件

注册事件分为传统方式和方法监听注册事件

addEventListener(type,listener,[useCapture])同一个元素同一个事件可以注册多个监听器按注册顺序依次执行

type:事件类型字符串，如click,mouseover

listener:事件处理函数，事件发生时，会调用该监听函数

useCapture:可选参数，是一个布尔值，默认false

2.删除事件方式

传统方式删除事件：eventTarget.οnclick=null;

方法监听注册方式：eventTarget.removeEventListener(type,listener)

3.DOM事件流

事件流描述的是从页面中接收事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就是DOM事件流

DOM事件流分为3个阶段：1.捕获阶段，2.当前目标阶段，3.冒泡阶段

js代码中只能执行捕获或者冒泡其中的一个阶段

onclick和attachEvent只能得到冒泡阶段

addEventListener(type,listener,[useCapture])中第三个为true表示在事件捕获阶段调用处理程序父元素->子元素，false表示在事件冒泡阶段调用事件处理程序子元素->父元素

4.事件对象

根事件相关的一系列信息数据的集合都放到这个对象里，这个对象就是事件对象

e.target返回触发事件对象的属性和方法，this返回的是绑定事件的对象（元素）

e.type返回事件的类型

e.preventDefault()该方法阻止默认事件，比如不让链接跳转；用return false也可以

5.组织冒泡事件两种方式

标准写法：利用事件对象里的stopPropagation()方法

非标准写法:e.cancelBubbke - true

6.事件委托

事件委托原理！！重点:不要给每个子节点设置监听事件，直接给父节点设置监听事件，这样利用冒泡原理点击子节点就会直接执行父节点的监听事件

7.常用的鼠标事件

document.addEventListener('contextmenu',function(e)){e.preventDefault()}禁止鼠标右键菜单

8.鼠标事件对象

鼠标事件对象mouseevent和键盘对象keyboardevent

ClientX和clientY相对于浏览器窗口可视区;e.pageX和e.pageY文档页面;e.screenX和e.screenY相对于电脑屏幕

9.鼠标键盘事件

onkeyup某个键盘按键被松开时触发；keyup不区分字母大小写

onkeydown某个键盘按键被按下时触发，keydown不区分字母大小写

onkeypress某个键盘按键被按下时触发，但是不识别功能键，keypress事件区分字母大小写

先执行down->press->up

键盘事件对象：用keyCode打印键盘对象；

keydown和keypress在文本框里事件触发时文本还没有落入文本框中