事件高级
注册事件的两种方式
传统方式
● 特点：注册事件的唯一性。同一个元素同一个事件只能注册一个程序处理函数，后面注册的处理函数会覆盖前面注册的
● eventTarget.onclick = function(){ }
方法监听注册方式 addEventListener() (IE9之前不支持)
● 同一元素同一事件可以注册多个监听器，并且按照注册顺序依次执行（下面程序会依次弹窗22和33）
解绑(删除)事件
eventTarget.onclick = null;
eventTarget.removeEventListener(type, listener);
● 注意！addEventListener方式注册事件时，处理函数可以单独写在外面，然后在事件方法里面调用
DOM事件流(P251) -->事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就是DOM事件流 (从页面中接收事件的顺序)
捕获阶段
当前目标阶段
事件冒泡阶段
● 由最具体的元素接收，然后逐级向上传播到DOM最顶层节点
事件对象
事件对象是事件的一系列相关数据的集合
● 例如：鼠标点击事件包含了鼠标事件的相关信息，如鼠标坐标等；键盘事件就包含了键盘事件的信息，如判断按下了键盘的那个键
● 事件对象写在侦听函数(事件处理函数)的括号里面，可以当作形参来看待。且这个事件对象可以自己命名(图中为event)。 事件对象只有有了事件才会存在，是系统自动创建的，不需要我们传递实参
常见事件对象的属性和方法
e.target返回触发事件的对象
● 注意区别于this：this返回的是绑定事件的元素。 用大白话理解就是：e.target是点击了哪个元素就返回哪个元素；而哪个元素绑定了点击事件，this就返回谁
● 由于事件冒泡阶段，点击li也会触发绑定给ul的事件
● e.type返回事件的类型
● e.preventDefault()阻止默认的行为(事件)(如：链接点击跳转，按钮点击提交)
● e.stopPropagation()阻止冒泡 (IE678中要使用e.cancelBubble = true)
事件委托(代理、委派)
● 原理：不用给每个子节点设置事件监听器(绑定事件),而将事件监听器设置在父节点上，然后用事件冒泡原理的影响设置每一个子节点
● 案例：一个ul中包含了很多li，给ul绑定点击事件。此时点击li，事件会冒泡到ul上，也能触发点击事件。然后可以利用事件对象的e.target获取到当前点击的是哪个li
● 作用：我们只操作了一次DOM，提高了程序的效率
常用的事件
常用的鼠标事件
● onclick鼠标左键点击 / ondblclick 鼠标双击事件
● onmouseover鼠标经过触发
● mouseenter鼠标经过元素时触发
● 两者区别：给一个盒子绑定鼠标经过事件时
● mouseover：鼠标经过盒子触发，经过子盒子时还会触发
● mouseenter：只有经过绑定的盒子自身时会触发
● 造成区别的原因：mouseenter事件不会冒泡
● onmouseout鼠标离开触发
● 跟mouseenter搭配，使用mouseleave鼠标离开触发事件(mouseleave也不会冒泡)
● onfocus获得焦点触发
● onblur失去焦点触发
● 禁止选中文本和禁用右键菜单的方法(添加相应事件之后在监听函数中设置阻止默认行为)
● mousedow
n鼠标按下事件
● mousemove鼠标拖动事件(经常写在鼠标按下事件里)
● mouseup鼠标松开事件(经常写在鼠标按下事件里)
鼠标事件对象常用属性
常用的键盘事件
三个事件的执行顺序：keydown --> keypress --> keyup
● 使用传统的注册事件方式就要加on，使用addEventListener( )注册则不用加on
● 键盘事件对象的keyCode属性，返回的是某个按键的ascii码值；注意在keydown和keyup事件中，不会区分大小写，而keypress事件区分大小写
● BOM提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
