<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--普通事件中的onclick事件只支持单个事件,会被其他onclick事件覆盖,(重点!!!)
有两种写法:
一是在标签内写onclick事件
二是在JS里面写onlicke=function(){}
事件监听中的addEventListener可以添加多个事件而不用担心被覆盖
只有一种写法:监听方法
-->
<!--第一种写法 不执行-->
<input id="myButton" type="button" value="点我" onclick="alert('普通事件1');">
<script type="text/javascript">
document.getElementById("myButton").onclick=function () {
alert('普通事件2'); //第二种写法 会将上面的alert('普通事件1')覆盖
}
//事件监听添加两个事件. 监听可以对同一件事情添加多个监听的事件
document.getElementById("myButton").addEventListener('click', a);
document.getElementById("myButton").addEventListener('click', b); //不能用onclick
function a() {
alert('事件监听1'); //执行
}
function b() {
alert('事件监听2');//执行
}
</script>
</body>
</html>
这里顺便提一下addEventListener这个函数
函数原型:addEventListener(event, function, useCapture),重点是第三个参数,这个参数设置了事件的传递类型,默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。
如下图:
再举一个栗子:
document.addEventListener('click',functiona(){ },false) ;
document.addEventListener('click',functionb(){ },false) ;
<div onclick="functionb">
<div onclick = "functiona">
点击先触发哪个事件?
</div>
</div>
点击文本两个div事件同时响应,此时先后顺序是:
如果为false 则阻止捕获,先响应functiona,在响应functionb,否则,响应顺序相反。