13-事件+this关键字

事件的绑定方式

        DOM0级

                1. 事件属性方式

                2. 赋值式

        DOM2级

                3. 事件监听

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

                        })

        兼容性问题

                兼容IE7、8

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

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

        区别:

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

                2. 事件赋值与事件监听

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

        事件解绑

                1. 解绑赋值式绑定事件

                        btn2.onclick = null

                2. 解绑事件监听

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

事件目标对象

        事件对象

                event

        事件目标对象

                target

                当前选中的元素节点

                        e.target

        兼容IE

                e.srcElement

                var target = e.target || e.srcElement

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

                console.log('this ',this)

事件传播

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

        2. 事件传播方向问题

                + 事件冒泡

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

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

                + 事件捕获

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

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

        4. 阻止事件传播

                e.stopPropagation()

                兼容ie浏览器

                e.cancelBubble = true

                e.stopPropagation?e.stopPropagation():e.cancelBubble = true

事件委托

        事件代理

                现实生活 事件代理

                        点外买 -> 小哥 -> 你们

                        放到前台

                        王老师 代收

                软件技术 事件代理

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

                        事件委托使用场景

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

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

                好处:

                减少了事件绑定的数量;

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

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

默认行为

        1. a标签 默认行为 href执行链接跳转

        2. form表单action

        3. 右键事件 contextmenu

        阻止默认行为

                e.preventDefault()

                扩展

                        <a href="javascript:void(0)" >确定</a>

函数

        自调用函数

        函数定义和调用写在一块

        (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

                                }

                        }

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值