美文网首页
Javascript事件笔记

Javascript事件笔记

作者: 冬瓜不削皮 | 来源:发表于2019-01-13 19:22 被阅读0次

事件在DOM结构中传播的顺序叫事件流,分三个阶段:事件捕获、事件发生、事件冒泡

现代浏览器事件冒泡一直冒到window身上,事件捕获也延伸到window开始

事件级别

  • HTML事件 onclick = "showAlert(event)"
  • DOM0级事件 div.onclick = function(){}
  • DOM2级事件 addEventListen

事件的分类

UI事件、焦点事件、鼠标事件、滚轮事件、文本事件、键盘事件、设备事件。

UI事件指的是那些不一定与用户操作有关的事件。包括:
  • load 当页面完全加载后(包括所有图像、Javascript文件、CSS文件等外部资源)就会触发window身上的load事件。当我们为image图像指定事件时,需要先指定事件,然后设置 src 才能在图像加载完毕触发事件,否则不能生效。
  • unload window身上
  • abort
  • error window身上
  • select 表单元素
  • resize window身上
  • scroll window和body身上触发,有兼容性问题,
焦点事件
  • focus 不冒泡
  • blur 不冒泡
  • focusin 冒泡
  • focusout 冒泡
鼠标事件与滚轮事件
  • click
  • dbclick
  • mousedown
  • mouseenter 鼠标光标从元素外部首次移动到元素范围之内时触发,不冒泡,而且移动到后代元素上也不触发
  • mouseleave 在位于元素上方的鼠标光标移动到元素范围之外时触发,不冒泡,而且光标移动到后代元素上不会触发
  • mousemove 光标在元素内部移动时重复地触发。
  • mouseout 在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发。一个元素可能位于前一个元素的外部,也可能是这个元素的子元素
  • mouseover 在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内触发
  • mouseup

客户区座标

  • event.clientX
  • event.clientY
  • event.pageX IE8下需要采用折衷方案计算出来scrollLeft 和scrollTop
  • event.pageY
  • event.screenX
  • event.screenY
iOS 和 Andriod 特殊处理
  • 不支持dbclick
  • 轻击可单击元素会触发mousemove事件。如果此操作会导致内容滚变化,将不再有其他事件法身滚;如果屏幕没有因此变化,那么一次会发生mousedown mouseup click 事件。轻击不可单击的元素不会触发任何事件。可单击的元素指那些淡季可产生默认操作的元素,或这那些已经被指定了onclick事件处理程序的元素。
  • mousemove事件也会触发mouseover 和 mouseout 事件
  • 两个手指放在屏幕上且页面随手指移动二滚动时会触发mousewheel 和 scroll事件。
键盘事件
  • keydown 按下任意键时触发,一直按下,一直触发,文本框变化前
  • keypress 按下任意键时触发,一直按下,一直触发,文本框变化前
  • keyup
  • textInput 用户在可编辑区域中输入字符时触发,退格键,button身上的都不能触发

contentmenu事件 在呼出快捷菜单时触发,具体可以参见范例。

DOMContentLoaded事件 DOM树加载完毕后触发,document身上或者window身上

pageshow 在页面onload之后触发,切换标签从缓存中读取时也会触发
pagehide

hashchange URL的参数列表发生变化时通知开发人员。window对象

设备事件
  • orientationchange事件 window身上,苹果ios系统 0 90 -90
  • deviceorientation xyz轴,
触摸手势事件
  • touchstart 冒泡

  • touchmove 冒泡

  • touchend 冒泡

  • touchcancel 冒泡

  • 以上事件的事件对象中不仅包括clientX等参数,还包括touches targetTouchs changeTouches等属性

  • touches 表示当前跟踪的触摸操作的Touch对象的数组

  • targetTouchs 特定与事件目标的Touch对象数组

  • changeTouches 表示自上此触摸以来发生了什么改变的Touch对象的数组

手势事件

  • gesturestart 当一个手指已经安在屏幕上,另一个手指有触摸屏幕时触发
  • gesturechange 当触摸屏上任意一个手指位置发生变化时触发
  • gestureend 当任何一个手指从屏幕上面移开时触发

事件委托

  • 利用事件冒泡和target来获取对应的元素
  • 移除事件处理程序
//scroll事件的触发
EventUtil.addHandler(window,"scroll",function (event) {
  if(document.compatMode == "CSS1Compat"){
    alert(document.documentElement.scrollTop);
  }else {
    alert(document.body.scrollTop);
  }
})

//计算IE8下pageX和pageY

//修改键

//快捷菜单范例
//跨浏览器事件解决方案
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] = hanlder;
    }
  },
  //移除事件
  removeHandler: function (element, type, hanlder) {
    if(element.removeEventListener){
      element.removeEventListener(type,handler,false);
    }else if(element.detachEvent){
      element.detachEvent("on" + type, hanlder);
    } else {
      element["on" + type] = null;
    }
  },
  //获取事件对象
  getEvent: function (event) {
    return event ? event : window.event;
  },
  //获取事件发生时的目标对象
  getTarget: function (event) {
    return event.target || event.srcElement;
  },
  //事件发生时阻止默认行为
  preventDefault: function (event) {
    if(event.preventDefault){
      event.preventDefault();
    } else  {
      event.returnValue = false;
    }
  },
  //事件发生时阻止事件冒泡和捕获
  stopPropagation: function (event) {
    if(event.stopPropagation){
      event.stopPropagation();
    }else {
      event.cancelBubble = true;
    }
  },
  //当事件为mouseover和mouseout时,事件对象中会有相关元素,这里就是获取相关元素
  getRelatedTarget: function (event) {
    if(event.relatedTarget){
      return event.relatedTarget;
    }else if (event.toElement) {
      return event.toElement;
    }else if(event.fromElement) {
      return event.fromElement;
    }else {
      return null;
    }
  },
  //获取鼠标点击时,用的是哪个按键
  getButton: function (event) {
    if(document.implementation.hasFeature("MouseEvents","2.0")){
      return event.button;
    } else {
      switch (event.button) {
        case 0:
        case 1:
        case 3:
        case 5:
        case 7:
          return 0;
        case 2:
        case 6:
          return 2;
        case 4:
          return 1;
      }
    }
  },
  //获取鼠标滚轮滚动的方向,120为向上滚,-120为向下滚
  getWheelDelta: function (event) {
    if(event.wheelDelta){
      return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta: event.wheelDelta)
    } else {
      return -event.detail * 40;
    }
  },
  //获取按键的编码
  getCharCode: function (event) {
    if(typeof event.charCode == "number"){
      return event.charCode;
    }else {
      return event.keyCode;
    }
  },
  //获取剪切板内容
  getClipboardText: function (event) {
    var clipboardData = (event.clipboardData || window.clipboardData);
    return clipboardData.getData("text");
  },
  //设置剪切板内容
  setClipboardText: function (event) {
    if(event.clipboardData){
      return event.clipboardData.setData("text/plain",value);
    } else if (window.clipboardData){
      return window.clipboardData.setData("text",value);
    }
  }
};

相关文章

  • JavaScript ☞ day3

    JavaScript基础学习笔记之JavaScript进阶 焦点事件 鼠标事件-单击与双击 鼠标事件-mouseo...

  • Javascript事件笔记

    事件在DOM结构中传播的顺序叫事件流,分三个阶段:事件捕获、事件发生、事件冒泡 现代浏览器事件冒泡一直冒到wind...

  • 笔记 for JavaScript 事件

    HTML 事件 HTML 事件可以是浏览器行为,也可以是用户行为。以下是 HTML 事件的实例: HTML 页面完...

  • Js事件循环

    列表 JavaScript事件循环 测试金字塔 stub JavaScript事件循环理解 javaScript语...

  • JavaScript绑定事件的三种方式

    @(javascript)[JavaScript事件绑定] JavaScript绑定事件的三种方式 使用内联 使用...

  • javascript 中的事件机制

    js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...

  • JavaScript的事件机制

    在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(...

  • javascript-事件基础和事件绑定

    javascript-事件基础和事件绑定 一、事件驱动 1.1事件 javascript侦测到的用户的操作(点击、...

  • 事件学习总结

    一、事件 1. 事件的发生 JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件...

  • 学习记录_javaScript_事件处理

    1. javaScript事件处理 [1. javaScript事件处理][1.1 在页面body加载事件][1....

网友评论

      本文标题:Javascript事件笔记

      本文链接:https://www.haomeiwen.com/subject/hbwazftx.html