js,jq,事件写法的区别与用处
先上代码
<!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次匿名函数
如果传入的是有名称的函数，函数名相同，则运行一次，不同，则 绑定几次 就运行几次
