Javascript中点击(click)事件的三种写法举例

禹翔 · 发表于 2024-6-11 09:11:09

方法一：

<!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);
}

复制代码

总结

到此这篇关于Javascript中点击(click)事件的三种写法的文章就介绍到这了,更多相关js点击(click)事件写法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/3224101nw.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！