JS高级程序设计2nd部分知识要点7

例子:
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <div id="myDiv">Click me</div>
</body>
</html>
 
IE的事件流叫做事件冒泡(event bubbling)--事件开始时由最具体的元素(文档嵌套层次最深的寻附上节点)接收，然后逐级向上传播到较为不具体的节点(文档). 总之就是由内到外。
<div> 》<body>》html 》document
 
事件捕获(event capturing) 由最外层元素节点最先接收事件，最具体的节点最后接收事件。
document 》<html> 》<body> 》<div>
 
DOM 事件流
 
DOM2级事件 定义了两个方法 用于处理指定 和删除事件处理程序的操作： addEventListener() 和removerEventlistener() ,都接受3个参数:要处理的事件名，作为事件处理程序的函数和一个布尔值。布尔值参数如果是true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序。
 
Firefox, Safari, Chrome 和 Opera支持 DOM2级事件处理程序 IE浏览器不支持
 
IE的事件处理程序
IE中实现了与DOM中类似的两个方法: attachEvent()和detachEvent(),这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。
 
跨浏览器事件对象处理
var EventUtil={
   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;
    }
   },
   removeHandler:function(element,type,handler){
    if(element.removeEventListener){
     element.removeEventListener(type,handler,false);
    }else if(element.detachEvent){
     element.detachEvent("on" + type, handler);
    }else{
     element["on" + type]=null;
    }
   }
  };
 
DOM2级5种事件
1，UI（用户界面）事件,在用户与页面上的元素交互时触发。
    a.)DOMActive:
    b.)DOMFocusIn:
    c.)DOMFocusOut
2，鼠标事件，当用户通过鼠标在页面上执行操作时触发。
    a.)click
    b.)dbclick
    c.)mousedown 在用户按下了任意鼠标按钮时触发，不能通过键盘触发这个事件。
    d.)mouseout 不能通过键盘触发这个事件
    e.)mouseover 不能通过键盘触发这个事件
    f.)mouseup  在用户释放鼠标按钮时触发，不能通过键盘触发这个事件。
    g.)mousemove 不能通过键盘触发这个事件
 
    click&dbclick触发事件顺序
    mousedown>mouseup>click>mousedown>mouseup>click>dbclick    
    mouseup和mousedown不受其他事件影响
 
3，键盘事件，当用户通过键盘在页面上执行操作时触发。
4，HTML事件，当浏览器窗口发生变化或发生特定的客户端/服务器交互时触发。
5，变动(mutation)事件, 当底层DOM结构发生变化时触发。
posted @ 2015-05-21 18:21  ipha  阅读(150)  评论(0)  编辑  收藏  举报