Javascript添加事件的三种方式

2022-12-02 22:58:01 来源：用户：

跟大家讲解下有关Javascript添加事件的三种方式，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说Javascript添加事件的三种方式，小编也收集到了有关Javascript添加事件的三种方式的相关资料，希望大家看到了会喜欢。

Javascript添加事件的方式有很多，本文主要列举三种添加事件的方式，包括添加到元素事件属性上、添加到Javascript脚本中、事件监听器。

1.添加到元素事件属性上

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>php.cn</title> </head> <body> <button onclick="alert('我被调用了')">按钮1</button> </body> </html>

2.添加到JS脚本中

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>php.cn</title> </head> <body> <button onclick="">按钮2</button> <script> const btn2=document.querySelector("button"); btn2.onclick=function(){ alert("你好"); } </script> </body> </html>

3.事件监听器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>php.cn</title> </head> <body> <button onclick="">按钮3</button> <script> const btn3=document.querySelector("button"); btn3.addEventListener("click",function(){ alert("被调用了"); }); </script> </body> </html>

推荐：《2021年js面试题及答案（大汇总）》

以上就是Javascript添加事件的三种方式的详细内容，更多请关注php中文网其它相关文章！

来源：php中文网

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。如有侵权请联系删除！