JavaScript_事件入门
js事件
鼠标事件（Mouse Events）
- 1 onclick 点击事件
onclick 属性在单击鼠标时触发。
document.onclick = function(){
console.log('单击了');
}
不能应用于以下元素：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或<title>。
- 2 ondblclick 双击事件
ondblclick 属性在元素上双击鼠标时触发。
document.ondblclick = function(){
console.log('双击了');
}
不能使用于以下元素： <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或<title>。
- 3 onmouseover 鼠标移动到HTML元素上方的事件
onmouseover 属性在鼠标指针移至元素之上时触发。
box.onmouseover = function(){ //对应的子元素也触发
console.log('over移进');
}
不能使用于以下元素：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或<title>。
- 4 onmouseout 鼠标移出HTML元素上方的事件
onmouseout 属性在鼠标指针移除元素时触发。
box.onmouseout = function(){ //对应的子元素也可以触发
console.log('out移出');
}
不能使用于以下元素：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或<title>。
- 5 onmouseenter 鼠标移动到HTML元素上方的事件
onmouseenter 事件在鼠标指针移动到元素上时触发。
box.onmouseenter = function(){ //只有自己能触发
console.log('enter移进');
}
**提示**： 该事件通常与 onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发。
**提示**： onmouseenter 事件类似于 onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡 。
不能使用于以下元素：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或<title>。
- 6 onmouseleave 鼠标移出HTML元素上方的事件
onmouseleave 事件在鼠标移出元素时触发。。
box.onmouseleave = function(){ //只有自己能触发
console.log('leave移出');
}
**提示**： 该事件通常与 onmouseenter 事件一起使用， 该事件在鼠标移动到元素上时触发。
**提示**: onmouseleave 事件类似于 onmouseout 事件。 唯一的区别是 onmouseleave 事件不支持冒泡 。
不能使用于以下元素：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或<title>。
- 7 onmousedown 鼠标按下的时候触发的事件
onmousedown 属性在按下鼠标按钮时触发。
box.onmousedown = function(){
console.log('按下');
}
**注意**
与 onmousedown 事件相关的事件触发顺序 (左/中鼠标按钮):
1. onmousedown
2. onmouseup
3. onclick
与 onmousedown 事件相关的事件触发顺序(右边鼠标按钮):
1. onmousedown
2. onmouseup
3. oncontextmenu
不能使用于以下元素：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或<title>。
- 8 onmouseup 鼠标弹起触发的事件（onmousedown，onmouseup和onclick区别，onclick是鼠标完成点击事件的时候触发的事件）
onmouseup 属性在用户松开鼠标按键时触发
box.onmouseup = function(){
console.log('弹起');
}
**注意**
与 onmousedown 事件相关的事件触发顺序 (左/中鼠标按钮):
1. onmousedown
2. onmouseup
3. onclick
与 onmousedown 事件相关的事件触发顺序(右边鼠标按钮):
1. onmousedown
2. onmouseup
3. oncontextmenu
不能使用于以下元素：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或<title>。
- 9 oncontextmenu 鼠标右键点击
oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。
//不会触发点击事件
box.oncontextmenu = function(){
console.log('右键点击');
}
- 10 onmousemove 鼠标移动
onmousemove 属性在鼠标指针移动到元素时触发。
box.onmousemove = function(){
console.log('鼠标移动');
}
键盘事件（Keyboard Events）
- 1 onkeydown 键盘按键被按下发生的事件
onkeydown 属性在用户按下按键(在键盘上)时触发。
window.onkeydown = function(){
console.log('键盘按下');
}
- 2 onkeyup 键盘按键被松开发生的事件
onkeyup 事件会在键盘按键被松开时发生
window.onkeyup = function(){
console.log('键盘弹起');
}
- 3 onkeypress 键盘按键按下并松开发生的事件
onkeypress 事件会在键盘按键被按下并释放一个键时发生。
window.onkeypress = function(){
console.log('字符键按下');
}
**提示**：onkeydown onkeyup onkeypress 事件相关的事件发生次序：
1. onkeydown
2. onkeypress
3. onkeyup
注意： onkeydown onkeyup onkeypress 属性不能用于以下元素: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或 <title>。
窗口事件属性（Window Event Attributes）
- 1 onload 用户进入某个页面的时候触发（onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。）
onload 属性在文档对象加载完成后触发。
onload 通常使用于 <body> 元素中，用于在页面完全载入后执行指定的脚本(包括图片，脚本，css文件等)。
window.onload = function(){ //窗口的加载 图片的加载 等等
console.log('窗口加载');
}
- 2 onunload 用户离开某个页面的时候触发（onload 和 onunload 事件可用于处理 cookie。）
onunload 属性在用户关闭一个页面时触发。
window.onunload = function(){ //清除对应的内存 销毁
console.log('窗口卸载');
}
onunload 在用户离开页面(通过点击链接，提交表单，关闭浏览器窗口等)触发。
注意： 如果你重新载入页面，unload 事件将被触发( onload 事件)。
- 3 onresize 窗口或者框架被重新调整大小
onresize 属性在调整窗口大小时触发。
onresize 属性常用于调整窗口大小。
window.onresize = function(){
console.log('窗口大小已改变'); //浏览器窗口改变即打印
}
表单事件(Form Events)
- 1 onchange 内容变化事件（常结合对输入字段的验证来使用）
onchange 事件会在域的内容改变时发生。
var input = document.querySelector('input')
input.onchange = function(){ //必须要失去焦点
console.log('value值变化了');
}
onchange 事件也可用于单选框与复选框改变后触发的事件。
- 2 onfocus 元素获取焦点事件
onfocus 事件在对象获得焦点时发生。
onfocus 通常用于 <input>, <select>, 和<a>
onfocus 事件的相反事件为 onblur 事件。
input.onfocus = function(){
console.log('获取焦点');
}
- 3 onblur 元素失去焦点事件
onblur 事件会在对象失去焦点时发生。
onblur 经常用于Javascript验证代码，一般用于表单输入框。
onblur 相反事件为 onfocus 事件 。
input.onblur = function(){
console.log('失去焦点');
}
- 4 onselect 文本被选中
onselect 属性在选取元素文本后触发。
input.onselect = function(){ //禁止复制粘贴
console.log('当前内容被选择');
}
onselect 属性可使用于以下元素: <input type="file">, <input type="password">, <input type="text">, <keygen>, 和 <textarea>。
- 5 onreset 重置按钮被点击
onreset 事件在表单被重置后触发。
document.querySelector('form').onreset = function(){
console.log('表单重置');
}
- 6 onsubmit 提交按钮被点击
onsubmit 属性在表单提交时触发。
document.querySelector('form').onsubmit = function(){
console.log('表单提交');
}
onsubmit 属性只适用于 <form> 元素。
- 7 oninput 在input框内输入时
oninput 事件在用户输入时触发。
该事件在 <input> 或 <textarea> 元素的值发生改变时触发。
document.querySelector('input').oninput = function(){
console.log('内容输入'); //内容框输入时打印
}
提示： 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。