例子:
<!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结构发生变化时触发。

JS高级程序设计2nd部分知识要点7的更多相关文章

  1. JS高级程序设计2nd部分知识要点5

    JS Regexp 字面量模式 用\反斜杠转义 构造函数中的字符串 也用\转义正则也用\ RegExp实例属性 global -布尔值  /g ignoreCase -布尔值 /i lastIndex ...

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

    DOM nodeType属性 所有类型节点都有的两个方法 1. cloneNode()用于创建调用这个方法的节点的一个完全相同的副本.

  3. JS高级程序设计2nd部分知识要点4

    ECMAScript中所有函数的参数都是按值传递的. 5种基本数据类型: Undfined,Null,Boolean,Number,String. ECMAScript中的所有参数传递的都是值,不可能 ...

  4. JS高级程序设计2nd部分知识要点3

    对象转换方法:1> toLocaleString(),2> toString(),ValueOf()方法会返回相同的值 栈方法是 LIFO (后进先出)的数据结构 -push ,pop 方 ...

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

    ECMAScript中所有函数的参数都是按值传递的. 5种基本数据类型: Undfined,Null,Boolean,Number,String. 当代码在一个环境中执行时,会创建变量对象的一个作用域 ...

  6. JS高级程序设计2nd部分知识要点1

    保存浮点数值需要的内存空间是保存整数值的两倍,因此ECMAScript会不失时机的将浮点数值转换为整数值 浮点数值的最高精度是17位小数 parseInt 字符串转换为数值,可传基数(8,16) pa ...

  7. js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定

    js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...

  8. 《JS高级程序设计》笔记 —— 解析查询字符串

    今天在继续翻阅<JS高级程序设计>的时候,正好翻到location对象这一小节,其中有一部分就是讲的解析查询字符串.看到这个内容立马想到了做去哪儿秋招笔试题的时候有这么一道题. 去哪儿笔试 ...

  9. angular.js高级程序设计书本开头配置环境出错，谁能给解答一下

    server.jsvar connect=require('connect');serveStatic=require('serve-static');var app=connect();app.us ...

随机推荐

  1. scrum1.4---Sprint 计划

    燃尽图

  2. 使用Eclipse Installer安装Eclipse

    由于一些原因,需要重新安装Eclipse,登陆到Eclipse官网下载Eclipse时发现社区又推出了Eclipse Installer.所以就下下来尝尝鲜. 刚开始确实有些选项不太明白,不过现在挺喜 ...

  3. Winform开发框架之权限管理系统改进的经验总结（3）-系统登录黑白名单的实现

    在一般的权限系统里面,可能经常会看到系统的黑名单或者白名单的拦截功能.在一般权限系统里面,常见的黑名单就是禁止用户在某些IP上登录系统,白名单就是允许用户只在某些IP上登录系统.本随笔主要介绍在我的权 ...

  4. javaweb学习总结(三十二)——JDBC学习入门

    一.JDBC相关概念介绍 1.1.数据库驱动 这里的驱动的概念和平时听到的那种驱动的概念是一样的,比如平时购买的声卡,网卡直接插到计算机上面是不能用的,必须要安装相应的驱动程序之后才能够使用声卡和网卡 ...

  5. SVN 忽略文件但不删除文件

    SVN忽略一些不必要的文件但不删除 如果svn仓库中有一些不希望被别人提交的文件 该如何忽略掉对这个文件的更改但又不删除这个文件呢? 在找了一堆解决方案后得出了如下结论 去除要被忽略文件的版本控制 基 ...

  6. Oracle数据库导入导出总结(dmp文件)

    Oracle 10G 管理页面(Oracle Enterprise Manager 10g): http://localhost:1158/em http://localhost:1158/em/co ...

  7. MySQL常用SQL语句

    一.数据库操作 1．创建数据库: Mysql> CREATE DATABASE databaseName; Mysql数据库的数据文件默认存放在/usr/local/mysql/var/目录下, ...

  8. C++ Qt 框架静态编译 操作记录

    谁愿意写个程式出来之后还附带一堆DLL,尤其是名字如此明显的名字. 于是在网上看了看,是需要下载源代码然后进行编译的,但是看了看别人说的编译时间,长达几个小时,瞬间就感觉不想做了.因为我还需要抓紧时间 ...

  9. php中的常用数组函数（三）（获取数组交集的函数们 array_intersect()、array_intersect_key()、array_intersect_assoc()、array_intersect_uassoc()、array_intersect_ukey()）

    这5个获取交集的函数 有 5个对应的获取差集的函数.我是链接. array_intersect($arr1, $arr2); //获得数组同键值的交集 array_intersect_key($arr ...

  10. javascript 之拼接html字符串

    // var one = {"id":1, "leasetime":2, "ney":0,"myhuifangshi": ...