开心截图让梦想照进现实

再我们出发之前,我们先补充下一些知识点,然后我们就做一个拖拽的完整版,同样做好之后,我们就可以执行用了,不需要二次的去封装了!

1,事件的委派

我们先看下一个基本的东西

我们要为每个Li都添加点击事件,这个时候我们会写如下代码:

那么这个时候,加入我们向ul 中添加个li

结果当你点击 的时候, 新添加的Li 没有点击事件的处理函数,也就是没有反应,这个时候,我们还要给它添加相应函数,

你会发现每次添加都需要给新LI重新绑定点击事件,非常麻烦,这个时候,我们就需要用到事件委派!

就是给父亲添加 点击事件,利用孩子的事件冒泡思路去处理该逻辑!

 

那么非常好,那么此时this  是谁呢,答案是, oUl 对象, 给谁绑定的它就指向谁!

事件委派就是利用 事件的冒泡方式(冒泡方式,从子元素往祖先元素去冒泡)

我们修改下, 具体的代码!

 

哪个子控件发生了点击,那个 ev.target 就指向谁,这就是事件的委派,从此, 添加 子元素,无需二次去绑定事件!

这个在实际开发过程中,会遇到!

好,我们继续,有一个事件的绑定,这个也是个兼容性的问题!

我们接着写

那么假如我们想为一个按钮,添加多个事件处理函数呢? 也就是, 一次点击,多个事件处理函数都会运行,这个时候我们就需要用到

结果当我们点击时, 多个事件处理函数都会被触发!、

但是这个方法,在ie8 失效,在IE8中,这样写

那么兼容问题又来了,这个时候我们又需要写一个事件绑定的兼容函数了!

 

以上就是事件绑定的兼容性写法,连,回调函数中的this 都处理过了,保证指向,绑定的对象!

最后我们来稍微了解下事件的传播原理就行了!

事件的传播,分为三个阶段

这节就先到这, 包括了事件的绑定的兼容性写法, 以及事件的传播原理,捕获阶段,从外往里传, 冒泡阶段,从里往外冒泡

我们利用事件的冒泡特性可以实现,事件的委派操作,从而完美的解决了添加带有事件的子元素时,二次绑定事件问题!

事件的原理还是比较简单的,android ,中也是这个样子,它分为分发,拦截和处理,我们再次就不阐述了,以后学到再说!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值