js最常用的click事件3種方法

原文鏈接:https://www.cnblogs.com/liaohongwei/p/9717511.html

js最常用的click事件3種方法

轉載自:https://www.cnblogs.com/liaohongwei/p/9717511.html

1. onclick=name()
<!DOCTYPE html>
<html leng="en">
    <head>
        <meta charset="utf-8">
        <title>one</title>
    </head>
    <body>
        <div id="dome"></div>
        <button type="button" onclick="displayDate()">點擊</button>
        <script>
            function displayDate(){
                document.getElementById("dome").innerHTML=Date();
            }
        </script>
    </body>
</html>
2. js中綁定
<!DOCTYPE html>
<html leng="en">
    <head>
        <meta charset="utf-8">
        <title>one</title>
    </head>
    <body>
        <div id="dome"></div>
        <button type="button">點擊</button>
        <script>
            var btn=document.getElementById("btn");
            btn.onclick=function(){
                document.getElementById("dome").innerHTML=Date();
            }
        </script>
    </body>
</html>
3. 事件柄方法

//addEventListener 用於向指定元素添加事件句柄
//可以向一個元素添加多次點擊事件,後一個點擊事件不會覆蓋前一個點擊事件

<!DOCTYPE html>
<html leng="en">
    <head>
        <meta charset="utf-8">
        <title>one</title>
    </head>
    <body>
        <div id="dome"></div>
        <button type="button">點擊</button>
        <script>
            var btn=document.getElementById("btn");
            btn.addEventListener('click',function(){
                document.getElementById("dome").innerHTML=Date();
            },false)
        </script>
    </body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章