上一篇文章刚写了关于HTML中的onclick事件,就有小伙件私信问我click方法与onclick事件有什么区别,这篇文章就重点说一说。
click()方法
原生JavaScript的click在w3c里边的阐述是DOM button对象,也是html DOM click() 方法,可模拟在按钮上的一次鼠标单击。
举例如下:
<html> <head> <script type="text/javascript"> function clickButton() { document.getElementById('mochu').click(); } function alertMsg() { alert("免费资源网") } </script> </head> <body onload="clickButton()"> <input type="button" id="mochu" onclick="alertMsg()" value="点我" /> </body> </html>
代码解释:
1、onload="clickButton()" 会在页面加载时,执行JS中的 clickButton() 函数,并模拟一次元素 button 被点击一次
2、button 被模拟点击后,会触发 alertMsg() 函数并弹出信息
onclick 事件
onclick是一个事件,Event对象
HTML DOM Event 对象,代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用,函数不会在事件发生前被执行!
实例代码:
<html> <head> <script type="text/javascript"> function alertMsg() { alert("免费资源网") } </script> </head> <body> <input type="button" onclick="alertMsg()" value="点我" /> </body> </html>
代码解释:
1、按钮元素被点击后,会触发 onclick()属性事件
2、onclick属性事件会调用JS函数 alertMsg(),并执行弹出信息
3、可参考《html中onclick事件属性定义与用法》文章了解onclick事件属性
click()与onclick事件的区别
1、onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么。
2、click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触发onclick事件
3、click可以理解为一次简单的触发,只执行一次,找不到以后就不再执行;
4、onclick则是给这个id注册一种行为,可以重复触发
5、click 是方法;onclick是事件;执行click就是模拟鼠标点击,同时会触发onclick事件。