前端基础之事件

事件

知识点

通用事件监听

function bindEvent(elem, type, fn) {
ele.addEventListener(type, fn)
}

var a = document.getElementById('link1')
bindEvent(a, 'click', function(e) {
e.preventDefault()  //阻止默认行为
alert('clicked')
})

事件冒泡

stopPropatation()

代理

<div>
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
</div>

var div1 = document.getElementById('div1')
div1.addEventListener('click', function (e) {
var target = e.targrt
if (target.nodeName === 'A') {
alert(target.innerHTML)
}
})

题目

<div id="div1">
<a id="a1" href="https://www.baidu.com">baidu</a>
<a href="https://www.imooc.com/">imooc</a>
<p id="p1">激活</p>
<p id="p2">取消</p>
</div>
<div id="div2">
<p id="p3">激活</p>
<p id="p4">取消</p>
</div>

<script type="text/javascript">
function bindEvent(elem, type, selector, fn) {
if (fn == null) {
fn = selector
selector = null
}
elem.addEventListener(type, function (e) {
if (selector) {
var 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) {
e.preventDefault()
console.log(this)
})
var p1 = document.getElementById('p1')
bindEvent(p1, 'click', function(e) {
console.log(e.target)
})