事件

Posted 2020-09-10 核桃大号

• 相关元素

在发生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. 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：在文本节点的值发生变化时触发。