点击事件的绑定JS
2021-03-28 本文已影响0人
肥羊猪
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn1">按钮</button>
</body>
<script type="text/javascript">
///直接在DOM里绑定事件(不推荐)
//1.这种写法是DOM0级规范的写法；2.是所有的浏览器支持的；3.这种写法不能同时绑定多个事件、使代码耦合在了一起。
<button onclick="clickHandler(event)">按钮</button>
function clickHandler(event) {
console.log('事件属性', event)
}
//dom0级事件处理 onclick 方法 脚本里面绑定
document.getElementById("btn1").onclick = clickHandler
//事件监听绑定 click 事件 addEventListener
//1.是DOM2标准中定义的方法；2.可支持同时绑定多个事件；3.它可以控制是在事件捕获阶段或者是在冒泡阶段调用事件处理程序。
//4.DOM2标准中定义的，只有支持DOM2级事件处理程序的浏览器才支持这个方法（IE9,Firefox,Safari,Chrome和Opera支持）
//第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序。true代表捕获阶段处理， false代表冒泡阶段处理,不写第三个参数默认false
document.getElementById("btn1").addEventListener("click", clickHandler, false)
//直接定义函数与内容
document.getElementById('btn1').onclick = function () {
alert('直接定义函数与内容')
}
</script>
</html>
事件捕获：事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。
事件冒泡：事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。
用 “addeventlistener” 可以绑定多次同一个事件，且都会执行，而在DOM结构如果绑定两个 “onclick” 事件，只会执行第一个；在脚本通过匿名函数的方式绑定的只会执行最后一个事件。
<div id="btn" onclick="clickone()" onclick="clicktwo()"></div>
<script>
function clickone(){ alert("hello"); } //执行这个
function clicktwo(){ alert("world!"); }
</script>
<div id="btn"></div>
<script>
document.getElementById("btn").onclick = function（）{ alert("hello"); }
document.getElementById("btn").onclick = function（）{ alert("world"); } //执行这个
</script>
<div id="btn"></div>
<script>
document.getElementById("btn").addeventlistener("click",clickone,false);
function clickone(){ alert("hello"); } //先执行
document.getElementById("btn").addeventlistener("click",clicktwo,false);
function clicktwo(){ alert("world"); } //后执行
</script>
