事件（鼠标、键盘、表单）

鼠标事件：

redDiv.onclick = function(){

console.log("click点击事件");

}

out和over会在鼠标从父级移入子级元素的时候触发

enter和leave会在鼠标移入或移出父子级整体的时候才会触发

redDiv.onmouseout = function(){

console.log("out鼠标移出");

}

redDiv.onmouseover = function(){

console.log("over鼠标移入");

}

redDiv.onmouseenter = function(){

console.log("enter鼠标移入");

}

redDiv.onmouseleave = function(){

console.log("leave鼠标移出");

}

redDiv.onmousedown = function(){

console.log("down鼠标按下");

}

redDiv.onmouseup = function(){

console.log("up鼠标抬起");

}

redDiv.ondblclick = function(){

console.log("dblclick鼠标双击");

}

redDiv.oncontextmenu = function(){

console.log("contextmenu鼠标右击");

}

redDiv.onmousemove = function(){

console.log("move鼠标移动");

}

 键盘事件

// 一般是加给document（整个文档），对于加给单个元素无效,但是我们可以加给输入框或文本域，前提是在输入框或文本域上聚焦之后才行

上面的意思是，只有能够聚焦的元素才会有触发键盘事件的功能

document.onkeydown = function(){

console.log("keydown键盘按下");

}

document.onkeyup = function(){

console.log("keyup键盘抬起");

}

document.onkeypress = function(){

console.log("keypress键盘按下");

}

uName.onkeydown = function(){

console.log("keydown键盘按下");

}

 表单事件

var first = document.getElementById("first");

uName.onchange = function(){

console.log("change内容发生了改变");

}

uName.onblur = function(){

console.log("blur失去了焦点");

}

uName.onfocus = function(){

console.log("focus获取焦点");

}

// 输入框输入内容的时候会触发。即时

uName.oninput = function(){

console.log("输入内容");

}

// 这里点击的是提交按钮，但是事件是加给form表单的

first.onsubmit = function(){

console.log("用户提交了表单");

// 一些事件中，系统会有默认的事件触发，例如右键的时候会弹出来菜单，例如按下提交按钮，会跳转网页（刷新），这些都是默认事件

// 默认事件是可以被阻止掉的，例如

return false;

}

first.onreset = function(){

console.log("表单被重置了");

// return false;

}

document.onfocus = function(){

console.log("document获取焦点");

}