×

Javascript 应用:介绍下点击(click)事件的三种写法

作者:Terry2024.06.24来源:Web前端之家浏览:380评论:0
关键词:jsJavascript

分享一个Javascript 应用:介绍下点击(click)事件的三种写法。

方法一

<!DOCTYPE html>
<html>

<head>
    <title>Javascript中点击事件方法一</title>
</head>

<body> <button id="btn">click</button>
    <script type="text/javascript">
        var btn = document.getElementById("btn");
        btn.οnclick = function() {
            alert("hello world");
        }
    </script>
</body>

</html>

消除事件:btn.οnclick=null;

方法二:

<!DOCTYPE html>
<html>

<head>
    <title>Javascript中点击事件方法二</title>
</head>

<body> <button id="btn">click</button>
    <script type="text/javascript">
        var btn = document.getElementById("btn");
        btn.addEventListener('click', function() {
            alert("hello wrold");
        }, false)
    </script>
</body>

</html>

方法三:

<!DOCTYPE html>
<html>

<head>
    <title>Javascript中点击事件方法三</title>
    <script type="text/javascript">
        function test() {
            alert("hello world");
        }
    </script>
</head>

<body> <button id="btn" οnclick="test()">click</button></body>

</html>

附:js连续指定两次或者多次的click事件(解决办法)

setTimeout (表达式,延时时间)

setTimeout(表达式,交互时间)

延时时间/交互时间是以豪秒为单位的(1000ms=1s)

setTimeout  在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次

setTimeout 在执行时,它从载入后,每隔指定的时间就执行一次表达式

if(ischoose == false){ 
    ischoose = true; document.getElementById("myBaby").click(); 
} else { 
    document.getElementById("myBaby").click();//奇数次单击和偶数次单击不同的效果! 
    setTimeout(function(){document.getElementById("myBaby").click();},50); 
}

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/jsdianjisdfu8234.html

网友评论文明上网理性发言 已有0人参与

发表评论: