本文摘自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中substr和substring的区别是什么
javascript怎么去掉字符
javascript操作dom对象之select(详细解答)
用javascript绘制一个渐变圆圈对角线
如何使用css设计出一个表单页面(附示例)
javascript如何设置select值
值得了解的操作js字符串的4个小技巧
javascript和java区别有什么
javascript怎么将字符串转小写
前端的基础知识巩固
更多相关阅读请进入《onclick》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » Javascript添加事件的三种方式