zoukankan      html  css  js  c++  java
  • js高程笔记13章

    第13章 事件

    1.事件流:描述从页面中接收事件的顺序。

      三个阶段:捕获,处于目标,冒泡。

    2.事件处理程序:局部变量event表示事件对象,this值为事件目标元素。

      (1)HTML事件处理程序:可以访问特性。弊端:可能调用事件处理程序时,函数还未定义。同时代码紧密耦合,修改不便。

      (2)DOM0级事件处理程序:this引用当前元素。弊端:一个元素只能添加一个事件处理程序。

      (3)DOM2级事件处理程序:addEventListener()和removeEventListener()。无法移除匿名函数。IE9.0+支持该方法。

    3.事件对象:在事件处理程序中传入的event

      this始终等于currentTarget,表示事件的注册元素。target等于实际触发的目标

      阻止事件默认行为:event.preventDefault(),前提:event.cancelable属性为true。

      停止冒泡:event.stopPropagation()

      确定事件流阶段:event.eventPhase

    4.事件类型:

      UI事件:load,当页面完全加载(所有图像、js、css)后触发。<img><script>标签也可以触发。

          unload,当文档被完全卸载后触发。用来清除引用,避免内存泄漏。

          resize,浏览器窗口被调整宽高度时触发

          scroll,在文档滚动期间重复被触发。

      焦点事件:focus和blur(不冒泡),focusin和focusout(冒泡)

      鼠标事件:click(只有它可以通过键盘触发),dbclick,mousedown,mouseup,mouseover,mousemove,mouseout

        event坐标位置属性:clientX和clientY,pageX和pageY,screenX和screenY

        event修改件属性:shiftKey,ctrlKey,altKey,metaKey,相应键按下返回true

        event相关元素属性:relatedTarget,对于mouseover,mouseout事件指定相关元素。

        event鼠标按钮属性:button

        event更多事件属性:detail,P375

      滚轮事件:mousewheel

      无障碍性问题:不要通过onmousedown代替onclick,因为屏幕阅读器无法触发onmousedown

             不要使用onmouseover向用户展示新选项

             不要使用dbclick执行重要操作。

      键盘与文本事件:keydown,keypress,keyup,textInput

        event键码属性:keyCode,charCode

      复合事件:

      变动事件:删除节点,插入节点

      HTML5事件:contextmenu事件,右键单击出现上下文菜单时触发。

             beforeunload事件,页面卸载前触发。

             DOMContentLoaded事件,跟load对比,形成DOM树后就触发,不管图像,js,css

             readystatechange事件,提供文档或元素加载状态信息

             pageshow和pagehide事件

             haschange事件

    5.内存和性能:利用好事件处理程序,避免事件处理程序过多。

      事件委托:利用事件冒泡,只指定一个事件处理程序,管理一类型的所有事件。利用event.target进行区分。

      移除事件处理程序:在不需要时移除事件处理程序,(1)在绑定事件的标签被替换或者删除前,(2)在页面卸载前,用onunload

    6.模拟事件:用js模拟一个事件行为的发送。

      创建事件:createEvent()

      初始化事件:initMouseEvent()鼠标事件,initKeyboardEvent()键盘事件

      触发事件:元素.dispatchEvent()

      自定义事件:document.createEvent("CustomEvent").initCustomEvent("自定义事件名称") 

  • 相关阅读:
    JDBC原理
    练习 map集合被使用是因为具备映射关系 "进度班" "01" "张三" "进度班" "02" "李四" "J1701" "01" "王五" "J1701" "02" "王二" 此信息中,我们要怎样把上述信息装入集合中, 根据班级信息的到所有的所有信
    练习 HashSet 去重复
    集合练习 练习:每一个学生Student都有一个对应的归属地定义为String类型。学生属性:姓名,年龄 注意:姓名和年龄相同的视为同一个学生。保证学生的唯一性。 1、描述学生。 2、定义Map容器,将学生作为键,地址作为值存入集合中。 3、获取Map中的元素并进行排序。
    Java学习之Iterator(迭代器)的一般用法 (转)
    int 跟 Integer 的关系
    第十节 集合类Collection和Map
    类 Arrays StringBuilder 跟 StringBuffer 的异同 SimpleDateFormat
    数字转成字母型
    nginx之206异常
  • 原文地址:https://www.cnblogs.com/little-jelly/p/5758960.html
Copyright © 2011-2022 走看看