IE提出事件流
- 事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到不具体的节点;
Netscape提出事件流
- 事件捕获,即不太具体的节点更早接收到事件,而最具体的节点应该最后接收到事件;
为事件指定处理程序的方式
- HTML事件处理程序
- DOM0级事件处理程序
- DOM2级事件处理程序
- IE事件处理程序
- 跨浏览器事件处理程序
'DOM2级事件‘的两个方法
- addEventListener() & removeEventListener()
- 通过addEventListener() 添加的事件处理程序只能使用removeEventListener()来移除
- 通过addEventListener() 添加的匿名函数将无法移除
阻止特定事件的默认行为
- event.preventDefault()
阻止事件的捕获或冒泡
- event.stopPropagation()
‘’DOM2级事件‘’规定的事件流包括哪三个阶段?
- 事件捕获阶段、处于目标阶段、事件冒泡阶段;
确认事件当前正处于事件流的哪个阶段?
- 通过event.eventPhase确认
- 捕获阶段为1, 目标阶段为2, 冒泡阶段为3
什么是事件委托?
- 事件委托是指利用“事件冒泡”,只通过指定一个事件处理程序,来管理某一类型的所有事件;
- 当此事件处理程序被触发时,通过当前事件对象中的target来确认究竟是在哪个元素触发的事件,从而达到一次注册 处理多个元素触发事件的目的;
eg: 如何给一个超长的商品列表中的每个商品绑定一个点击事件啊?如何解决大量事件绑定造成的内存开销问题(简单实现)?
var box = document.getElementById('box') box.onclick = function(event) { // DOM0级事件处理程序 var target = event.target; if (target.nodeName === 'LI') { console.log(target.innerHTML) } }
从八道面试题看JavaScript DOM事件机制