<html >
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="b" οnclick="console.log(this)">
<div>
</body>
</html>
输出:div元素本身
<!DOCTYPE HTML>
<html >
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="b" οnclick="console.log(this)">
<div>
<script type="text/javascript">
var c=document.getElementById("b");
c.οnclick=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" οnclick="console.log(this)">
<div>
<script type="text/javascript">
var c=document.getElementById("b");
c.οnclick=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元素本身。