事件(三)

  • 相关元素

在发生museover和mouseout事件时,还会涉及跟多的元素,这个两个事件都会涉及把鼠标指针从一个元素的边界内移动到另一个元素的边界之内,对mouseover事件而言,事件的主目标是获得光标的元素,而相关元素就是那个失去光标的元素,而对mouseout事件而言,事件的主目标是失去光标的元素,相关元素时获得光标的元素。

DOM通过event对象的relateTarget属性提供了相关元素的信息,这个属性只对mouseover和mouseout事件才包含值,对于其他事件,这个属性的值是null,ie8及之前版本在mouseover事件触发时,ie的fromElement属性中保存了相关元素,在mouseout事件触发时,ie的toElement属性中保存着相关元素,可以把下面这个浏览器取得相关元素的方法添加到EventUtil对象中。

var EventUtil={

  getRelatedTarget:function(evnet){

if(event.relatedTarget){

  return event.relatedTarget;

}else if(event.toElement){

  return event.toElement;

}else if(event.fromElement){

  return event.fromElement;

}else{

return null;

}

}

}
  • 鼠标按钮

鼠标的mousedown和mouseup事件来说,则在其event对象存在一个button属性,表示按下或释放的按钮,dom的button属性可能有如下3个值:0表示主鼠标按钮,1表示中间的鼠标按钮,2表示次鼠标按钮,在ie8及之前版本也提供了button属性,但这个属性的值与DOM的button属性有很大差异:

  1. 0:表示没有按下按钮
  2. 1:表示按下了主鼠标按钮
  3. 2:表示按下了次鼠标按钮。
  4. 3:表示同时按下了主、次鼠标按钮。
  5. 4:表示按下了中间的鼠标按钮。
  6. 5:表示同时按下了主鼠标按钮和中间的鼠标按钮。
  7. 6:表示同时按下了次鼠标按钮和中间的鼠标按钮。
  8. 7:表示同时按下了三个鼠标按钮。

兼容代码为:

var EventUtil={

 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;

}

}

}

}
  • 更多的事件信息

“DOM2级事件”规范在event对象中还提供了detail属性,用于给出有关事件的跟多信息,对于鼠标事件来说,detail中包含了一个数值,表示在给定位置上发生了多少次单击,在同一个像素上相继发生一次mousedown和一次mouseup事件算作一次单击,detail属性从1开始计数,每次单击发生后都会递增,如果鼠标在mousedown和mouseup之间移动了位置,则detail会被重置为0。

Ie也通过下列属性为鼠标事件提供了更多信息。

  1. altLeft:布尔值,表示是否按下了Alt键。
  2. ctrlLeft:布尔值,表示是否按下了ctrl建。
  3. offsetX:光标相对于目标元素边界的x坐标。
  4. offsetY:光标相对于目标元素边界的y坐标。
  5. shiftLeft:布尔值,表示是否按下了Shift键。
  • 触摸设备

ios和android设备的实现非常特别,因为这些设备米有鼠标。在面向iphone和ipod中的开发时,要注意一下几点:

  1. 不支持dbclick事件,双击浏览器窗口会放大画面,而且没有办法改变该行为。
  2. 轻击可单击元素触发mousemove事件。如果此操作会导致内如变化,将不再有其他事件发生;如果屏幕没有因此变化,那么会依次发生mousedown、mouseup和click事件。轻击不可单击的元素不会触发任何事件,可单击的元素时指那些单击产生默认操作的元素,或者那些已经被指定了onclick事件处理程序的元素
  3. Mousemove事件也会触发mouseover和mouseout事件
  • 键盘与文本事件

键盘事件:

  1. keydown:当用户按下键盘上的任何键时触发,而且如果按住不放的话,会重复触发此事件。
  2. keypress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件。按下Esc键也会触发这个事件。
  3. keyup:当用户释放键盘上的键时触发。

虽然所有元素都支持以上3个事件,但只有在用户通过文本框输入文本时才最常用到。只有一个文本事件:textInput这个事件是对keypress的补充,用意是在将文本显示给用户之前更容易拦截文本。在文本插入文本框之前会触发textIput事件。

在用户按下了一个键盘上的字符键时,首先会触发keydown事件,然后紧跟着是keypress事件,最后会触发keyup事件,其中,keydown和keypress都是文本框发生变化之前被触发的,而keyup事件则是在文本框已经发生变化之后被触发的。

  • 键码

在发生keydown和keyup事件时,event对象的keyCode属性中会包含一个代码,与键盘上一个特定的键对应。对数字字母符键,keyCode属性的值和ASCII码中对应小写字母或数字的编码相同。

  • 字符编码

IE9、Firefox、Chrome和Safari的event对象都支持一个charCode属性,这个属性只有在发生keypress事件时才包含值,而且这个值是按下的那个键所代表字符的ASCII编码,此时的keyCode编码,要想以跨浏览器的方式取得字符串编码,必须首先检测charCode属性是否可用,而且可用则使用keyCode。

  var EventUtil={

   getCharCode:function(event){

     if(typeod event.charCode==”number”){

   return event,oharCode;

}else {

  Return event.keyCode;

}

}

}
  • DOM3级变化

尽管所有浏览器都实现了某种形式的键盘事件,DOM3级事件还是做出了一些改变,DOM3级事件中的键盘事件,不再包含charCode属性,而是包含两个新属性:key和char。

其中,key属性是为了取代keyCode而新增的,它的值是一个字符串,在按下某个字符键时,key的值就是相应的文本字符,在按下非字符键时,key的值是相应键的名,而char属性在按下字符键时行为与key相同,但在按下非字符键时值为null。

DOM3级事件还添加了一个名为location的属性,这是一个数值,表示按下了是吗位置上的键:0表示默认键盘,1表示左侧位置,2表示右侧位置,3表示数字小键盘,4表示移动设备键盘,5表示手柄,ie9支持这个属性,Safari和Chrome支持名为keyLocation的等价属性,但有bug:值始终是0,除非按下了数字键盘。

  • textInput事件

“DOM3级事件”规范中引入了一个新事件,名为textInput,根据规范,当用户在可编辑区域中输入字符串时,就会触发这个事件,这个用于替代keypress的textInput事件的行为稍有不同,区别之一就是任何可以获得焦点的元素都可以触发keypress事件,但只有可编辑区域才能触发textInput事件,区别之二是textInput事件只会在用户按下能够输入实际字符的键时才会被触发,而keypress事件则在按下那些能够影响文本显示的键时也会触发。事件上event对象上还有一个属性,叫inputMethod,表示把文本输入到文本框中的方式:

    1. 0:表示浏览器不确定是怎么输入的。
    2. 1:表示是使用键盘输入的。
    3. 2:表示文本是粘贴进来的。
    4. 3:表示文本是拖放进来的。
    5. 4:表示文本是使用IME输入的。
    6. 5:表示文本是通过在表单中选择某一项输入的。
    7. 6:表示文本是通过手写输入的。
    8. 7:表示文本是通过语音输入的。
    9. 8:表示文本是通过几种方法组合输入的。
    10. 9:表示文本是通过脚本输入的。

使用这个属性可以确定文本是如何输入到控件中的,从而可以验证其有效性,支持textInput属性的流量器有ie9+、Safari和Chrome,只有ie支持inputMethod属性。

  • 变动事件

DOM2级的变动事件能在DOM中的某一部分发生变化时给出提示,变动事件时为XML或HTML DOM设计的,并不特定于某种语言,DOM2级定义了如下变动事件:

  1. DOMSubtreeModified:在DOM结构中发生任何变化时触发。这个事件在其任何事件后都会触发。
  2. DOMNodeInserted:在一个节点作为子节点被插入到另一个节点中触发。
  3. DOMNodeRemoved:在节点从其父节点中被移除时触发,
  4. DOMNodeInsertedIntoDocument:在一个节点被直接插入文档或通过子树插入文档之后触发,这个事件在DOMNodeInserted之后触发。
  5. DOMnodeRemovedFromDocument:在一个节点被直接从文档中移除或通过子树间接插入文档之后触发,这个事件在DOMNodeInserted之后触发。
  6. DOMAttrModified:在特性被修改之后触发。
  7. DOMCharacterDataModified:在文本节点的值发生变化时触发。
时间: 2024-11-07 19:17:02

事件(三)的相关文章

javaScript中的事件三

javaScript中的事件三 先看两种错误的写法,他们的目的都是:添加两个事件: 错误方式一: window.onload=function (){ alert('event 1'); } window.onload=function (){ alert('event 2') } 错误方式二: window.onload=function (){ var obj=document.getElementById("but"); obj.onclick=function(){ alert

HTML 事件(三) 事件流与事件委托

本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4. HTML 事件(四) 模拟事件操作[未发布] 目录 1. 事件流 1.1 何为事件流 1.2 事件流的三个阶段 1.3 addEventListener()注册事件流的阶段 1.4 阻止事件流的传播 2. 事件委托 2.1 何为事件委托 2.2 ul.li场景示例 2.3 JQuery的事件委托

javascript - 工作笔记 (事件三)

有关定义就不多说了,事件分两种 一,冒泡型事件 这是IE浏览器中事件模型的实现,顾名思义,就像水中的泡一样,自底而上,其经过的父元素都会触发对应的事件. 即:触发元素的父元素先于触发元素触发,看demo 二,捕获型事件   这是Netscape 中的实现,它刚好与冒泡型相反,它从元素的顶部向下传递,最终到触发元素. 即:触发元素先于父元素触发,看demo 在上面两个demo中,我们在触发元素和其父元素都绑定的相同的事件,然后触发p元素,可以很清楚的看明白这两种方式的区别. w3c为了兼容两者,它

委托和事件(三)

C#中的委托和事件 引言 如果你看过了 C#中的委托和事件 一文,我想你对委托和事件已经有了一个基本的认识.但那些远不是委托和事件的全部内容,还有很多的地方没有涉及.本文将讨论委托和事件一些更为细节的问题,包括一些大家常问到的问题,以及事件访问器.异常处理.超时处理和异步方法调用等内容. 为什么要使用事件而不是委托变量? 在 C#中的委托和事件 中,我提出了两个为什么在类型中使用事件向外部提供方法注册,而不是直接使用委托变量的原因.主要是从封装性和易用性上去考虑,但是还漏掉了一点,事件应该由事件

在cocos2d-js实现自动绑定cocostudioUI控件与事件(三)

一.为cc.Node类型节点注册触摸事件 演示常规方式为cc.Node类型注册触摸事件 ctor: function() { ... this._label = new ... cc.eventManager.addListener({ event: cc.EventListener.TOUCH_ONE_BY_ONE, swallowTouches: true, onTouchBegan: this.onTouchBegan, onTouchMoved: this.onTouchMoved, o

js中事件三阶段

先贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>冒泡</title> <style> #a{ width: 300px; height:300px; background-color: cadetblue; } #b{ width: 200px; height:200px; bac

事件(1)

事件三要素 事件源:事件发生的来源 事件:行为(点击,触摸...) 监听器:当事件发送时,所要做的事情  onClickListener(单击事件) 组件.setOnClickListener(new OnClickListener(){ @Override public void onClick(View v) { String str=et.getText().toString(); tv.setText(str); } }); 1 public class Click extends Ac

关于JavaScript中注册和移除事件

为元素注册事件的方式:3个 1. 对象.on+"事件类型名字"=事件处理函数(命名函数或者匿名函数) 例子: document.getElementById("btn").onclick=function(){}; document.getElementById("btn")["on"+"click"]=function(){}; 2. 对象.addEventListener("事件类型名字&qu

DOM事件探秘

#事件流 事件捕获:由document向事件触发的元素捕获 事件冒泡:由触发事件的元素向上级触发 #事件处理程序 HTML事件处理程序 <input type="button" value="按钮" onclick="alert('hello world')"></input> 或者 <script type="text/javascript"> function showMes(){ al

JS基础——事件对象event

事件为什么会是对象呢?先了解一下事件处理 一.事件处理 JS在事件处理函数中提供了事件对象,帮助处理鼠标和键盘事件.同时还可以修改一些事件的捕获和冒泡流的函数. 事件处理分为三部分:对象.事件处理函数=函数 document.onclick=function(){ alert(this.value); //this代表着在该作用域中离它最近的对象. } 以上事件处理中,document为对象,click是事件处理类型,onclick为事件处理函数.function()为匿名函数,用于触发后执行.