Professional JS(13.4.3Mouse and Wheel/Keyboard and Text/composition/Mutation/HTML5 Events[part])

1.Additional Event Information

①The DOM Level 2 Events specification provides the detail property on the event object to give additonal information about an event.For mouse events,detail contains a number indicating how many times a click has occurred at the given location.Clicks are considered to be a mousedown event followed by a mouseup event at the same pixel loaction.The value of detail starts at 1 and is incremented every time a click occurs.If the mouse is moved between mousedown and mouseup,then detail to set back to 0.

2.The mousewheel Event

+①The event object for the mousewheel event contains all standard information about mouse events and an additional property called wheelDelta.When the mouse wheel is rolled toward the front of the mouse,wheelDelta is positive multiple of 120;when the mouse wheel is rolled toward the rear(朝后) of the mouse,whellDelta is a negative multiple of 120.IE 6.0+,Chrome,Safari,Opera支持这个属性。

//在发生mousewheel事件时显示wheelDelta的值
EventUtil.addHandler(document,'mousewheel',function(event){
event=EventUtil.getEvent(event);
alert(event.wheelDelta);
});

+②One thing to be careful of:in Opera 9.5-,the values for wheelDelta are reversed.If you plan on supporting eariler versions of Opera,you'll need to browser detection to determine the actual value.

EventUtil.addHandler(document,'mousewheel',function(event){
event=EventUtil.getEvent(event);
var delta=(client.engine.opera && client.engine.opera <9.5 ? -event.wheelDelta :event.wheelDelta);
alert(delta);
});

+③Firefox支持一个名为DOMMouseScroll的类似事件，也是在鼠标滚轮滚动时触发的。有关鼠标滚动的信息保存在detail属性中，当向前滚动鼠标滚轮时，这个属性的值是-3的倍数，当向后滚动鼠标滚轮时，这个属性的值是3的倍数。

EventUtil.addHandler(window,'DOMMouseScroll',function(event){
event=EventUtil.getEvent(event);
alert(event.detail);
});

+④A cross-browser solution.

var EventUtil={
getWheelDelta:function(event){
//more codes here

//先判断是否拥有wheelDelta property(mousewheel事件)
if(event.wheelDelta){
//接着判断浏览器版本是否为  Opera 9.5-
return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta :event.wheelDelta);
}else{
//说明是Firefox中的DOMMouseScroll事件，其属性为detail
return -event.detail*40;
}
},
//more codes here

};

+⑤有了上述这个方法，就可以将相同的事件处理程序指定给mousewheel和DOMMouseScroll事件。

(function(){
function handleMouseWheel(event){
event=EventUtil.getEvent(event);
var delta=EventUtil.getWheelDelta(event);
alert(delta);
}
EventUtil.addHandler(document,'mousewheel',handleMouseWheel);
EventUtil.addHandler(document,'DOMMouseScroll',handleMouseWheel);
})();

3.Touch Device Support

①Touch devices running iOS or Andriod have interesting implementations,because,of course,there is no mouse to interact with.When developing for touch devices,keep the following in mind:

a)The dblclick event is not supported at all.Double-clicking on the browser window zooms in(放大),and there is no way to override(覆盖) the behavior.

b)Tapping on(轻轻单击) a clickable element causes the mousemove event to fire.If content changes as a result of this action,no further events are fired;if there are no changes to the screen,then the mousedown,mouseup,and click event fire in order.No events are fired when tapping on a nonclickable element.Clickable elements are defined as those that have a default action when clicked(such as links) or elements that have an onclick event handler assigned.

c)The mousemove event also fires mouseover and mouseout events.

d)the mousewheel and scroll events fire when two fingers are on the screen and the page is scrolled as the result of finger movement.

4.Keyboard and Text Events

①3个键盘事件：keydown–任意键/keypress—-字符键+Esc/keyup释放

②keydown/keypress如果按住不放，会重复触发该事件。Safari 3.1- 当用户按下非字符键时也触发keypress

③键盘事件和鼠标事件一样，都支持相同的修改键。而且，键盘事件的事件对象中也有shiftKey,ctrlKey,altKey和metaKey属性。IE不支持metaKey。

5.DOM Level 3 Changes

①The key property is intended as a replacement for keyCode and contains a string.When a character key is pressed,the value of key is equal to the text character(for example,'k' or 'M');when a noncharacter key is pressed,the value of the key is the name of the key(for example,'Shift' or 'Down').The char property behaves the same as key when a character key is pressed and is set to null when a noncharacter key is pressed.

+②IE 9 supports the key property but not the char property.Safari 5 and Chrome support calles keyIdentifier that returns the same value that key would in the case of noncharacter keys(such as shift).For character keys,keyIdentifier returns the character code as a string in the format 'U+0000' to indicate the Unicode value.【不推荐使用】

var textbox=document.getElementById('myText');
EventUtil.addHandler(textbox,'keypress',function(event){
event=EventUtil.getEvent(event);
var identifier=event.key || event.keyIdentifier;
if(identifier){
alert(identifier);
}
});

+③DOM3级事件添加了一个名为location的属性，是一个数值，表示按下了什么位置的键：0—默认键盘，1—左侧位置，2—右侧位置，3—数字小键盘，4—移动设备键盘，5—手柄。IE9支持这个属性，Safari和Chrome支持名为keyLocation的等价属性，但有bug—-值始终是0，除非按下数字小键盘（3）【不推荐使用】

var textbox=document.getElementById('myText');
EventUtil.addHandler(textbox,'keypress',function(event){
event=EventUtil.getEvent(event);
var loc=event.location || event.keyLocation;
if(loc){
alert(loc);
}
});

+④The last addition to the event object is the getModifierState() method.This method accepts a single argument,a string equal to Shift,Control,Alt,AltGraph,or Meta,which indicates the modifier key to check.The method returns true if the given modifier is active(the key is being held down) or false if not.IE 9 is the only browser to support the getModifierState() method.

var textbox=document.getEleme
e2a6
ntById('myText');
EventUtil.addHandler(textbox,'keypress',function(event){
event=EventUtil.getEvent(event);
if(event.getModifierState){
alert(event.getModifierState('Shift'));
}
});

6.The textInput Events

①”DOM3级事件”规范中引入了一个名叫textInput的事件。当用户在可编辑区域中输入字符时，就会触发该事件。

②keypress和textInput的区别：

a)任何获得焦点的元素均可触发keypress事件，但只有在编辑区域才能触发textInput事件

b)当你输入一些能够影响文本显示的键（如：退格）也会触发keypress事件，而textInput事件只会在用户输入实际字符的键时才被触发。

+③

var textbox=document.getElementById('myText');
EventUtil.addHandler(textbox,'textInput',function(event){
event=EventUtil.getEvent(event);
alert(event.data);
});

④event对象还有个inputMethod属性，表示将文本输入至文本框的方式，有10种。支持textInput属性的浏览器：IE 9+,Safari和Chrome。只有IE支持inputMethod属性。

+7.Composition Events(复合事件)

①IE 9+是唯一支持复合事件的浏览器（-2011）。

var textbox=document.getElementById('myText');
EventUtil.addHandler(textbox,'compositionstart',function(event){
event=EventUtil.getEvent(event);
alert(event.data);
});
EventUtil.addHandler(textbox,'compositionupdate',function(event){
event=EventUtil.getEvent(event);
alert(event.data);
});
EventUtil.addHandler(textbox,'compositionend',function(event){
event=EventUtil.getEvent(event);
alert(event.data);
});

var isSupported=document.implementation.hasFeature('CompositionEvent','3.0');

8.Mutation Events(变动事件)

+①DOM2级定义了如下变动事件：

a)DOMSubtreeModified：在DOM结构中发生任何变化时触发。这个事件在其他任何事件触发后都会触发。Firefox 3+,Safari 3+,Chrome,iE 9

b)DOMNodeInserted：当一个节点作为子节点插入到另一个节点是触发。Firefox 3+,Safari 3+,Chrome,iE 9,Opera 9+

c)DOMNodeRemoved：当节点再其父节点移除时触发。Firefox 3+,Safari 3+,Chrome,iE 9,Opera 9+

d)DOMNodeInsertedIntoDocument：当一个节点被直接插入文档或通过子树间接插入文档之后触发。该事件在DOMNodeInserted之后触发。

e)DOMNodeRemovedFromDocument：当一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。该事件在DOMNodeRemoved之后触发。

f)DOMAttrModified：当特性被修改后触发。

g)DOMCharacterDataModified：当文本节点中的值发生变化时触发。

var isSupported=document.implementation.hasFeature('MutationEvents','2.0');

9.Node Removal

①When a node is removed from the DOM using removeChild() or replaceChild(),the DOMNodeRemoved event is fired first.The target of this event is removed node,and the event.relatedNode property contains a reference to the parent node.At the point that this event fires,the node has not yet been removed from its parent,so its parentNode property still points to the parent(same as event.relatedNode).This event bubbles,so the event can be handled at any level of the DOM.

②If the removed node has any child nodes,the deprecated(过时的，不赞成的) DOMNodeElementFromDocument event fires on each of those child nodes and then on the removed node.This event doesn't bubble,so an event handler is called only if it's attach directly to one of the child nodes.The target of this event is the child node or the node that was removed,and the event object provides no additional information.

+③After that,the DOMSubtreeModified event fires.The target of this event is the parent of the node that was removed.The event object provides no additional information about this event.

<body>
<ul id='myList'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>

/*
在这例子中，假设要删除<ul>元素，依次会触发如下事件
①在<ul>元素上触发DOMNodeRemoved事件。relatedNode属性为document.body。
②在<ul>元素上触发DOMNodeRemovedFromDocument事件。
③在作为<ul>元素中的每个子节点：<li>元素及其文本节点上触发DOMNodeRemovedFromDocument事件。
④在被删元素的父元素document.body上触发DOMSubtreeModified事件。
*/

EventUtil.addHandler(window,'load',function(event){
var list=document.getElementById('myList');
//因为DOMNodeRemoved事件和DOMSubtreeModified事件都会冒泡，因此第一个参数是document
EventUtil.addHandler(document,'DOMNodeRemoved',function(event){
alert(event.type);
alert(event.target);
alert(event.relatedTarget);
});
EventUtil.addHandler(document,'DOMSubtreeModified',function(event){
alert(event.type);
alert(event.target);
});
//DOMNodeRemovedFromDocument不会冒泡，因此将第一个参数设置为<ul>元素中的第一个子节点
EventUtil.addHandler(list.firstChild,'DOMNodeRemovedFromDocument',function(event){
alert(event.type);
alert(event.target);
});
list.parentNode.removeChild(list);
});

10.Node Insertion

①When a node is inserted into the DOM using appendChild(),replaceChild(), or insertBefore(),the DOMNodeInserted event is fired first.The target of this event is the inserted node,and the event.relatedNode property contains a reference to the parent node.At the point that this event fires,the node has already been added to the new parent.This event bubbles,so the event can be handled at any level of the DOM.

②Next,the deprecated DOMNodeInsertedIntoDocument event fires on the newly inserted node.This event doesn't bubble,so the event handler must be attached to the node before it is inserted.The target of this event is the inserted node,and the event object provides no additional information.

+③The last event to fire is DOMSubtreeModified,which fires on the parent node of the newly inserted node.

EventUtil.addHandler(window,'load',function(event){
var list=document.getElementById('myList');
var item=document.createElement('li');
item.appendChild(document.createTextNode('Item 4'));
EventUtil.addHandler(document,'DOMNodeInserted',function(event){
alert(event.type);
alert(event.target);
alert(event.relatedTarget);
});
EventUtil.addHandler(document,'DOMSubtreeModified',function(event){
alert(event.type);
alert(event.target);
});
EventUtil.addHandler(item,'DOMNodeInsertdIntoDocument',function(event){
alert(event.type);
alert(event.target);
});
list.appendChild(item);
});

11.HTML5 Events

①contentmenu事件，表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单。

+②The contentmenu event bubbles,so a single event handler can be assigned to a document that handles all such events for the page.The target of the event is the element that was acted on.This event can be canceled in all browsers,using event.preventDefault() in DOM-complicant browsers and setting event.returnValue to false in IE 8-.The contextmenu event is considered a mouse event and so has full of the properties related to the cursor position.Typically,a custom context menu is displayed using an oncontextmenu event handler and hidden again using the onclick event handler.

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]=handler;
}
},
removeHandler: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;
}
}
};

EventUtil.addHandler(window,'load',function(event){
//获得div元素的引用
var div=document.getElementById('myDiv');
/*
为div元素匹配一个上下文菜单，效果：当你右击(window中)[Ctrl+单击---Mac]div元素
区域时，触发一个与之匹配的"菜单"。
*/
EventUtil.addHandler(div,'contextmenu',function(event){
event=EventUtil.getEvent(event);
//要想拥有上下文菜单，则先要屏蔽掉原来的默认菜单，也是平常情况右击，显示的一个默认菜单。
EventUtil.preventDefault(event);
//上下文菜单与div元素建立合作关系（位置+形态）
var menu=document.getElementById('myMenu');
menu.style.left=event.clientX+'px';
menu.style.top=event.clientY+'px';
menu.style.visibility='visible';
});
//当用户单击在视口的任何区域，则将div配套的菜单隐藏起来。
EventUtil.addHandler(document,'click',function(event){
document.getElementById('myMenu').style.visibility='hidden';
});
});