JavaScript中的事件

#总结

上星期五主要内容讲的是事件有事件流的概念，总结来说就是三种传递的方法，dom浏览器默认为从下往上的冒泡方式，但是可以支持捕获方式，而IE只有冒泡。

事件分四种：内嵌事件、DOM0级事件和DOM2级事件、以及IE的事件，第一种事件方式不推荐，DOM0和DOM2两种各有优缺点。

事件的类型有很多种，一般分为鼠标事件、键盘事件和其他。我们可以用传入一个e的方式来获取到Event对象，并使用其属性。少部分事件带有一些默认的行为，我们可以用相应方法予以清除。而事件冒泡也是有阻止其发生的方法的。

除以上内容，还有一个事件委托，概括起来意思就是子节点不处理事件，统一交由父元素处理。

以上知识点都能理解，活用上面有所欠缺，在之后的练习里尽量多使用。

本周的练习基本都能做出来，但是周末这个按钮确实把我难着，实现的效果实在太少，希望明天能好好看看老师思路。

##事件

***

- ###事件流

    *   概念：当一个标签触发事件以后，从这个标签沿着一个方向传递，这就叫事件流。是浏览器处理事件的方法。

    

* 分类：

     - 冒泡（从下到上）（IE只支持）

     - 捕获（从上到下） （网景）

- DOM事件流—DOM浏览器 (先捕获，后冒泡)（默认冒泡）（如果两种方法都存在，最后顺序由代码决定）

- ###事件处理方法

* 内嵌事件

尽量避免使用内嵌事件

* DOM0级事件

     - 优点：兼容各个浏览器

        - 缺点：只能为一个事件添加一个处理方法

        - 添加、删除，可以用null覆盖事件

* DOM2级事件

 

    - addEventListener  (dom浏览器)

        `addEventListener（"click"，function（）{}，true代表捕获/false代表冒泡）//三个参数`

            - 缺点：兼容有问题  

            - 优点：能为一个事件添加多个处理方法

            - 删除：removeEventListener 注意三个参数必须一样，特别注意函数名

- attachEvent （IE浏览器）

            - 删除：tetachEvent（）两个参数，除去第三个

- ###事件类型

* 鼠标

- mouse

- over out 还会执行 里面有子元素

- enter leave 子元素没有影响

* 键盘

        - key

        -down 一直按着

        - up 弹起执行

        - 按下弹起执行

* 其他

        

        - onscroll

* ###事件对象（Event）

- dom浏览器

     - 获取方法 ：函数里传入一个e

     - clientX clientY //鼠标相对于浏览器

     - screenX screenY //鼠标相对于窗口

- IE

    - `e =window.event || e ；` 做兼容

- 属性

- onkeydown 键值，不分大小写

- onkeyup  

- onkeypress 字符码

- keyCode （常用）

- charCode

- which

- 阻止事件的默认行为（方法）

        

- e.preventDefault（）；（dom）

- e.returnValue=false； （IE）

- 阻止事件冒泡

        

- e.stopProopagation//DOM

    - e.cancelBubble=true；//IE

- ###技巧

    - border-collapse：collapse；

    - border-spaceing：0；

    - 还原颜色 ""

    - `parseInt（moveDiv.style.left || 0）； //常见的数初始化技巧`

- ###事件委托

    - 子元素不处理，父元素来处理事件。