元素嵌套iframe怎么给外层绑定点击事件_DOM 事件委托

事件委托

事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素。

一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

举个例子，比如一个宿舍的同学同时快递到了，一种方法就是他们都傻傻地一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一一分发给每个宿舍同学；

在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM 元素，而出去统一领取快递的宿舍长就是代理的元素，所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

场景一：如何给100按钮添加点击事件？

回答：监听这100按钮的祖先，在冒泡的时候判断target是不是这100按钮中的一个

div1

场景二：如何监听一个目前不存在的元素的点击事件?

回答：监听祖先，在点击的时候判断是否是想要监听的元素

setTimeout

有什么优点？

1. 省内存
2. 动态绑定事件。

function 

事件介绍​developer.mozilla.org

特例

问题：

1.只有一个div被监听

2.fn分别在捕获和冒泡阶段，都监听click事件

3.e.target 等于 e.currentTarget，即用户点击元素与开发者监听元素是同一个

div

请问，f1和f2哪个先执行？如果把这两行调换位置，哪个先执行？

答案：谁先监听，谁先执行

事件绑定API

IE5：baba.attachEvent('onclick', fn) // 冒泡阶段

网景：baba.addEventListener('click', fn) // 捕获阶段

W3C: baba.addEventListener('click', fn, bool)

如果bool为true，就让fn走捕获，即当浏览器在捕获阶段发现baba有fn监听，就会调用fn，并提供事件信息

如果bool不传值或为falsy，就让fn走冒泡，即当浏览器在冒泡阶段发现baba有fn监听函数，就会调用fn，并提供事件信息