什么是事件
事件是文档或浏览器中发生的特定交互瞬间！
事件流
事件流描述的是从页面中接受事件的顺序。
但有意思的是，IE和Netscape开发团队居然提出了两个截然相反的事件流概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。
事件冒泡
IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点。
点击按钮，那么这个click事件会按照这样传播路径传递：<input>→<div>→<body>→<html>→document
事件冒泡的过程
事件捕获
Netscape团队提出的另一种事件流叫做事件捕获。事件捕获的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件。
点击按钮，那么此时click事件会按照这样传播：document→<html>→<body>→<div>→<input>
DOM事件流
"DOM2级事件"规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的事件捕获，为截获事件提供机会。然后是实际的目标接受事件。最后一个阶段是时间冒泡阶段，可以在这个阶段对事件做出响应
在DOM事件流中，事件的目标在捕获阶段不会接受到事件。这意味着在捕获阶段，事件从document到div后就定停止了。下一个阶段是处于目标阶段，于是事件在input上发生，并在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回document
HTML事件处理程序
HTML事件处理程序。
即我们直接在HTML代码中添加事件处理程序，
<input id="btn1" value="按钮" type="button" onclick="showmsg();">
从上面的代码中我们可以看出，事件处理是直接嵌套在元素里头的，这样有一个毛病：就是html代码和js的耦合性太强，如果哪一天我想要改变js中showmsg，那么我不但要再js中修改，我还需要到html中修改，一两处的修改我们能接受，但是当你的代码达到万行级别的时候，修改起来就需要劳民伤财了，所以，这个方式我们并不推荐使用。
DOM0级事件处理程序
即为指定对象添加事件处理， 如：
<input id="btn2" value="按钮" type="button">
<script>
var btn2=document.getElementById("btn2");
btn2.onclick=function(){
alert("DOM0级添加事件处理");
}
btn.onclick=null;//如果想要删除btn2的点击事件，将其置为null即可
</script>
DOM2级事件处理程序
DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3个参数：要处理的事件名，做为事件处理程序的函数和一个布尔值。最后这个参数如果是true,表示在捕获阶段调用事件处理程序；如果是fasle,表示在冒泡阶段调用事件处理程序。
使用DOM2级事件处理程序的主要好处是可以添加多个事件处理程序。事件处理程序会按照它们的顺序触发。通过addEventListener()添加的时间处理程序只能使用removeEventListener()来移除，移除时传入的参数与添加时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数将无法移除。
注意：这里我们的第三个参数都是false,是在冒泡阶段添加的。大多数情况下，都是就事件处理程序添加到事件流的冒泡阶段，这样可以最大限度的兼容各种浏览器。
onload：一张页面或一幅图像完成加载。
<body onload="load()"> onload:事件会在页面或图像加载完毕后立即发生
function(){ alert("页面加载完成")}
</body>
onblur
input失去焦点
onfocus
input获得焦点
onselect
事件会在文本框中的文本被选中时发生
onchange
事件会在域的内容改变时发生
onreset
内容被重置的时候
onsubmit
事件会在表单中的确认被点击的时候发生
onclick
在对象被点击时发生
onresize
在窗口或框架被调整大小时发生
window.scrollBy:
方法可把内容滚动指定的像素数。
window.scrollTo:
方法可把内容滚动到指定的坐标。
ondblclick:
事件会在对象被双击时发生。
网友评论