继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

事件委托(代理),DOM0级事件绑定,DOM2级事件绑定

欧米雪儿lyy
关注TA
已关注
手记 33
粉丝 64
获赞 315

事件传播3个阶段:

(1)第一个阶段当我们点击里面元素的时候,浏览器会从最外面的window元素依次往里查找html结构,查找到目标源;

(2)目标阶段

(3)当前元素的点击行为触发,按照捕获的阶段从里往外执行元素绑定的方法,这种dom0级绑定的方法,只有在冒泡传播的时候才会被触发,目标阶段和捕获阶段不会触发任何方法,这些绑定的方法和捕获,目标阶段没有任何关系;
curele.addEventListener(type,callback,false)
curele.attchEvent(on+type,callback)只有冒泡行为所以我们不使用捕获行为事件传播;

事件代理:

事件委托:利用事件冒泡传播的机制,因为我们点击元素都有向上传播的机制,标准浏览器会传播window,父元素都绑定是事件,只是我们没有触发事件,没有绑定对应的方法;所以我们没必要给所有的子元素都绑定方法,我们只需要给当前的父元素绑定一个方法,利用事件传播的机制阶段,先捕获找到目标源,触发事件,无论我们点击那个子元素都会触发我们的绑定的父元素,都会触发我们绑定在父元素上的方法,我们点击绑定元素里面的子元素,都传播到外面的父元素,从而触发父元素绑定的方法;

(1)利用事件冒泡传播机制,我们给最外层容器绑定一个方法,里面的后台元素不在绑定方法,我们操作的后台元素也会传播到最外层的元素上,我们通过事件源来做不同的操作;

(2)delegate:事件委托给指定我们给定的元素;
parent.delegate('ele','click',function(){}) 我们不用使用e.target来找当前元素,ele就是我们的this,当前元素;

(3)在之前我们学习当中,我们给一个元素绑定一个方法,ele.onclick = fn

DOM0级事件绑定:

(0)原理:给当前元素的某一个私有属性赋值的操作,付的是一个函数,当后期我们触发相关的行为后,浏览器会把之前的赋值函数执行;ele.onclick = fn

(1)只有在当前元素私有的属性中出现的事件属性,我们才可以绑定。没有出现的绑定不了,如DOMContentLoaded事件在元素的私有属性不存在,所以不能用DOM0为其绑定方法;

(2)DOM0事件绑定给当前元素私有的属性绑定一个方法,后面绑定的方法会把前面的方法都替换掉,只保留最后一个函数的引用地址;

(3)性能比dom2好一些,因为只查找私有的属性进行赋值,

DOM2级事件绑定

(1)标准浏览器,addEventListener / removeEventListenner
ele.addEventListenner('type',callback,方法阶段执行(false冒泡,true捕获阶段))

1.dom2级事件绑定绑定的方法重复,浏览器会把后面相同的方法把前面的覆盖,值保留一个函数;
2.执行的顺序是按照绑定的顺序执行;
3.方法中的this是当前元素;

(2) 非标准浏览器: attachEvent / detachEvent;
ele.attchEvent(on+type,callback),callback里面没有e事件对象,我们使用window.event

1.浏览器不会自动去重;绑定重复的函数都会执行,执行的都是最后一个函数把前面的函数重复的函数覆盖,向事件池添加的时候低版本浏览器没有检测添加的方法;
2.方法中的顺序是混乱的;
3. this是window,

dom2和dom0级事件绑定区别

(1)原理:dom2和dom0不一样,用它做事件绑定,是给当前元素的某个事件行为开辟了一个事件池;(浏览器会自动开辟一个容器,把dom2绑定的方法一次存在事件池中),当行为触发,会把我们池子里面绑定的方法依次执行;

(2)方法中的this是当前元素

(3)dom2中可以给我们的元素绑定多个方法;

dom0是给当前私有的属性赋一个值,只能绑定一个值;

dom2是给当前元素的某个行为事件开辟了一个事件池,绑定很多方法;

DOM2移除事件绑定

dom2绑定是吧方法放在指定的事件池中,移除方法也是从事件池移除,移除需要知道 移除的那个方法,执行函数名,所以我们不能使用匿名函数来绑定事件名;

dom0级事件不需要区别绑定函数名,因为dom0级绑定事件只能绑定一个函数,给当前元素私有的属性赋值一个函数,如果想移除我们可以当前元素赋值为null;

$(document).reay() 和window.onload区别

$(document).reay()使用的是是dom2级事件绑定,所以绑定多次,jq中的事件都是dom2事件绑定来完成的,reay方法执行是DOMContenLoaded事件
$(document).reay()是dom元素加载完成后执行$(document).reay()方法,

window.onload:事件本身就是所有的资源加载成功才能执行,我们使用的dom0级事件绑定,所以只能绑定一次;

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP