由处理程序来监听某个动作，一旦某个动作发生，那么处理程序就作出响应，这就是观察者模式的简单案例。在JavaScript中，按钮一旦被点击（或者其他动作，拿点击按钮举例），就会有响应的处理程序进行响应，比如，点击按钮弹出一个对话框、鼠标滑过按钮会提示一行字等等，这就是JavaScript中要讲的事件，也属于经典的观察者模式。
- 事件流。
在DOM树中，可能一个<button>元素属于一个<div>元素的子元素，而<div>又属于<html>的子元素。这个时候，点击<button>这个元素，<button>就会触发一个事件（或者一个动作），而<div>、<html>有可能也要接收到这个事件的信号。也就是说，你打了button一下，它的父亲、祖父都会感受到你的打击。这就是事件流。IE的事件流是事件冒泡流。
- 事件冒泡
- 事件捕获
- DOM的事件流
- 事件处理程序
- 事件就是用户或者浏览器自身执行的某种动作。而响应某个事件的函数就叫做事件处理程序。
诸如click、load、mouseover都是事件的名字。事件处理程序的名字则在前面加on，比如：onclick、onload等。
示例：
1 <body> 2 <input type="button" value="Click Me" onclick="alert('Clicked')" /> 3 <!--双引号转义--> 4 <input type="button" value="Click Me" onclick="alert("Clicked")" /> 5 6 <script type="text/javascript"> 7 function showMessage(){ 8 alert("Hello world!"); 9 }10 </script>11 <input type="button" value="Click Me" onclick="showMessage()" />12 <!--防止在函数未加载时点击-->13 <input type="button" value="Click Me" onclick="try{showMessage();}catch(ex){}" />14 </body>
<input>是元素，onclick是事件处理程序的名字，跟value、type一样，是属性。
缺点：
- 如果<input>写在<script>上方，函数尚未加载时，用户可能就点击元素，导致报错。所以上面代码13行进行try catch捕获。
- 如果要修改事件函数，那么<input>里的onclick和<script>里的具体函数都要修改，HTML与JavaScript太紧密耦合。
- DOM0级事件处理程序
- DOM2级事件处理程序
IE9及其他主流浏览器支持DOM2级事件处理程序。
- DOM2级事件给元素定义了两个方法：
- 指定事件处理程序的操作：addEventListener();
- 删除事件处理程序的操作：removeEventListener();
- DOM2级之于DOM1级最大的优势在于，可以注册多个事件。
比如点击某个按钮，要弹出一个提示框，同时要按钮改变颜色，这时就需要同时添加两个事件处理程序。
- 示例：
<body> <input type="button" id="myBtn" value="Click Me" /> <p>This example won't work in Internet Explorer.</p> <script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.addEventListener("click", function(){ alert(this.id); }, false); /**第三个参数默认为false，表示在冒泡阶段触发。如果为true，表示在捕获阶段触发，true一般不会用*/ btn.addEventListener("click", function(){ alert("Hello world!"); }, false); </script></body>
- IE事件处理程序
- IE事件给元素定义了两个方法：
- 指定事件处理程序的操作：attachEvent();
- 删除事件处理程序的操作：detachEvent();
- attachEvent（）与DOM0级注册事件在作用域上有不同。
- 添加多个事件处理程序，按相反的顺序触发。
- 跨浏览器的事件处理程序
- 为保持兼容，可以写一个公共事件Util。下面是Util中的添加事件示例：
addHandler: function(element, type, handler){ if (element.addEventListener){ element.addEventListener(type, handler, false); } else if (element.attachEvent){ element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }
- 事件对象
- 事件类型
- 上述举例最多的是onclick事件类型，实际上，事件类型多种多样，如：
- UI事件：用户与界面交互时触发。
- 焦点事件：元素获得或者失去焦点时。
- 鼠标事件：单击、双击、右击等。
- 滚轮事件：鼠标滑轮滚动时。
- 键盘事件：键盘上按下某个键时。
- 等等。
- javascript中最常用的事件就是load，页面全部加载后，就会触发load事件。
- 图像上面也可以触发load事件，当图像加载完毕时可以指定事件。
- 用户从一个页面切换到另一个页面，会触发unload事件。
- 当浏览器窗口大小被调整后，会触发resize事件。
- 键盘事件也经常用到。
- 内存和性能
在javascript中，添加到页面上的事件处理程序数量将直接影响到页面整体的运行性能。每个函数都是对象，都会占用内存。内存中的对象越多，性能就越差。所以要利用好事件处理程序，比如使用事件委托等。
原标题：javascript笔记7
关键词：JavaScript
我知道了 