事件类型

鼠标

移入

box.onmouseenter = function(){
    console.log("移入了");
 }

box.onmouseover = function(){

 console.log("移入了");

 }

注意：两者区别在于后者里面嵌套了一个div有个小盒子的话，会进行事件流，冒泡阶段，会在输出一遍大
div中的程序！！！

移出

box.onmouseleave = function(){
     console.log("移出了");
 }

box.onmouseout = function(){

 console.log("移出了");

 }

与上文相同。

注意 ：mouseover和mouseout 是一对

            mouseenter和mouseleave 是一对

鼠标右击 - contextmenu

box.oncontextmenu = function(){
     console.log("右击");
 }

 

鼠标按下- mousedown

box.onmousedown = function(){
     console.log("按下了");
 }

鼠标抬起

box.onmouseup = function(){
     console.log("抬起了");
 }

鼠标移动事件

box.onmousemove = function(){
     console.log("移动了鼠标");
 }

滚轮事件

window.onmousewheel = function(){
    console.log("滚动了滚轮");
 }

键盘

敲击键盘

window.onkeypress = function(){
     console.log("敲击了键盘");
 }

表单

input - 只要文本框中的内容发生了改变就会执行的

var keywords = document.querySelector("[name='keywords']");
 keywords.oninput = function(){
     console.log(this.value);
     this.nextElementSibling.innerText = this.value;
 }