鼠标事件
onmousedown 当鼠标按下的时候触发
onmouseup 当鼠标抬起的时候触发
onmouseover 当鼠标移入的时候触发
onmouseout 当鼠标移出的时候触发
onclick 当鼠标点击的时候触发
ondblclick 当鼠标双击的时候触发
onmousemove 当鼠标移动的时候触发
oncontextmenu 当鼠标右键的时候触发
键盘事件
和键盘有关的事件 键盘按键下 上
onkeydown 抬起
onkeyup 按下
ev.keyCode 获取键盘码
onsubmit 表单提交
onchange 修改表单触发
return false 可以阻止表单提交
onfocus 获取焦点事件
onblur 失去焦点事件
窗口事件
onload 当对象加载完成以后执行
window 窗口 最顶层的对象
onresize 窗口改变触发对象
重点：记住兼容性解决方案 var ev = ev || event
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标按下唤起</title>
<style type="text/css">
#box{
width: 300px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
</div>
<script type="text/javascript">
//找到对象
var oBox = document.getElementById('box')
//改背景颜色
oBox.onmousedown = function(){
//更改背景颜色
oBox.style.backgroundColor = 'yellow'
}
oBox.onmouseup = function(){
oBox.style.backgroundColor = 'blue'
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标移入移出</title>
<style type="text/css">
a{
text-decoration: none;
padding: 20px;
}
</style>
</head>
<body>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >刘冬冬</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >张小文</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >张志文</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >金志文</a>
<script type="text/javascript">
var aA = document.getElementsByTagName('a')
//批量绑定事件，遍历aA这个集合
console.log(aA)
for(var i in aA){
aA[i].onmouseover = function(){
console.log(this)
this.style.backgroundColor = 'red'
this.style.color = 'white'
}
aA[i].onmouseout = function(){
console.log(this)
this.style.backgroundColor = 'white'
this.style.color = 'black'
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标移动点击事件</title>
</head>
<body>
<button>点击</button>
<script type="text/javascript">
//通过标签进行找寻
var oBtn = document.getElementsByTagName('button')
console.log(oBtn)
oBtn[0].ondblclick = function(){
alert("被双击啊")
}
//鼠标移动事件 document表示整个HTML文档
document.onmousemove = function(){
console.log("鼠标移动了")
}
//右键
document.oncontextmenu = function(){
alert("右击菜单")
//阻止原生右击菜单
return false
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
</head>
<body>
<script type="text/javascript">
document.onkeydown = function(){
console.log("键盘按下了")
}
document.onkeyup = function(ev){
console.log(ev.keyCode)
if(ev.keyCode === 76){
alert("嘤嘤嘤")
window.open("http://www.baidu.com")
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单事件</title>
</head>
<body>
<form action="https://www.baidu.com/s">
<input type="text" id="ipt" name="wd"/>
<button type="submit">提交</button>
</form>
<script type="text/javascript">
var oForm = document.getElementsByTagName('form')
var oIpt = document.getElementById('ipt')
oForm[0].onsubmit = function(){
var iptvalue = oIpt.value
//验证
if(iptvalue === ""){
alert("用户名必须输入内容")
return false
}
alert(52)
return true
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>焦点事件</title>
</head>
<body>
<form action="https://www.baidu.com/s" id="form">
<input type="text" name="wd" id="ipt" value="请输入要搜索的内容：" />
</form>
<script type="text/javascript">
var oIpt = document.getElementById('ipt')
var oForm = document.getElementById('form')
oIpt.onfocus = function(){
oIpt.value = ""
}
oIpt.onblur = function(){
if(oIpt.value == ""){
oIpt.value = "请输入要搜索的内容："
}
}
oForm.onsubmit = function(){
if(oIpt.value == ""){
alert("你还没有输入搜索内容？")
return false
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>窗口事件</title>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box')
alert(oBox.innerHTML)
}
</script>
</head>
<body>
<div id="box">box1</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>窗口事件</title>
</head>
<body>
<script type="text/javascript">
window.onresize = function(){
console.log(document.documentElement.clientHeight)
console.log(document.documentElement.clientWidth)
}
</script>
</body>
</html>
![JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明 三、函数的调用[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)