首页 > 代码库 > js,jq,事件写法的区别与用处
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次匿名函数
如果传入的是有名称的函数，函数名相同，则运行一次，不同，则 绑定几次 就运行几次
js,jq,事件写法的区别与用处
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。