DOM（3）

1. 注册事件概述：给元素添加事件，称为注册事件或绑定事件
2. 注册事件有两种方式：传统方式和方法监听注册方式
3. 传统注册方式：                                                                                                                           （1）利用on开头的事件onclick：①<button οnclick="alert('hihi')"></button>                                                                                ②btn.οnclick=function(){}（特点：注册事件的唯一性，同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数）
4. 方法监听注册事件：                                                                                                                   （1）addEventListener()  (特点：同一个元素同一个事件可以注册多个监听器；按注册顺序依次执行）                                                                                                                                      ①语法：eventTarget.addEventListener(type,listener[,useCapture]                                          ②type：事件类型字符串，比如click、mouseover，注意不要带on                                          ③listener：事件处理函数，事件发生时，会调用该监听函数                                                    ④useCapture：可选参数。是一个布尔值，默认false
5. 删除事件（解绑事件）：                                                                                                           （1）传统注册方式：eventTarget.οnclick=null                                                                         （2）方法监听注册方式：eventTarget.removeEventListener(type,listener[,useCapture]);     
6. DOM事件流：从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程称为DOM事件流                                                                                               （1）例：给一个div注册点击事件：捕获阶段：document->html->body->div；冒泡阶段：div->body->html->document                                                                                                         （2）DOM事件流分为3个阶段：捕获阶段、当前目标阶段、冒泡阶段                                     （3）JS代码中只能执行捕获或冒泡其中的一个阶段                                                                 （4）onclick和attachEvent只能得到冒泡阶段                                                                           （5）addEventListener(type,listener [,useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序，如果是false(不写默认false），表示在事件冒泡阶段调用事件处理程序                                                                                                                                               （6）有些事件是没有冒泡的：onblur、onfocus、onmouseenter、onmouseleave 
7. 事件对象 ：eventTarget.οnclick=function(event){} （event（可以写成e或evt，是个形参，系统设定为事件对象，不需要传递实参）事件代表事件的状态，事件发生后，跟事件相关的一系列信息事件数据的集合都放在这个对象里面）    
8. 事件对象常见属性和方法：                                                                                                          （1）e.target：返回触发事件的对象（标准）                                                                          （2）e.srcElement：返回触发事件的对象（非标准）                                                              （3）e.type：返回事件的类型（比如click mouseover不带on）                                                （4）e.preventDefault()：该属性阻止默认事件（标准：比如不让链接跳转）                          （5）e.stopPropagation()：阻止冒泡（标准）                                                                                 注：（1）中e.target点击了哪个元素返回哪个元素；this哪个元素绑定了点击事件，那么就返回谁       
9. 事件委托（事件代理）：在jQuery里面称为事件委派                                                                 （1）事件委托原理（重点）：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点                                                                    ①例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。
10. 常用鼠标事件：                                                                                                                           （1）禁止鼠标右键菜单：contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单                                                                                                                      语法：document.addEventListener('contextmenu',function(e){e.preventDefault(); })        （2）禁止鼠标选中（selectstart 开始选中）:                                                                                    语法：document.addEventListener('selectstart',function(e){    e.preventDefault()  ;}) 
11. 鼠标事件对象：event对象代表事件的状态，跟事件相关的一系列信息的集合。                    （1）鼠标事件对象：MouseEvent                                                                                                    ①e.clientX：返回鼠标相对于浏览器窗口可视区的X坐标                                                          ②e.clientY：返回鼠标相对于浏览器窗口可视区的Y坐标                                                          ③e.pageX：返回鼠标相对于文档页面的X坐标                                                                        ④e.pageY：返回鼠标相对于文档页面的Y坐标                                                                        ⑤e.screenX：返回鼠标相对于电脑屏幕的X坐标                                                                      ⑥e.screenY：返回鼠标相对于电脑屏幕的Y坐标                                                          （2)常用的键盘事件：                                                                                                                      ①onkeyup：某个键盘按键被松开时触发                                                                                   ②onkeydown：某个键盘按键被按下时触发                                                                             ③onkeypress：某个键盘按键被按下时触发（但它不识别功能键，比如ctrl shift箭头等）                                                                                                                                                       注：①如果使用addEventListener不需要加on；②三个事件执行顺序：keydown->keypress->keyup                                                                                                                     （3）键盘事件对象：                                                                                                                      ①keyCode：得到相应键的ASCII码值（keyup和keydown不区分大小写；keypress区分大小写），可以利用keyCode返回的ASCII码值判断用户按下了哪个键                                                 注意：keydown和keypress在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框中，keyup事件触发的时候，文字已经落入文本框里面了                                                     

天赋娱乐音乐