JS事件就是我们的⾏为能被侦测到,且触发相对应的函数(函数⾥⾯
写我们要做的事情)
常⻅的事件有
onclick ⿏标点击事件
onmouseover ⿏标被移到某元素之上
onmouseout ⿏标从某元素上⾯移开
onchange 元素值改变,⼀般⽤在表单元素上
onkeydown ⽤户按下键盘按键
onfocus 元素获得焦点
onblur 元素失去焦点
window.onload ⻚⾯加载完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示何为JS事件及演示常⻅的事件</title>
<style>
#demo4{
width: 200px;
height: 200px;
margin: 0 auto;
background: red;
text-align: center;
line-height: 200px;
}
</style>
<script>
//window.onload ⻚⾯加载完成
window.onload=function(){
document.getElementById('demo4').style.background = 'purple'
}
</script>
</head>
<body>
<div id="demo4">点我有惊喜</div>
<input type="text" name="" id="inp" placeholder="请输入">
<script>
//onclick ⿏标点击事件
document.getElementById('demo4').onclick=function(){
alert('surprised--惊喜的')
}
//onmouseover ⿏标移入事件
document.getElementById('demo4').onmouseover=function(){
console.log('鼠标移入元素范围')
}
//onmouseout 鼠标移出事件
document.getElementById('demo4').onmouseout=function(){
console.log('鼠标移出元素范围')
}
//onchange 元素值改变,⼀般⽤在表单元素上
document.getElementById('inp').onchange=function(){
console.log(document.getElementById('inp').value)
}
//onkeydown ⽤户按下键盘按键
document.getElementById('inp').onkeydown=function(){
console.log('键盘按下了')
}
//onfocus 元素获得焦点
document.getElementById('inp').onfocus=function(){
console.log('我获取到焦点了')
}
//onblur 元素失去焦点
document.getElementById('inp').onblur=function(){
console.log('我失去焦点了')
}
</script>
</body>
</html>
效果图: