喜迎
春节

JS事件流


事件冒泡

Netscape认为,石头先扔进河里,再从河里确定了一个扔石头的点,从外往内逐渐精确的过程(捕获)

w3c认为,石头扔进去先到达准确的那个点,涟漪从内往外扩散(冒泡)

事件流:事件执行的顺序

子元素的事件被触发时,父级也会被触发(冒泡)

一个完整事件包含 捕获阶段 —-> 目标阶段 —->冒泡阶段

冒泡是可以阻止的

 e.stopPropagation( );
 e.cancelBubble=true;//兼容IE

事件监听

DOM0级事件处理,是一种赋值方式,是被所有浏览器所支持的,简单易懂容易操作;

DOM2级事件处理是所有DOM节点中的方法,可以重复绑定,但是浏览器兼容存在问题;

//DOM0级
oDiv.onclick = function(){ .... }    

//DOM2级
if(window.attachEvent){
    oDiv.attachEvent("onclick", function(){ ... });  // IE只有冒泡阶段,所以没有第三个参数,而且需要加on;
}else{
    oDiv.addEventListener( "click", function(){ ... },false);  // false指冒泡阶段
}

//移除事件监听,第二个参数为必须,移除的事件处理函数
oDiv.removeEventListener( "click",fn)
oDiv.detachEvent("onclick",fn)

事件委托(事件代理)委派

什么是事件委托:全班同学都要做《五年高考三年模拟》,每个同学自己去书店买?不用,委托老师帮你们买,同学们只管认真做题就好啦,好开心。

事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以处理某一类型的所有事件
使用场景主要用于事件源不确定的情况,可以把事件委托给父级

判断事件源:

e.target || e.srcElement

文章作者: NekoDeng
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 NekoDeng !
评 论
 上一篇
JS冒泡选择快速排序
JS冒泡选择快速排序
JS冒泡排序(必须掌握思想和必须会代码默写)(面试最常考)原理:依次比较相邻的两个值,如果后面的比前面的小,则将小的元素排到前面。依照这个规则进行多次并且递减的迭代,直到顺序正确。 var arr=[8,94,15,88,55,76,21,
2020-07-23
下一篇 
JS事件2
JS事件2
事件的原理事件的原理和hover类似。可以做到:hover做不到的事,:hover只能操作当前的元素,但是事件绑定之后可以选择任何元素。 事件触发三要素:通过谁触发? 通过什么触发?触发后要做什么? 事件的写法: w3c标准:事件写在行内,
2020-07-17
  目录