1. 鼠标事件

鼠标事件指与鼠标相关的事件。

1.1 鼠标事件的类型

click：按下鼠标时触发。
dblclick：在同一个元素上双击鼠标时触发。
mousedown：按下鼠标键时触发。
mouseup：释放按下的鼠标键时触发。
mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次。
mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件。
mouseover：鼠标进入一个节点时触发，进入子节点也会触发这个事件。
mouseout：鼠标离开一个节点时触发，离开子节点也会触发这个事件。
mouseleave：鼠标离开一个节点时触发，离开子节点不会触发这个事件。
wheel：滚动鼠标的滚轮时触发。

<!DOCTYPE html>
<html lang="en">
<head><style>#mousemoveDiv,#mouseenterDiv,#mouseoverDiv{height: 200px;width: 200px;text-align: center;line-height: 200px;background-color: aquamarine;margin-top: 5px;overflow: hidden;}.sonDiv{height: 100px;width: 100px;background-color: bisque;margin: 50px auto;line-height: 100px;}#blank{height: 500px;width: 500px;background-color: cadetblue;}</style>
</head>
<body><button id="clickButton">click</button><button id="dbclickButton">dbclick</button><button id="mousedownButton">mousedown</button><button id="mouseupButton">mouseup</button><div id="mousemoveDiv">mousemove</div><div id="mouseenterDiv"><div class="sonDiv">mouseenter</div></div><div id="mouseoverDiv"><div class="sonDiv">mouseover</div></div><div id="blank"></div><script>var myClick = document.getElementById("clickButton");var myDbclick = document.getElementById("dbclickButton");var myMousedown = document.getElementById("mousedownButton");var myMouseup = document.getElementById("mouseupButton");var myMousemove = document.getElementById("mousemoveDiv");var myMouseenter = document.getElementById("mouseenterDiv");var myMouseover = document.getElementById("mouseoverDiv");var myWheel = document.body.onwheel = function(){console.log("wheel");};myClick.onclick = function(){console.log("click");};myDbclick.ondblclick = function(){console.log("dbclick");};myMousedown.onmousedown = function(){console.log("mousedown");};myMouseup.onmouseup = function(){console.log("mouseup");};myMousemove.onmousemove = function(){console.log("mousemove");};myMouseenter.onmouseenter = function(){console.log("mouseenter");};myMouseenter.onmouseleave = function(){console.log("mouseleave");};myMouseover.onmouseover = function(){console.log("mouseover");};myMouseover.onmouseout = function(){console.log("mouseout");};</script>
</body>
</html>

1.2 鼠标事件的注意事项

click事件指的是，用户在同一个位置先完成mousedown动作，再完成mouseup动作。因此，触发顺序是，mousedown首先触发，mouseup接着触发，click最后触发。

dblclick事件则会在mousedown、mouseup、click之后触发。

<body><button id="Button">click</button><script>var myClick = document.getElementById("Button");myClick.onclick = function(){console.log("click");};myClick.ondblclick = function(){console.log("dbclick");};myClick.onmousedown = function(){console.log("mousedown");};myClick.onmouseup = function(){console.log("mouseup");};</script>
</body>

mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。

2. 键盘事件

键盘事件由用户击打键盘触发。

2.1 键盘事件的类型

keydown：按下键盘时触发。

keypress：按下有值的键时触发，如SHIFT这样无值的键就不会触发。

keyup：松开键盘时触发该事件。

<body><input type="text" id="keydown"><input type="text" id="keypress"><input type="text" id="keyup"><script>var myKeydown = document.getElementById("keydown");var myKeypress = document.getElementById("keypress");var myKeyup = document.getElementById("keyup");myKeydown.onkeydown = function(){console.log("keydown");};myKeypress.onkeypress = function(){console.log("keypress");};myKeyup.onkeyup = function(){console.log("keyup");};</script>
</body>

2.2 键盘事件的注意事项

按下有值的键时，先触发keydown事件，再触发keypress事件。

<body><input type="text" id="key"><script>var myKey = document.getElementById("key");myKey.onkeydown = function(){console.log("keydown");};myKey.onkeypress = function(){console.log("keypress");};</script>
</body>

2.3 相关的Event对象

keyCode：键盘的每个键的唯一标识。如enter键的keyCode为13。

<body><input type="text" id="key"><script>var myKey = document.getElementById("key");myKey.onkeydown = function(e){if (e.keyCode === 13) {console.log("回车");}};</script>
</body>

3. 表单事件

表单事件是在使用表单元素及输入框元素可以监听的一系列事件。

3.1 表单事件的类型

input：input事件当<input><select><textarea>的值发生变化时触发。对于复选框或单选框，用户改变选项时，也会触发这个事件。另外，对于打开contenteditable属性的元素，只要值发生变化，也会触发input事件。

select：select事件当在<input><textarea>里面选中文本时触发。

change：change事件当<input><select><textarea>的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发。常见情况：失去焦点或者点击回车。

reset：发生在表单对象<form>上，而不是发生在表单的成员上。reset事件当表单重置（所有表单成员变回默认值）时触发。

submit：发生在表单对象<form>上，而不是发生在表单的成员上。submit事件当表单数据向服务器提交时触发。

<body><form id="myForm"><input type="text" id="myInput"><input type="radio" id="myRadio"><input type="checkbox" id="myCheckbox"><select id="mySelect"><option value="male">male</option><option value="female">female</option></select><textarea id="myTextarea" cols="30" rows="10"></textarea><button id="myReset">reset</button><button>submit</button></form><script>var myInput = document.getElementById("myInput");var myRadio = document.getElementById("myRadio");var myCheckbox = document.getElementById("myCheckbox");var mySelect = document.getElementById("mySelect");var myTextarea = document.getElementById("myTextarea");var myReset = document.getElementById("myReset");var myForm = document.getElementById("myForm");myInput.oninput = function(){console.log("text_input");};myInput.onselect = function(){console.log("text_select");};myInput.onchange = function(){console.log("text_change");};myRadio.oninput = function(){console.log("radio_input");};myCheckbox.oninput = function(){console.log("checkbox_input");};mySelect.oninput = function(){console.log("select_input");};mySelect.onchange = function(){console.log("select_change");};myTextarea.oninput = function(){console.log("textarea_input");};myTextarea.onselect = function(){console.log("textarea_select");};myTextarea.onchange = function(){console.log("textarea_change");};myReset.onreset = function(){myReset.reset();};myForm.onsubmit = function(){console.log("submit");};</script>
</body>

3.2 表单事件的注意事项

submit事件的发生对象是<form>元素，而不是<button>元素，因为提交的是表单，而不是按钮。

3.3 相关的Event对象

target.value：获取当前对象的值。

target.selectionStart：获取选中的字符串的第一个字符的位置。

target.selectionEnd：获取选中的字符串的最后一个字符的位置加一。

<body><form><input type="text" id="myInput"></form><script>var myInput = document.getElementById("myInput");myInput.onselect = function(e){console.log(e.target.selectionStart);console.log(e.target.selectionEnd);// 输出选中的字符串的值console.log(e.target.value.substring(e.target.selectionEnd,e.target.selectionStart));};</script>
</body>

4. 窗口事件

窗口事件的类型

scroll：在文档或文档元素滚动时触发，主要出现在用户拖动滚动条，应用场景有懒加载。

resize：改变浏览器窗口大小时触发，主要发生在window对象上，应用场景有响应式设计。

<!DOCTYPE html>
<html lang="en">
<head><style>div{height: 300px;}</style>
</head>
<body><div>内容1</div><div>内容2</div><div>内容3</div><div>内容4</div><div>内容5</div><div>内容6</div><div>内容7</div><script>window.onscroll = function(e){// 注意需要有<html>标签var scrollHeight = document.documentElement.scrollTop;console.log(scrollHeight);}window.onresize = function(){console.log("窗口发生变化");}</script>
</body>
</html>

5. 焦点事件

5.1 焦点事件的类型

focus：元素获得焦点后触发，该事件不会冒泡。

blur：元素失去焦点后触发，该事件不会冒泡。

focusin：元素获得焦点时触发，该事件会冒泡。

focusout：元素失去焦点时触发，该事件会冒泡。

<body><input type="text" id="username" autofocus><input type="text" id="email"><script>var myUsername = document.getElementById("username");var myEmail = document.getElementById("email");// chrome暂时不支持onfocusin和onfocusout的DOM0级事件的写法myEmail.addEventListener('focusin',function(){console.log("focusin");},true);myUsername.addEventListener('focusout',function(){console.log("focusout");},true);myEmail.addEventListener('focus',function(){console.log("focus");},true);myUsername.addEventListener('blur',function(){console.log("blur");},true);</script>
</body>

5.2 焦点事件的注意事项

由于focus和blur事件不会冒泡，只能在捕获阶段触发，所以addEventListener方法的第三个参数需要设为true。

6. 剪切板事件

剪切板事件的类型

cut：将选中的内容从文档中移除，并加入到剪切板时触发。

copy：进行复制动作时触发。

paste：剪切板内容粘贴到文档时触发。

<body><input type="text" id="username" autofocus><script>var myUsername = document.getElementById("username");myUsername.oncut = function(){console.log("cut");};myUsername.oncopy = function(){console.log("copy");};myUsername.onpaste = function(){console.log("paste");};</script>
</body>

7. 网页状态事件

网页状态事件的类型

load：资源加载完成后触发，包括图片和DOM等资源都加载完成。

DOMContentLoaded：网页下载并解析完成以后，浏览器就会在document对象上触发DOMContentLoaded 事件。这时，仅仅完成了网页的解析（整张页面的 DOM 生成了），所有外部资源（样式表、脚本、iframe 等等）可能还没有下载结束。也就是说，这个事件比load事件早触发。

readystatechange：readystatechange事件当 Document 对象和 XMLHttpRequest 对象的readyState属性发生变化时触发。document.readyState有三个可能的值：loading（网页正在加载）、interactive（网页已经解析完成，但是外部资源仍然处在加载状态）和complete（网页和所有外部资源已经结束加载，load事件即将触发）。

<body><div></div><script>// 观察不使用懒加载图片的载入方式var image = new Image();image.src = "http://iwenwiki.com/api/livable/banner/banner1.png"document.body.appendChild(image);document.addEventListener("DOMContentLoaded",function(){console.log("DOM解析完成");});</script>
</body>

<body><div></div><script>// 观察使用懒加载图片的载入方式var image = new Image();image.src = "http://iwenwiki.com/api/livable/banner/banner1.png"image.onload = function(){console.log("图片资源已加载完成");document.body.appendChild(image);};document.addEventListener("DOMContentLoaded",function(){console.log("DOM解析完成");});</script>
</body>

8. Touch事件

8.1 Touch事件的类型

touchstart：用户开始触摸时触发，它的target属性返回发生触摸的元素节点。

touchend：用户不再接触触摸屏时（或者移出屏幕边缘时）触发，它的target属性与touchstart事件一致的，就是开始触摸时所在的元素节点。它的changedTouches属性返回一个TouchList实例，包含所有不再触摸的触摸点（即Touch实例对象）。

touchmove：用户移动触摸点时触发，它的target属性与touchstart事件一致。如果触摸的半径、角度、力度发生变化，也会触发该事件。

touchcancel：触摸点取消时触发，比如在触摸区域跳出一个情态窗口（modal window）、触摸点离开了文档区域（进入浏览器菜单栏）、用户的触摸点太多，超过了支持的上限（自动取消早先的触摸点）。

<head><style>.box{width: 100px;height: 100px;background: red;}</style>
</head>
<body><div class="box" id="box"></div><script>var box = document.getElementById("box");box.addEventListener("touchend",function(){console.log("抬起来了");});box.addEventListener("touchstart",function(){console.log("触摸屏幕");});box.addEventListener("touchmove",function(){console.log("移动");});</script>
</body>

8.2 Touch事件的注意事项

touch事件用在移动端，必须使用DOM2级事件处理程序。

JavaScript 事件类型相关推荐

html鼠标事件有哪些,JavaScript事件类型：鼠标事件
Dom3级事件中定义了9个鼠标事件 1.click事件 click:用户单击鼠标主按钮(一般为左边按钮)或者在获得焦点的前提下按回车键时触发. click()方法也可以触发click 事件. 2.db ...
javascript --- 事件对象和事件类型
// 无论程序使用"DOM0级"规范还是"DOM2级"规范,都会在局部产生一个event对象, // 将其打印出来研究: <div id="di ...
JavaScript 中的事件类型1（读书笔记思维导图）
Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而" DOM3级事件"规定了以下几类事件. UI(User Interface,用户界面)事件:当 ...
JavaScript 中的事件类型3（读书笔记思维导图）
Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而" DOM3级事件"规定了以下几类事件. UI(User Interface,用户界面)事件:当 ...
JavaScript 中的事件类型2（读书笔记思维导图）
Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而" DOM3级事件"规定了以下几类事件: UI(User Interface,用户界面)事件:当 ...
JavaScript 中的事件类型5（读书笔记思维导图）
Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而" DOM3级事件"规定了以下几类事件. UI(User Interface,用户界面)事件:当 ...
JavaScript 中的事件类型4（读书笔记思维导图）
Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而" DOM3级事件"规定了以下几类事件. UI(User Interface,用户界面)事件:当 ...
JavaScript DOM高级程序设计 4.2 事件类型--我要坚持到底！
对象事件 load和unload(载入页面的时候调用load,关闭页面的时候调用unload) abort和error 对于载入图像时出现错误的情况,可以使用error事件侦听器来进行说明: ADS. ...
JavaScript 事件和事件类型
事件和事件类型认识事件和事件类型什么是事件事件是发生并得到处理的操作,即:事情来了,然后处理. 如: 电话铃声响起(事件发生) --需要接电话(处理) 按钮被点击了,然后对应一个 ...

JavaScript 事件类型