上一篇文章刚写了关于HTML中的onclick事件,就有小伙件私信问我click方法与onclick事件有什么区别,这篇文章就重点说一说。

原生click()和onclick()的区别,click()方法,onclick事件属性,html 事件

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事件。