jsday13学习笔记

事件绑定方式：

        事件的绑定方式

                DOM0级

                        1. 事件属性方式

                        2. 赋值式

                DOM2级

                        3. 事件监听

                        ele.addEventLisitner(事件类型,functiion(){

                        })

                兼容性问题

                        兼容IE7、8

                        ele.attachEvent(事件类型,事件处理函数)

        注： 事件类型前加 'on' onclick

        区别：

                1. 事件赋值与事件监听 同 事件属性相比，实现了结构与行为分离

                2. 事件赋值与事件监听

                        事件监听方式 后面的事件不会覆盖前面的事件(事件源和事件类型相同)

                事件解绑

                        1. 解绑赋值式绑定事件

                                btn2.onclick = null

                        2. 解绑事件监听

                                事件源.removeEventListener('click',事件处理函数名)

时间目标对象：

        事件对象

                event

        事件目标对象

                target

        当前选中的元素节点

                e.target

        兼容IE

                e.srcElement

        var target = e.target || e.srcElement

                this关键字: 在事件处理函数中this表示事件源

事件传播：

        1. 嵌套的元素, 事件会传播

        2. 事件传播方向问题

                + 事件冒泡

                        从事件目标对象开始 -> window对象结束

                        由内向外传播的事件方式称为事件冒泡 (默认传播行为)

                + 事件捕获

                        由外向内传, window对象 -> 事件目标对象

                3. 事件监听第三个参数设置true表示事件捕获,默认false表示事件冒泡

                4. 阻止事件传播

                        e.stopPropagation()

                        兼容ie浏览器

                                e.cancelBubble = true

                                e.stopPropagation?e.stopPropagation()：e.cancelBubble = true  =>三元运算

事件委托：

        事件代理(委托) 利用 事件冒泡实现

        事件委托使用场景

                当要给多个元素循环绑定事件的时候可以考虑使用事件委托简化操作

                注： 不支持事件冒泡的不能使用 如:焦点事件

        好处：

                减少了事件绑定的数量；

                对后来动态创建的元素依然有效，

                解决动态添加的元素节点无法绑定事件的问题

函数补充：

        自调用函数

                函数定义和调用写在一块

                        (function(){

                                // 函数体

                        })()

                arguments 对象

                        => 函数所有实参的集合

                        => 函数体中直接使用

                        => 类数组

                        => 函数可变参数

this关键字：

                => this表示当前对象

                => 在同场景下this表示不同的对象

                        1. 事件处理函数中的this

                                        this->事件源

                        2. 普通函数中this

                                        this -> window对象

                        3. 定时器中this

                                        this -> window对象

                        4. 自调用函数中this

                                        this -> window对象

                        5. 对象方法中的this

                                        Object

                                                var obj = {

                                                                name:'jack',

                                                                say:function(){

                                                                                this

                                                                }

                                                        }

                        调用该方法引用变量指向的对象