前端JS知识要点总结（8）

事件

知识点：

• 通用事件绑定
• 事件冒泡
• 代理

题目二十五：编写一个通用的事件监听函数

事件绑定的常规写法如下：

var btn = document.getElementById('btn')btn.addEventListener('click', function(e) {    console.log('btn is clicked')})

事件绑定的另一种写法：

function bindEvent(elem, type, fn){    elem.addEventListener(type, fn)}var a = document.getElementById('link1')bindEvent(a, 'click', function(e){    e.preventDefault() //阻止a标签的默认行为（跳转）    alert('link1 is clicked')})

题目二十六：描述事件冒泡（event bubbling）流程

要提到一下知识点：

• DOM树形结构
• 事件冒泡，逐层触发
• 阻止冒泡
• 冒泡的应用，代理

对于一个无限下拉加载图片的页面，如何给每个图片绑定事件

使用代理，即在父节点上绑定事件，判断点击源，做出相应的动作。
特点：简洁优雅

var div1 = document.getElementById('div1')div1.addEventListener('click', function(e) {    // 如果需要阻止默认行为，例如a标签的跳转，则需要使用preventDefault()    var target = e.target    if(target.nodeName === 'A') {//注意这里的‘A’代表的是A标签，其他的标签也是类似，都是用的是大写形式        alert(target.innerHTML)    }})