先上代码
<!DOCTYPE html>
<html>
<head lang = "en">
<meta charset = "UTF-8">
<title></title>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="aaa" style="width: 500px;height:200px;border: 1px dashed red"></div>
<script>
function test(event){console.log(event.clientX);};
function test1(){console.log(this);};
var aaa = document.getElementById("aaa");
$(‘#aaa‘).click(function(event){console.log(event.clientX);})
$(‘#aaa‘).click(function(event){console.log(event.clientX);})
aaa.onclick=function(event){console.log(event.clientX);};
aaa.onclick=function(event){console.log(event.clientX);};
aaa.addEventListener(‘click‘,test);
aaa.addEventListener(‘click‘,function(){console.log(this);});
</script>
</body>
</html>
亲 你能答对 当点击一次DIV 控制台打印多少行东西吗？
上结果
testEvent.html:15 295
testEvent.html:16 295
testEvent.html:18 295
testEvent.html:12 295
testEvent.html:20 <div id=?"aaa" style=?"width:? 500px;?height:?200px;?border:? 1px dashed red">?</div>?
结论： ele.onclick=function(){}这种写法，无论 重复多少行，视为重复声明对象，事件只运行一次
addEventListener这种写法，如果传入的函数是匿名，那么绑定几次就运行几次事件，例如 连续绑定2次 匿名函数，那么点击一次 就会调用2次匿名函数
如果传入的是有名称的函数，函数名相同，则运行一次，不同，则 绑定几次 就运行几次
时间： 2024-08-09 23:19:54