js事件

js和HTML之间交互是通过事件实现的。事件会有事件流。事件描述的是从页面接受事件的顺序。IE和网景提出了差不多相反的事件流概念。IE提出事件冒泡流。网景提出事件捕获流。

事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较不具体的节点。所有现代浏览器几乎都支持冒泡。


事件捕获:不具体的节点更早的接收事件,最具提的节点最后接收到事件。IE9以上可以支持捕获

DOM2级规定的事件流包括三个阶段(IE8及更早版本不支持事件流):

  • 事件捕获阶段
  • 处于目标阶段
  • 事件冒泡阶段。

事件处理程序:

  • HTML事件处理程序
  • DOM0级事件处理程序
  • DOM2级事件处理程序

HTML事件处理程序

   <input type='button'  id='btn' onclick=clickMe() value='click me'>
    function clickMe (){
      alert('hi')
    } //这种处理程序代码耦合度太高,修改时需要修改两处。存在时差问题,有些事件可能需要HTML元素一出现在页面上就触发,但当时的事件处理程序可能尚不具备条件。

DOM0级事件处理程序:

  var btn =document.getElementById('btn')
  btn.onclick = function () {//每个事件只支持一个事件处理程序
      alert('hi')
  }
  btn.onclick = null //删除事件处理程序

DOM2级事件处理程序:IE9及以上支持

使用DOM2级事件处理程序的好处是可以为一个元素绑定多个事件处理程序

var btn =document.getElementById('btn')
btn.addEventListener('click',function(){
    alert('hi')
},false) //click事件在冒泡阶段触发

IE事件处理程序:IE8及以下只支持事件冒泡

var btn =document.getElementById('btn')
btn.attachEvent('onclick',funtion(){ //第一个参数为onclick,并不是click。
    alert('hi')  //attachEvent()添加的事件处理程序都会被添加到冒泡阶段
})

在IE中使用attachEvent()与使用DOM0级方法的主要区别:事件处理程序运行的作用域不一样。DOM0级事件处理程序会在其所属元素的作用域下运行,而attachEvent()的事件处理程序会在全局作用域运行。attachEvent()也可以为一个元素添加多个事件处理程序,执行顺序与DOM2级事件处理程序的执行顺序相反。

跨浏览器事件处理程序

var EventUtil = {
  addEvent:function (element,type,handler) {
      if (element.addEventListener) { //ie9及以上
          element.addEventListener(type,handler, false)
      } else if (element.attachEvent) { //ie8及以下
          element.attachEvent('on'+type,handler)
      } else {
          element['on'+type] = handler
      }
  },
  removeEvent:function(element, type,handler) {
      if (element.removeEventListener) {//ie9及以上
          element.removeEventListener(type,handler, false)
      } else if (element.detachEvent) { //ie8及以下
          element.detachEvent('on'+type,handler)
      } else {
          element['on'+type] = null
      }
  }
}
<input type='button'  id='btn'  value='click me'>
var btn =document.getElementById('btn')
var handler = function () {
    alert('hi')
}
EventUtil.addEvent(btn,'click',handler)

EventUtil.removeEvent(btn,'click',handler)       

事件对象

在触发DOM上的某个事件时,会产生事件对象event。这个对象包含与这个事件有关的信息。

DOM中的事件对象

兼容DOM的浏览器会将一个event对象传入到事件处理程序中,无论是DOM0级还是DOM2级。

var btn = document.getElementByid('btn')
btn.onclick = function (event) {
    alert(event.type) //click
}
btn.addEventListener('click',function (event) {
    alert(event.type) //click
}, false)
  • cancelable 表示是否可以取消事件的默认行为
  • preventDefault() 阻止默认操作 cancelable属性需要设置为true
  • bubbles 表示事件是否冒泡
  • stopPropagation() 取消事件的捕获或冒泡。如果bubbles为true
  • event.target 时间的目标
  • event.type 事件类型
  • event.currentTarget 正在处理事件的元素
  • event.eventPhase 确定事件当前正处于事件流的那个阶段 1表示捕获阶段 2 处于目标对象上 3 冒泡阶段

只有在事件处理程序执行期间,event对象才会存在,一旦事件处理程序执行完成,event对象就会被销毁

IE中的事件对象

要访问IE中的event对象有几种不同的方式,取决于事件处理程序的方法。DOM0级事件处理程序,event对象作为window属性存在。
使用attachEvent()的情况下,可以使用event对象,也可以通过window 对象来访问event对象

  • cancelBubble 默认值是false,设置为true可以取消冒泡 与stoppropagation()作用相同
  • returnValue 默认是false,设置为true表示取消事件默认行为 与* preventDefault()作用相同
  • srcElement 事件的目标 与target属性相同
  • type 事件类型
btn.onclick = function () {
    alert (window.event.srcElement === this)  //true
}
btn.attachEvent('onclick', function (event) {
    alert(event.srcElement === this) //false
})

跨浏览器事件对象

var EventUtil = {
  addEvent: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
      }
  },
  removeEvent: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
      }
  },
  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
      }
  }
}
btn.onclick = function (event) {
    event = EventUtil.getEvent (event)
    var target = EventUtil.getTarget (event)
    EventUtil.preventDefault()
    EventUtil.stopPropagation()
}

事件类型

UI事件(用户与页面上的元素交互时触发)/ 焦点事件 /鼠标事件 /滚动事件/键盘事件/文本事件/变动事件/合成事件

UI事件指的是那些不一定与用户操作有关的事件。
  • load事件 页面完全加载后window上触发
  • unload事件 页面完全卸载后window上触发,只要用户从一个页面切换到另一个页面就会触发
  • abort事件 用户停止下载过程时,如果嵌入的内容没有加载完<object>上触发
  • error事件 当js发生错误时触发 当无法加载图片时在img上触发 当无法加载嵌入的内容时在<object>上触发
  • select事件 当用户选中文本框中的一个或多个字符时触发
  • resize事件 当窗口或框架的大小变化时在window或框架上触发
  • scroll事件 当用户滚动带滚动条的元素中的内容时在该元素上触发
  • load事件中:图片img可以实现预加载,新图像元素不一样要等到添加到文档后才开始加载,只要设置了它的src属性就会开始下载。而<script>标签也支持load事件,只不过只有设置了<script>标签的src属性并且添加到文档后,才会开始下载js文件。
焦点事件

blur focus主要的两个事件,可以在捕获阶段侦听到它们但是它们不支持冒泡。focusin和focusout与blur focus等价,但是支持冒泡。

鼠标事件
  • click:用户单击主鼠标或者按下回车键时触发。
  • dblclick:用户双击主鼠标时出大。属于DOM3级事件标准
  • mouseover:当鼠标指针位于一个元素外部,用户将其首次移入另一个元素边界访问时触发,不能通过键盘触发这个事件
  • mouseout:当鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发。不能通过键盘触发这个事件
  • mousedown:用户按下任意鼠标按钮时触发,不能通过键盘触发这个事件
  • mouseup:当用户释放鼠标按钮时触发,不能通过键盘触发这个事件
  • mousemove:当鼠标在元素内部移动时重复触发,不能通过键盘触发这个事件
  • mouseenter:在鼠标光标从外部首次移动到元素范围内触发,不支持冒泡,在光标移动到后代元素上不会触发。属于DOM3级事件标准。
  • mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发,不支持冒泡,在光标移动到后代元素上不会触发。属于DOM3级事件标准。

鼠标事件都是在浏览器视口的特定位置上发生的。这个位置信息保存在事件对象的clientX,clientY属性中。它们的值表示事件发生时鼠标指针在视口的水平和垂直坐标。这些值不包含页面滚动的距离,因此这个位置不表示鼠标在页面上的实际位置。


pageX,pageY这两个属性可以告诉你鼠标是在页面的什么位置发生的。这两个属性表示鼠标在页面上的位置,因此坐标时相当于页面本身而非视口的左边和顶边计算的。在没有滚动的状况下,pageX pageY 和clientX clientY的值相等。
pageX =clientX + scrollLeft
pageY= clientY + scrollTop
screenX和screenY 相对于整个电脑屏幕的位置
offsetX offsetY:表示鼠标相对于目标元素边界的坐标(仅IE支持)

滚轮事件

mousewheel:这个事件可以在任何元素上触发。当用户通过鼠标滚轮与页面上交互,在垂直方向上滚动页面时就会触发。特有属性wheelDelta 。当用户向上滚动时wheelDelta是120的倍数,当用户向下滚动时wheelDelta是-120的倍数。通过wheelDelta的正负号就可以知道鼠标滚轮的滚动方向

触摸设备

在面向iPhone和iPod中的Safari开发时需要注意:
1.不支持dblclick,双击浏览器窗口会放大画面
2.两个手指放在屏幕上且页面随着手指的移动而滚动时,会触发mouseWheel和scroll事件
3.mousemove事件也会触发mouseover和mouseout事件

键盘事件
  • keydown 当用户按下键盘上任意键的时候触发,如果按住不放,会重复触发
  • keypress 当用户按下键盘上字符键的时候触发,如果按住不放,会重复触发
  • keyup 当用户释放键盘上的键的时候触发
    在发生keydown和keyup事件时,event对象的keyCode会包含一个代码。event.keyCode
  • keyCode:按下键的字符编码
文本事件

textInput事件:主要是对keypress事件补充。用意是将文本显示给用户之前更容易拦截文本。在文本插入文本框之前会触发textInput事件。包含data属性,保存用户输入输入的字符。

HTML5事件

contextmenu
beforeunload
DOMContentLoaded

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,340评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,762评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,329评论 0 329
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,678评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,583评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,995评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,493评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,145评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,293评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,250评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,267评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,973评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,556评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,648评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,873评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,257评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,809评论 2 339

推荐阅读更多精彩内容

  • 事件类型 Web浏览器可能发生的事件类型有很多。不同的事件类型具有不同的信息,而“DOM3级事件“规定了以下几类事...
    ConRon阅读 864评论 0 1
  • 事件 JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型,当文档、...
    bpup阅读 649评论 0 1
  • 本来想和上一篇一起写,又担心太长,导致自己复习时,看不下去,于是就另写一篇笔记。 ClientX与ClientY返...
    Miss____Du阅读 8,235评论 3 6
  • 什么是事件: 事件是交互体验的核心功能 一.事件冒泡: 当一个事件发生时,这个事件会从内向外逐层传递。 二.为什么...
    轻描淡写mua阅读 509评论 0 0
  • 2017年,七月的乡村,一夜初醒,迷糊之中,一只小手握着我的手,把我从床上拖起,坐立着对我说,太阳出来了,陪...
    龙的传人_5c47阅读 542评论 0 2