JS之事件（二）

发表于

键盘与文本事件

对键盘事件的支持主要遵循的是DOM0级，DOM3中制定了新的规范。

键盘事件有三个：

  • keydown：按下任意键时触发，按住不放会重复触发
  • keypress：用户按下键盘上的字符键时触发，按住不放会重复触发
  • keyup：用户释放按键时触发

虽然所有元素都支持这些事件，但一般在文本框输入时才会用到。

文本事件只有一个：textInput，此事件是对keypress的补充，在文本出入文本框之前会触发这事件

按下字符键时，键盘事件的触发顺序如下：


  1. keydown事件

  2. keypress事件

  3. keyup事件

keydown和keypress都是文本框内容发生变化前触发，而keyup则是文本框发生变化后触发的。

如果用户按下的是字符键，那么会先触发keydown事件，然后就是keyup事件。

键盘事件也支持相同的修改键，所以键盘事件的事件对象中也有shiftKey、ctrlKey、altKey和metaKey属性。

键码

在发生keydown和keyup事件时，event对象的keyCode属性中会包含一个键码，该键码的值与数字字母字符键对应的ASCII码相同，如A对应的keyCode值就是65，详细的对应表大家可以百度。

字符编码

IE9+及现代浏览器（除Opera）都支持一个charCode属性，只有在发生keyPress事件时才会包含此属性，值为字符键所对对应的ASCII码或者为0（非字符键）。IE8之前版本和Opera并不支持这个属性，所以我们需要实现跨浏览器的方式来获取字符编码。

1
2
3
4
5
6
7
8
9
var eventUtil = {
    'getCharCode':function(event){
        if(typeof event.charCode == "number"){
            return event.charCode;
        }else{
            return event.keyCode;
        }
    }
}

取得字符编码后，就可以用fromCharCode（）将其转化为实际的字符。

DOM3级键盘事件

DOM3级事件中作出了一些修改：

  • key:用来取代keyCode，值是一个字符串，在按下字符键时，值是对应的文本字符（区分大小写），按下非字符键时，值是对应键名（如“shift”）
  • char：取代charCode，与key类似，不过按下非字符键时，值为null

IE9支持key但不支持char属性。Safari 5 和Chrome支持KeyIdentifier的属性，于key属性类似，不过当按下字符键时，keyIdentifier的值是一个Unicode值，不再是ASCII码。由于存在跨浏览器的兼容问题，不推荐使用key，char，和keyIdentifier。

HTML5事件

DOM规范并没有包含所有浏览器支持的所有事件，很多浏览器都实现了自定义的事件，为此，html5列出了浏览器应该支持的所有事件。

contextmenu事件

网页中，我们通过右键可以调出上下文菜单，有时我们需要屏蔽这个默认事件，转而使用我们自定义的菜单，这时就需要使用contextmenu事件。此事件是冒泡的，所以我们可以为document指定一个事件处理程序，用以处理页面中触发的所有此类事件。

实际应用中，我们需要结合事件对象的clientX和clietY来定位菜单出现的位置，同时当用户点击菜单时应该隐藏菜单。

beforeunload事件

beforeunload让我们有可能在页面卸载前阻止这一操作，继续使用原有页面。但是我们不能让用户无法离开当前页面，而是应该将决定权交给用户，只是在离开前提示一些信息，询问用户是否真的要离开。

如果要在用户关闭时弹出一个信息框，需要这样做：

1
2
3
4
5
6
EventUtil.addEventHander(window,"beforeunload",function(event){
    event = eventUtil.getEvent(event);
    var message = '你真的要离开此页面吗？'
    event.returnValue = message;//IE及FF做法
    return message;//safari及Chrome做法
})

pageshow事件和pagehide事件

在FF和Opera中有一个特性，往返缓存（back-foward cache 或bfcache），能够使用户在后退或者前进时加快页面加载速度，其实他们是把整个网页保存在了缓存中。但是这里会有一个问题，如果我们的网页在bfcache中，那么再次打开着页面是不会触发load事件的，这对于那些需要在页面加载完执行一些事件的页面来说，就有可能会造成页面显示不正确。

而pageshow事件在页面显示时会触发，无论该页面是不是存在于bfcache中。虽然事件的目标是document，但是必须要将其监听程序绑定在window上。

pageshow事件对象还包含一个persisted属性，如果值为true，则表示页面存放在bfcache中。

pagehide事件会在unload事件之前触发，如果页面在卸载之后是存放在bfcache中，那么persisted值为true。

IE9+及现代浏览器都支持这两个事件。

触摸与手势事件

现如今，移动端已然成为了除PC端外另一个网络流量的汇聚地，其中ios和Adroid最为耀眼，但是这些设备没有鼠标也没有键盘，那么我们要怎么监听用户的操作呢？移动端其实主要还是通过用户的手指触摸（touch）来触发事件，为此，html5提供了touch系列的事件来实现我们的目的。

  • touchstart：当手指触摸屏幕时触发，即时已经有手指放在屏幕上也会触发
  • touchmove：当手指在屏幕滑动时连续触发
  • touchend：手指从屏幕移开时触发
  • touchcancel：系统停止跟踪触摸是触发

这些事件都是会冒泡，且event对象中也都包含常见的属性：clientX，clientY，bubbles，cancelable，detial，screenX，screenY等

除此之外，触摸事件还支持三个用于跟踪触摸的属性：

  • touches：表示当前跟踪的触摸操作的touch对象的数组
  • targetTouchs：特定于事件目标的touch对象的数组
  • changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组

触摸事件和鼠标事件的触发顺序如下：


  1. touchstart

  2. mouseover

  3. mousemove

  4. mousedown

  5. mouseup

  6. click

  7. touchend

关于js事件较常用的都已经介绍完了，如果想更加详尽的学习，可以看javascript高级程序设计这本书，后面可能会通过一些例子或者项目将这些知识结合起来，敬请期待！