JS事件
1、事件绑定
var btn = document.getElementById('btn1') btn.addEventListener('click', function (event) { console.log('clicked') })
2、通用的事件绑定函数
function bindEvent(elem, type, fn) { elem.addEventListener(type, fn) } var a = document.getElementById('link1') bindEvent(a, 'click', function(e) { e.preventDefault() // 阻止默认行为 alert('clicked') })
3、事件冒泡
事件冒泡流程:
- DOM树形结构
- 事件会顺着触发元素网上冒泡
原始HTML结构
<body> <div id="div1"> <p id="p1">激活</p> <p id="p2">取消</p> <p id="p3">取消</p> <p id="p4">取消</p> </div> <div id="div2"> <p id="p5">取消</p> <p id="p6">取消</p> </div> </body>
点击`p1`时候进入激活状态,点击其他任何`p`都取消激活状态,执行事件向上冒泡
var p1 = document.getElementById('p1') var body = document.body bindEvent(p1, 'click', function (e) { e.stopPropatation() // 阻止向上继续冒泡的函数 alert('激活') }) bindEvent(body, 'click', function (e) { alert('取消') })
//在`p1` `div1` `body`中都绑定了事件,它是会根据 DOM 的结构,来冒泡从下到上挨个执行的。
//但是我们使用`e.stopPropatation()`就可以阻止冒泡
4、代理
使用代理的优点
- 使代码简洁
- 减少浏览器的内存占用
一个`<div>`中包含了若干个`<a>`,而且还能继续增加。那如何快捷方便的为所有的`<a>`绑定事件?
原始HTML代码:
<div id="div1"> <a href="#">a1</a> <a href="#">a2</a> <a href="#">a3</a> <a href="#">a4</a> </div> <button>点击增加一个 a 标签</button>
这里就会用到事件代理,我们要监听`<a>`的事件,但要把具体的事件绑定到`<div>`上,然后看事件的触发点,是不是`<a>`
var div1 = document.getElementById('div1') div1.addEventListener('click', function (e) { var target = e.target if (e.nodeName === 'A') { alert(target.innerHTML) } })
加上之前写过的通用事件绑定函数,加上事件代理
function bindEvent(elem, type, selector, fn) { if (fn == null) { fn = selector selector = null } elem.addEventListener(type, function (e) { var target if (selector) { target = e.target if (target.matches(selector)) { fn.call(target, e) } } else { fn(e) } }) } // 使用代理 var div1 = document.getElementById('div1') bindEvent(div1, 'click', 'a', function (e) { console.log(this.innerHTML) }) // 不适用代理 var a = document.getElementById('a1') bindEvent(div1, 'click', function (e) { console.log(a.innerHTML) })