上一篇文章剛寫了關于HTML中的onclick事件,就有小伙件私信問我click方法與onclick事件有什么區別,這篇文章就重點說一說。

原生click()和onclick()的區別,click()方法,onclick事件屬性,html 事件

click()方法

国产视频app原生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>

代碼解釋:

国产视频app1、onload="clickButton()" 會在頁面加載時,執行JS中的 clickButton() 函數,并模擬一次元素 button 被點擊一次

2、button 被模擬點擊后,會觸發 alertMsg() 函數并彈出信息

onclick 事件

onclick是一個事件,Event對象 

国产视频appHTML 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是綁定事件,告訴瀏覽器在鼠標點擊時候要做什么。

国产视频app2、click本身是方法作用是觸發onclick事件,只要執行了元素的click()方法,就會觸發onclick事件

3、click可以理解為一次簡單的觸發,只執行一次,找不到以后就不再執行;

4、onclick則是給這個id注冊一種行為,可以重復觸發

国产视频app5、click 是方法;onclick是事件;執行click就是模擬鼠標點擊,同時會觸發onclick事件。