随手笔记09-事件高级部分（事件对象、事件流，阻止默认行为、事件委托）

一、事件函数

obj.on-事件名=fn
定义事件的时候，事件函数不会自动执行，当事件触发的时候，会执行

二、事件对象

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。
比如：

1. 谁绑定了这个事件。
2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

1.事件对象的使用

事件触发发生时就会产生事件对象，并且系统会以实参的形式传给事件处理函数。

所以，在事件处理函数中声明1个形参用来接收事件对象。

2.事件对象的兼容处理

事件对象本身的获取存在兼容问题：

1. 标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
2. 在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。

   <div>123</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function(e) {
                // 事件对象 兼容写法
                e = e || window.event;
                console.log(e);
        }
    </script>

拓展知识：关于兼容性写法或者说关于逻辑与

在判断语句中：
0, ‘’（空字符串） ,null,undefined,false 均为假
其余，均为真
逻辑运算符:
|| && !
若逻辑运算符两边不是布尔类型，则结果也不一定是布尔类型
短路现象：若||第一个条件为真，则第二个条件不执行

        var arr = [];
        if (arr) {
            console.log('run');
        }
        //--------控制台输出---------
        //run

	   console.log(2 || 7);
        //--------控制台输出---------
        //2  短路，2返回true，后面的7不会执行

	   console.log(0||7);
	    //--------控制台输出---------
	    //0

		console.log(0 && 7); //0
        console.log(1 && 7); //7

		//面试题
	  	var a = 5;
        var b = 3 || ++a;
        console.log(b, a);//3,5,发生短路，++a没有运算

三、事件绑定和取消

• addEventListener()事件监听（IE9以后支持）
• removeEventListener(事件名,事件函数,isBubble)解绑事件
  
  useCapture：默认值为false，冒泡阶段，true为捕获阶段
  
• attacheEvent()事件监听（IE678支持）
• detachEvent()取消事件
  
  

事件监听兼容性解决方案

addEventListener和attachEvent的区别

addEventListener

• 事件名不用加on前缀
• 可以选择捕获阶段还是冒泡阶段
• this只事件调用者
• 同名事件执行顺序：先添加先执行

attachEvent

• 事件名需要加on前缀
• 不可选择捕获阶段还是冒泡阶段
• this window对象
• 同名事件的执行顺序：后添加先执行

三、事件流

事件流：事件被触发之后会在DOM树的节点之间传递

当时的2大浏览器霸主谁也不服谁！
IE 提出从目标元素开始，然后一层一层向外接收事件并响应，也就是冒泡型事件流。
Netscape（网景公司）提出从最外层开始，然后一层一层向内接收事件并响应，也就是捕获型事件流。
江湖纷争，武林盟主也脑壳疼！！！
最终，w3c 采用折中的方式，平息了战火，制定了统一的标准 —–— 先捕获再冒泡。
现代浏览器都遵循了此标准，所以当事件发生时，会经历3个阶段。

DOM 事件流会经历3个阶段：

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

冒泡：事件由最具体的元素(事件的触发者),层层向外传递（传递给父节点），直到window 对象停止

捕获：事件由最外层元素(window),层层向内传递，直到最具体的元素

我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。

事件流机制有时候会对页面效果造成一些影响，所以需要拦截事件的冒泡：
兼容性写法：
window.event?window.cancelBubble=true:e.stopPropagation()

四、阻止浏览器默认行为

拦截浏览器自带的一些事件行为，例如：a超链接的跳转等…
对象.事件名                      return false      支持IE9和常用浏览器
对象.addEventListener()   e.preventDefault()       在常用浏览器
对象.attachEvent()            e.returnValue=false;    retrun false;  在IE中

五、常见事件

右键事件：oncontextmenu    使用阻止默认行为可以实现禁用鼠标右键的效果
键盘事件：onkeydown onkeyup onkeypress
    键盘事件的属性：

• key            在IE中不支持      键名称
• keyCode    键码

滚轮事件：

• onwheel            标准浏览器和IE9以上
• onmousewheel   IE9以下
• 对象.addEventListener(“DOMMouseScroll”,事件函数,false)    火狐浏览器

滚轮事件对象

• e.wheelDelta     滚动距离     IE和火狐中一次滚动120      向下 -120
• e.detail                 滚动距离      一次滚动3         要顾及兼容性需要×40

六、事件的委托

原理：给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。
作用：

• 我们只操作了一次 DOM ，提高了程序的性能。
• 动态新创建的子元素，也拥有事件。

    <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>