<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件基础</title>
</head>
<body>
<!-- <div>抽奖小程序</div> -->
<!-- 用按钮替换div -->
<button id = 'btn'>抽奖小程序</button>
<script>
//执行事件步骤
//实现目标功能:点击div 控制台输出’我被选中了‘
//1.获得事件源
var btn = document.getElementById('btn');
//用 div标签的话就不用给id也不用getElementById()
//用div的话直接用document.querySelector()获得事件源就行
//2.绑定(注册事件)事件
//div.onclick
//3.添加事件处理程序
btn.onclick = function(){
console.log('我被选中了!!!');
}
</script>
</body>
</html>
<!-- 执行事件的步骤
1.获取事件源
2.注册(绑定)事件
3.添加事件处理程序(采取函数赋值形式)
常见鼠标事件
onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标点焦点触发
onblur 失去鼠标点焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发 -->
webapis_06_事件基础
最新推荐文章于 2024-07-26 11:41:15 发布