客户端javascript程序采用了异步事件驱动编程模式。
事件就是Web浏览器通知应用程序发生了什么事情。
事件类型是一个用来说明发生了什么类型事件的字符串。
事件目标是发生的事件或与之相关的对象。
事件对象是与特定事件相关且包含有关该事件详细信息的对象。
事件传播是浏览器决定哪个对象触发其事件处理程序的过程。事件传播的另一种形式是事件捕获,IE8及之前版本不支持事件捕获。
事件类型
传统事件类型
表单事件 submit/reset/focus/blur
Window事件load/unload/focus/blur/resize/scroll
鼠标事件 mousemove/mousedown/mouseup/mouseover/mouseoutIE中不冒泡版本mouseseenter/mouseleave
键盘事件 keydown/keyup/keypress
DOM事件
HTML5事件 拖放API 定义了dragstart/drag/dragend/dragenter/dragover/dragleave/drop
触摸屏和移动设备事件
事件处理程序
为事件指定处理程序有多种方式:
1、 HTML事件处理程序。
2、 DOM0级事件处理程序。
3、 DOM2级事件处理程序。
4、 IE事件处理程序。
5、 跨浏览器事件处理程序。
HTML事件处理程序: 将事件处理程序写在html标签中。
例如:<inputtype="button" value='提交' onclick="alert('你好')">
缺点: 调用函数时,函数可能为被解析,会报错; html与js 混合,耦合度高,不利于维护。
DOM0级事件处理程序:DOM0级事件处理程序被认为是元素的方法。换句话说,它是在元素的作用域内运行的,所以this引用当前元素。(该事件处理程序会在事件流的冒泡阶段被处理)。 想删除指定事件处理程序,将其属性值设为null就好了。
例如:
var oBtn =document.getElementById('sub');
oBtn. function(){
alert('NBTeam');
}
DOM2级事件处理程序: DOM2级事件定义了两个方法,用于指定和删除事件处理程序。分别为addEventListener() 和 removeEventListener.所有DOM节点都包含着两个方法。
三个参数: 要处理的事件名,处理函数,布尔值。True: 在捕获阶段处理程序 false: 在冒泡阶段处理程序。
优点: 可同时为一个元素添加多个事件处理程序。
举例:
oBtn.addEventListener('click',function(){
alert('N');
},false);
oBtn.addEventListener('click',function(){
alert('B'); },false);
IE事件处理程序: IE中对应的添加和删除函数为,attachEvent()和 detachEvent();他们接收两个参数,事件处理名和事件处理函数。由于IE只支持事件冒泡,所以通过attachEvent添加的事件处理函数都会被添加到冒泡阶段。
注:IE在使用attachEvent方法的情况下,事件处理程序的作用域为全局作用域。
attachEvent 也可以为一个元素添加多个事件处理程序。
注:逆序触发。