Dom 事件

1,729 views

Published on

event介绍及常见问题解答

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,729
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 问题在问卷中的位置必须有逻辑性 问题类型 问题所处位置 举例 理由 筛选 最早提出 “过去一个月中你是否在 7-11 买过东西?”“你是第一次来这里吗?” 用于选择符合调研要求的受访者 热身 在筛选问题之后 “你多长时间去买一次东西”“你通常在一周的哪几天买东西?” 问题通常比较简单有趣,使受访者感到轻松。 过度 在主要问题前或变换一下提问方式 “在以后几个问题中,我要问一些关于您家中看电视习惯的问题” 将受访者引入整体,或提醒他接下来要变化提问方式和主题 较复杂或难以回答的问题 一般位于中间;接近结束 “在以后的三个月中你会有多大可能购买以下物品”(量表) 此时受访者已同意完成调研,并且所剩问题不多。 分类和人口统计特征隐私 最后 “您的最高学历是?”“月收入” 一些关于“个人”的问题应将这些可能令人不快的问题放在最后。
  • Dom 事件

    1. 1. DOM 事件 <ul><ul><ul><ul><li>金融界 UED 王建军 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>2011.08.10 </li></ul></ul></ul></ul>
    2. 2. 提纲 <ul><li>DOM 事件 </li></ul><ul><li>事件流 </li></ul><ul><li>事件处理函数 </li></ul><ul><li>event 对象 </li></ul><ul><li>事件的类型 </li></ul><ul><ul><li>鼠标事件 </li></ul></ul><ul><ul><li>键盘事件 </li></ul></ul><ul><ul><li>HTML 事件 </li></ul></ul><ul><li>jQuery event 使用介绍 </li></ul>
    3. 3. DOM 事件 <ul><li>事件是用户或浏览器自身进行的特定行为 例如: button 的 onclick 事件, body 的 onload </li></ul><ul><li>事件是 JavaScript 和 HTML 交互的桥梁 </li></ul><ul><li>事件由用户和浏览器操作页面时触发 </li></ul>
    4. 4. 事件流
    5. 5. 冒泡型事件 <ul><li>事件按照从最特定的事件目标到最不特定的事件目标 (document 对象 ) 的顺序触发 </li></ul><ul><li>IE6 7 8 不会事件冒泡到 window 上 </li></ul><ul><li>例子 </li></ul>
    6. 6. 捕获型事件 <ul><li>事件从 document 对象开始,也在 document 对象结束 </li></ul><ul><li>兼容 DOM 标准的浏览器会继续捕获冒泡到 window 对象 </li></ul><ul><li>IE 不支持捕获型事件 </li></ul>
    7. 7. 答疑解惑 <ul><li>问:什么时候用捕获型事件呢? </li></ul><ul><li>答:很少用, Netscape 4.0 的历史遗留 </li></ul><ul><li>问:是不是所有的事件都支持冒泡 </li></ul><ul><li>答:这个问题问的好,基本上只有 onload 、 unload 、 focus 、 blur 、 submit 和 change 事件是不支持冒泡的 </li></ul>
    8. 8. 答疑解惑 <ul><li>问:事件冒泡有什么用? </li></ul><ul><li>答:比如事件代理,点击页面空白处关闭浮层 </li></ul><ul><li>问:举个例子呗 </li></ul><ul><li>答:请看图, 例子 </li></ul>
    9. 9. 答疑解惑 <ul><li>问:有没有不希望事件冒泡场景? </li></ul><ul><li>答:当然有呢 </li></ul><ul><li>问:也给个例子瞧瞧吧 </li></ul><ul><li>答:还是这个 例子 </li></ul><ul><li>问:那怎么阻止事件冒泡? </li></ul><ul><li>答: IE:event.cancelBubble=true </li></ul><ul><li> DOM 标准: event.stopPropagation() </li></ul>
    10. 10. 事件处理函数
    11. 11. 事件注册方式 <ul><li><div onclick=“handlerClick”></div> </li></ul><ul><li>oDiv.onclick = function(){} </li></ul><ul><li>IE:oDiv.attachEvent(“onclick”, fnClick) </li></ul><ul><li>DOM:oDiv.addEventListener(“click”,fnClick,false) </li></ul>
    12. 12. 答疑解惑 <ul><li>问:三种方式有什么不同? </li></ul><ul><li>答:差别很大,下面慢慢道来。 </li></ul>
    13. 13. 答疑解惑 <ul><li>各浏览器的执行顺序不完全一致,只测试了 Firefox 和 IE6 ,看 例子 </li></ul><ul><ul><li>1 . btn.onclick = function() 覆盖了 onclick=&quot;handleClick()&quot; </li></ul></ul><ul><ul><li>2. 后面的 btn.onclick = function() 覆盖了前面的 btn.onclick = function() </li></ul></ul><ul><ul><li>3. attachEvent/addEventListener 不覆盖其它方式注册的事件 </li></ul></ul><ul><ul><li>4. 非 ie 下, onxxx 相当于 addEventListener, 顺序严格遵守 FIFO (First In, First Out) </li></ul></ul><ul><ul><li>5. ie 下执行顺序为: onxxx 添加的先执行,接着再执行 attachEvent 添加的 </li></ul></ul><ul><ul><li>6. ie6 下,执行顺序很奇怪, handler four 先于 handler three 被输出 </li></ul></ul>
    14. 14. 答疑解惑 <ul><li>问:三种方式推荐用哪种? </li></ul><ul><li>答: addEventListener/attachEvent </li></ul><ul><li>问:为什么是最后一个,我觉得 oDiv.onclick=fn 挺好,没有跨浏览器兼容性 </li></ul><ul><li>答: 1 )第一种 JS 和 HTML 耦合在一起,不利于维护! </li></ul><ul><li>2 ) oDiv.onclick 被覆盖的风险灰常大! </li></ul><ul><li>3 ) addEventListener/attachEvent 的兼容性可以通过使用 jQuery 等脚本库来解决。 </li></ul>
    15. 15. 答疑解惑 <ul><li>问:事件处理函数里怎么获取 event 对象? </li></ul><ul><li>答:在 IE 中, event 对象是 window 对象的一个属性,也就是说 event 是全局的,可以直接使用 event 。 </li></ul><ul><li>DOM 标准中, event 对象必须作为唯一的参数传给事件处理函数。 </li></ul><ul><li>例子 </li></ul>
    16. 16. 答疑解惑 <ul><li>问:上面说只能传 event 唯一一个参数, addEventListener/attachEvent 如何给事件处理传递参数 </li></ul><ul><li>答:办法还是有点,使用 call/apply 方法, 例子 </li></ul>
    17. 17. 答疑解惑 <ul><li>问:事件处理函数里的 this 到底是谁?总是比较迷惑 </li></ul><ul><li>答:不同的注册方式 this 所指不一样, 测试 </li></ul>
    18. 18. 答疑解惑 <ul><li>问:那么如何把对象的方法作为事件处理函数呢?我想让 this 指向当前对象,而不是 DOM 对象 </li></ul><ul><li>答: 例子 </li></ul>
    19. 19. 事件对象
    20. 20. 事件对象 <ul><li>事件对象包含的信息 </li></ul><ul><ul><li>引起事件的对象 </li></ul></ul><ul><ul><li>事件发生时鼠标的信息 </li></ul></ul><ul><ul><li>事件发生时键盘的信息 </li></ul></ul><ul><li>事件只在发生事件时才被创建,且只有事件处理函数才能访问 </li></ul><ul><li>所有事件处理函数执行完毕后,事件对象就被销毁 </li></ul><ul><li>事件的属性和方法 属性和方法列表 </li></ul>
    21. 21. 常用属性和方法 <ul><li>target/srcElement: 获取触发事件的对象 </li></ul><ul><li>type: 事件的名称 </li></ul><ul><li>keyCode: 表示按下按键的数字代号 </li></ul><ul><li>ctrlKey/shiftKey: 判断是否为 ctrl 、 shift 键 </li></ul><ul><li>pageX/pageY: 鼠标相对于页面的 x 、 y 坐标 </li></ul><ul><li>cancleBubble/stopPropagation: 阻止事件冒泡 </li></ul>
    22. 22. 事件的类型
    23. 23. 事件的类型 <ul><li>鼠标事件: click/dbclick/mousedown/mouseout </li></ul><ul><li>mouseover/mouseup/mousemove </li></ul><ul><li>键盘事件: keydown/keyup/keypress </li></ul><ul><li>HTML 事件: load/unload/abort/error/select change/submit/reset/scroll/focus blur </li></ul>
    24. 24. jQuery Event
    25. 25. jQuery event <ul><li>$(document).ready() </li></ul><ul><li>click/mouseover/… </li></ul><ul><li>toggle/hover </li></ul><ul><li>mouseenter/mouseout </li></ul><ul><li>bind/unbind </li></ul><ul><li>event.target/event.data </li></ul><ul><li>stopPropagation/preventDefault </li></ul><ul><li>例子 </li></ul>
    26. 26. jQuery event

    ×