百度前端学习日记17——JS事件
1.事件的种类
a.窗口事件,只在body和frameset元素中才有效
onload 页面或图片加载完成时
onunload 用户离开页面时
b.表单元素事件,在表单元素中才有效
onchange 框内容改变时
onsubmit 点击提交按钮时
onreset 重新点击鼠标按键时
onselect 文本被选择时
onblur 元素失去焦点时
onfocus 当元素获取焦点时
c.键盘事件,在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里都无效
onkeydown 按下键盘按键时
onkeypress 按下或按住键盘按键时
onkeyup 放开键盘按键时
d.在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里都无效
onclick 鼠标点击一个对象时
ondblclick 鼠标双击一个对象时
onmousedown 鼠标被按下时
onmousemove 鼠标被移动时
onmouseout 鼠标离开元素时
onmouseover 鼠标经过元素时
onmouseup 释放鼠标按键时
e.其他
onresize 当窗口或框架被重新定义尺寸时
onabort 图片下载被打断时
onerror 当加载文档或图片时发生错误时
2.事件的绑定方法（事件处理）
a.HTML行内事件处理器（尽量不用）
<button onclick="bgChange()">Press me</button>
一开始，您不应该混用 HTML 和 JavaScript，因为这样文档很难解析——最好的办法是只在一块地方写 JavaScript 代码。
即使在单一文件中，内置事件处理器也不是一个好主意。一个按钮看起来还好，但是如果有一百个按钮呢？您得在文件中加上100个属性。这很快就会成为维护人员的噩梦。
b.事件处理属性
btn.onclick = function() {}
c.事件处理函数
function bgChange() {}
btn.addEventListener('click', bgChange);
//添加事件处理
btn.removeEventListener('click', bgChange);
//删除事件处理
d.绑定方式选择
在三种机制中,绝对不应该使用HTML事件处理程序属性 - 这些属性已经过时了，而且也是不好的做法，如上所述.
另外两种是相对可互换的，至少对于简单的用途:
- 事件处理程序属性功能和选项会更少，但是具有更好的跨浏览器兼容性(在Internet Explorer 8的支持下)，您应该从这些开始学起。
- DOM Level 2 Events (addEventListener(), etc.) 更强大，但也可以变得更加复杂，并且支持不足（只支持到Internet Explorer 9）。 但是您也应该尝试这个方法，并尽可能地使用它们。
3.事件冒泡以及事件捕获
举例
<div> <p></p> </div>
div.onclik = function(){
div.style.backgroundColor = "red";
}
p.onclik = function(){
div.style.backgroundColor = "blue";
}
给div和p分别绑定事件，当点击P元素的时会发生什么？（以上为伪代码）
a.事件冒泡
- 浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它
- 然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达<html>元素。
即当点击P元素时，浏览器会先执行p.onclik，背景颜色变蓝，然后浏览器移动到下一个直接的祖先元素div，然后执行div.onclik，背景颜色变红。
b.事件捕获
- 浏览器检查元素的最外层祖先
<html>，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它。 - 然后，它移动到
<html>中的下一个元素，并执行相同的操作，然后是下一个元素，依此类推，直到到达实际点击的元素。
即当点击P元素时，浏览器先检查元素的最外层祖先<html>，然后移动到<html>中的下一个元素，直到div，执行div.onclik，背景颜色变红，继续检查下一个p，执行p.onclik，背景颜色变蓝。
c.现代浏览器
在现代浏览器中，默认情况下，所有事件处理程序都在冒泡阶段进行注册。
如上所述，默认情况下，所有事件处理程序都是在冒泡阶段注册的，这在大多数情况下更有意义。如果您真的想在捕获阶段注册一个事件，那么您可以通过使用addEventListener()注册您的处理程序，并将可选的第三个属性设置为true。
d.stopPropagation()
实际上，我们点击p元素只希望p.onclik执行，但是按照事件冒泡，div.onclik也会被执行，这时我就需要stopPropagation()来解决这个问题
修改p.onclik代码
p.onclik = function(e){
div.style.backgroundColor = "blue";
e.stopPropagation();
}
后记
更多参考MDN
