JavaScript—事件高级

• 事件高级
  • 注册事件：给元素添加事件，分为传统方式和监听注册方式
    • 传统注册方式：利用on开头的事件，后面的处理函数会把前面的注册的处理函数覆盖。
    • 监听注册方式：w3c标准，addEventListener（）；IE9以前使用attachEvent（）同一个元素同一个事件可以注册多个监听器
      • addEventListener（type，listener，useCapture）
        • type：事件类型字符串：click、mouseover，加引号，不带on
        • listener：事件处理函数，事件发生时，通用该监听函数
        • useCapture：可选参数，布尔值，默认false
      • attachEvent（eventNameWithOn，callback）
      • eventNameWithOn：事件类型字符串，带on
      • callback：事件处理函数
  • 删除事件
    • 传统删除方式：eventTarget.onclick = null；
    • 监听删除方式：eventTarget.removeEventListener（type，listener[，useCapture]）;
      • useCapture：
        • true：处于捕获阶段
        • false或者不写默认是冒泡阶段
  • DOM事件流：1、捕获阶段-->2、当前目标阶段--->3、冒泡阶段
  • 事件对象：写在函数括号里面，只有有了事件才会存在，系统自动创建，不需要传递参数，是一系列相关数据的集合
  • 相关属性：
    • 1、e.target：返回触发事件的对象（元素） this：返回绑定事件的对象（元素）与currentTarget相似
    • 2、e.type：返回事件类型
    • 3、e.preventDefault（）：该方法阻止默认行为---普通浏览器
    • 4、e.returnValue：该属性阻止默认行为----低版本浏览器
    • 5、return false：没有兼容性问题--阻止默认行为
    • 6、e.stopPropagation()：阻止冒泡
  • 事件委托：不给每一个子节点设置监听器，而是在父节点上设置事件监听器，利用冒泡原理影响每一个子节点
  • 禁止鼠标右键菜单：contextmenu只要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
  • 禁止鼠标选中：selectstart开始选中
  • 鼠标事件对象MouseEvent

    

  • 键盘事件
    • onkeydown：某个键盘被按下时触发
    • onkeypress：某个键盘被按下时触发，不识别功能键如CTRL 、shift、箭头等等
    • onkeyup：某个键盘按键被松开时触发
  • 键盘事件对象：e.keyCode：返回按键的ASCII码值，但是onkeyup、onkeydown不区分大小写，a和A都是65，而onkeypress区分大小写