js中三種事件繫結之間的關係和事件處理函式裡的this值
<html >
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="b" onclick="console.log(this)">
<div>
</body>
</html>
輸出：div元素本身
<!DOCTYPE HTML>
<html >
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="b" onclick="console.log(this)">
<div>
<script type="text/javascript">
var c=document.getElementById("b");
c.onclick=function(){console.log(1)}
</script>
</body>
</html>
輸出：1
onclick的繫結方式會覆蓋內聯式的事件繫結。也可以在c.onclick裡輸出this，可知道this代表div元素本身。
<!DOCTYPE HTML>
<html >
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="b" onclick="console.log(this)">
<div>
<script type="text/javascript">
var c=document.getElementById("b");
c.onclick=function(){console.log(1)}
c.addEventListener("click",function(){alert('2')},false)
</script>
</body>
</html>
輸出：1,彈出2
addEventListener不會覆蓋c.onclick繫結的函式，（自然也不會覆蓋內聯的onclick，addEventListener就是以疊加的方式繫結事件處理函式的，就像用addEventListener也可以繫結幾個事件處理函式一樣）也可以在addEventListener的事件處理函式裡輸出this，可知道this代表div元素本身。