本文摘自PHP中文网,作者逆旅行人,侵删。
Javascript
添加事件的方式有很多,本文主要列举三种添加事件的方式,包括添加到元素事件属性上、添加到Javascript
脚本中、事件监听器。
1.添加到元素事件属性上
1 2 3 4 5 6 7 8 9 10 11 12 | <!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脚本中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!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.事件监听器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!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添加事件的三种方式的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript最后怎么表示
canvas如何实现二维码和图片合成的代码
js中函数表达式 vs 函数声明,聊聊它们的不同点
js proxy 的优势以及使用场景
data-*与js的交互
javascript怎么更改id
javascript中10个实用小技巧(分享)
html中如何使用javascript
移动端h5页面实现生成图片的代码
javascript如何捕获窗口关闭事件
更多相关阅读请进入《onclick》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » Javascript添加事件的三种方式