事件基础
事件三要素
-
-
事件类型(什么事件): 例如 click 点击事件
-
事件处理程序(做啥):事件触发后要执行的代码(函数形式),事件处理函数
1234567891011121314<body>
<button id=
"btn"
>唐伯虎</button>
<script>
// 点击一个按钮,弹出对话框
// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1) 事件源 事件被触发的对象 谁 按钮
var
btn = document.getElementById(
'btn'
);
//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序 通过一个匿名函数赋值的方式 完成
btn.onclick =
function
() {
alert(
'点秋香'
);
}
</script>
</body>
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采用函数赋值的形式)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <body> <div>123</div> <script> // 执行事件步骤 // 点击div 控制台输出 我被选中了 // 1. 获取事件源 var div = document.querySelector( 'div' ); // 2.绑定事件 注册事件 // div.onclick // 3.添加事件处理程序 div.onclick = function () { console.log( '我被选中了' ); } </script> </body> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律