js失焦可以用事件委托吗

JavaScript011

js失焦可以用事件委托吗,第1张

可以。基于JS的事件冒泡机制从内到外,可以以JS事件委托的方式,在父元素上给子元素绑定事件,从而减少代码的复杂度。js失焦是指在JavaScript中,失去焦点事件是blur()事件。

事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点。

1.标准写法:利用事件对象里面的 stopPropagation()方法

e.stopPropagation()

2.非标准写法:IE 6-8 利用事件对象 cancelBubble 属性

e.cancelBubble = true

事件委托也称为事件代理, 在 jQuery 里面称为事件委派。 不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。

如:给 ul 注册点击事件,然后利用事件对象的 target 来找到当前点击的 li,因为点击 li,事件会冒泡到 ul 上,ul 有注册事件,就会触发事件监听器,这里只操作了一次 DOM ,提高了程序的性能。

如下一段代码:有2个div,外部是div1,内部是div2,

 <div id="div1" onclick="alert('1')">

         <div id="div2" onclick="alert('2')">

test

         </div>

     </div>

假设在div2内部进行点击,那么:冒泡事件认为:你点击了div2,而div2在div1里内部,所以,也点击了div1,因此执行顺序是 “div2-div1-body” ,由内往外一步步向上,这很像水里有一个鱼吐了一个水泡,这个水泡往上飘一样,所以叫做“冒泡事件”

而事件捕获认为:你点击div2,因为div1在div2外部,所以,div1先捕获到,然后再传递给div2,所以,事件执行顺序是“body-div1-div2”,这就像你进去房间,必须先进入大院,再进入门一样。

其实,2个都有一定的道理,目前,泡沫事件更合理,所以浏览器默认使用冒泡顺序,但是可以通过JS参数设置到底是用冒泡还是捕捉。