js,jq,事件写法的区别与用处

浏览数：31 / 时间：2015年06月09日

先上代码

<!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次匿名函数

如果传入的是有名称的函数，函数名相同，则运行一次，不同，则绑定几次就运行几次

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js,jq,事件写法的区别与用处