事件:鼠标键盘的简单事件

 <div id="box"></div>
    <form action="#" id="form">
        <input type="text" id="input">
        <button>提交</button>
        <textarea name="" id="textarea" cols="30" rows="10"></textarea>
    </form>
<script>
//js事件是指用户用鼠标或者键盘做了某些事情来出发对应的函数
//事件由三部分组成:
//触发事件元素
//对应的事件
//处理事件的函数
//事件函数的特点:以on开头,全部小写


//事件的分类    鼠标事件    键盘事件    html事件
//鼠标事件  鼠标的一切操作都是鼠标事件
//点击  双击    移入    滚轮
var box = document.getElementById('box')
//点击相关  点击和双击
//鼠标事件
box.onclick=function(){//点击
console.log('点击');
}
box.ondblclick=function(){//双击
    console.log('双击');
}
box.onmousedown=function(){//鼠标按下
    console.log('按下');
}
box.onmouseup=function(){//鼠标弹起
    console.log('弹起');
}
box.onmouseover=function(){//鼠标移入
    console.log('鼠标移入');
}
box.onmouseout=function(){//鼠标移出
    console.log('鼠标移出');
}
box.onmousemove=function(){//鼠标移动
    console.log('鼠标移动');
}
box.onmouseleave=function(){//鼠标取消悬停
    console.log('鼠标移出');
}
box.onmouseenter=function(){//鼠标悬停
    console.log('鼠标悬停');
}
// mouseover和 mouseenter的区别是: 
// mouseover: 元素的子元素移入也会触发事件(子元素会触发第二次)
// mouseenter : 元素的子元素移入不会触发事件(子元素不会触发第二遍)
//键盘事件
window.onkeydown=function(){//键盘按下
    console.log('键盘按下');
}
window.onkeyup=function(){//键盘弹起
    console.log('键盘抬起');
}
window.onkeypress=function(){//键盘按下之后,抬起之前
    console.log('键盘按下之后,抬起之前');
}
//html事件
//页面加载事件  默认触发    执行一次
window.onlode=function(){
    console.log('页面加载了');
}
//onsubmit  提交按钮出发的事件  一般触发的元素是表单form
document.getElementById('form').onsubmit=function(){
console.log('点击了');
}
//失去焦点onbiur  获取焦点onfous
document.getElementById('input').onfocus=function(){
    console.log('获取焦点');
}
document.getElementById('input').onblur=function(){
    console.log('失去焦点');
}
//修改  onchange    当里面的value值发生变化以后触发,一般加给表单元素,失去焦点时触发
var input = document.getElementById('input')
input.onchange=function(){
    console.log('修改事件');
}
//onscroll  滚动栏滚动
window.onscroll=function(){
    var scroll=document.documentElement.scrollTop||document.body.scrollTop
    console.log(scroll);
}
//选择  onselect   一般用于input和textarea
var textarea=getElementById('textarea')
    textarea.onselect=function(){
        console.log('选择了');
}
//unlode    卸载,页面被卸载的时候/组件被卸载
window.unlode=function(){
    console.log('页面卸载了');
}
//reset 重置的时候  加给form表单的
</script>