js：事件的概念与行为、事件对象与获取事件对象的兼容处理、鼠标键盘事件的常见属性、默认事件与阻止默认事件、事件流与阻止事件冒泡 - 第十二天

# 一、复习

1、DOM元素操作

    - 选择器

        - 元素节点

        - 其他节点

            - 创建：document.createElement('元素名称')

            - 插入：

2、样式操作

    - 获取非行内

        - getComputedStyle(元素).css属性

    - 节点.nodeType

    - 节点.nodeName

    - 节点.nodeValue

5、内容操作

    - innerHTML

    - innerText

    - 元素.value

6、快速获取尺寸类属性

    - 元素.offsetWidth

    ...

# 三、事件

1、事件的概念：行为，同某种动作触发才能执行的功能

2、事件分类：行为类型

    - 鼠标类

    - 键盘类

    - 表单类

    - 浏览器类

3、事件绑定

    - 赋值式绑定：事件.on事件类型 = （事件处理函数）功能

    - 监听式绑定

4、事件源：绑定事件的元素

    - 绝对可以通过this关键字获取

5、事件目标：触发事件的元素

    - 绝对可以通过event.target获取

6、事件处理函数：当触发对应事件时，要执行的功能

# 四、事件对象

1、事件对象概念：用来记录事件发生时产生的相关信息。（如：鼠标坐标、键盘的键码等）

2、事件对象的获取

    - 必须在事件处理函数内部才能获取

        - 正常浏览器：接收形参：事件处理函数的第一个形参，默认是事件对象

        - 低版本IE：通过window获取，在事件处理函数内部，通过window的内置属性event获取

            - window.event

//获取事件对象的兼容处理

document.onclick = function(abc){

        var e =abc ? abc:window.event;

        console.log(e);

    }

3、事件对象的特点

    - 事件对象由浏览器派发

    - 只有在事件发生时才会被分配

    - 事件结束后，事件对象被浏览器回收

    - 事件发生必然会执行事件处理函数，所以事件对象只能在事件对象内部获取

# 五、鼠标事件对象的常见属性

1、事件类型：

    - e.type

2、获取按键：

    - e.button

    - e.buttons

3、获取事件目标：

    - 正常浏览器：e.target

    - IE低版本浏览器：e.scrElemnet

    - 借助三目运算符处理兼容

4、鼠标相对事件目标的坐标

 

# 六、键盘事件对象的常见属性

1、键码

    - e.keyCode

    - e.which

2、功能按键：

    - ctrl或control:e.ctrlKey

    - shift:e.shiftKey

    - alt或

# 七、默认事件

1、默认事件：非开发者自定义，浏览器自带的，官方自带的，浏览器内置的

2、阻止默认：

    - 正常：e.preventDefalt();

    - IE低版本浏览器e.returnValue = false;

    

function stopDefaul(){

        if(e.preventDefalt){

            e.preventDefalt();

        }else{

            e.returnValue = false;

        }

    }

# 八、事件流

1、事件流：多个具有包含关系的事件源的相同事件之间的执行顺序

2、事件流的状态

    - 事件冒泡：从内向外依次触发

    - 事件捕获：从外向内依次触发

    - 目标阶段：真正要触发的事件

3、事件冒泡：当触发某个元素的某个事件时，不仅会触发自身的事件，还会依次向上触发所有父元素的相同事件

    - 是默认的事件流状态

    - 微软最先提出，所以IE低版本只支持事件冒泡

4、阻止事件冒泡

    - 正常：e.stopPropagation();

    - 低版本IE：e.cancelBubble = true;
 

  function stopBubble(e){

        if(e.stopPropagation){

            e.stopPropagation()

        }else{

            e.cancelBubble = true;

        }

    }

5、鼠标进入和离开

    - 进入：mouseover和mouseenter

    - 离开：mouseout和mouseleave

    - 区别前者会触发，后者不会触发冒泡