事件 event

添加移除函数(removeEventListener)时三个参数保持一致，否则会失败，而且不会有错误提示
var btn = document.getElementById(“myBtn”);

btn.addEventListener(“click”, function(){

alert(this.id);

}, false);

这样是移除不了的，因为第二个匿名函数并不是同一个，也就是说匿名函数作为handle是无法取消的！

btn.removeEventListener(“click”, function(){

alert(this.id);

}, false);

object.onclick = myfunc 等同于 object.addEventListener("click", myfunc, false);
事件默认被添加到冒泡阶段，使用onclick这样方式添加的事件处理被认为是该元素对象的方法，因此this指向该对象，可以获取该元素属性，this.id
如果在HTML中指定了onclick=""事件，也可以用object.onclick获取，或者object.onclick = null 取消掉

object.addEventListener("click", myfunc, false); // 不需要 on，一个元素添加多个事件会按添加顺序触发

object.attachEvent("onclick", myfunc); // 记得要加上on，另外使用这里的this指向的是window对象，而不是元素对象，添加多个事件触发顺序相反，ie 的 attachEvent 的事件处理程序是被引用的，而不是拷贝的，所以this 总是指向 window
btn.onclick = function(){

alert(window.event.srcElement === this); //IE添加事件监听方式不同，结果也不同，应该使用event.srcelement取代this
};
btn.attachEvent(“onclick”, function(event){

alert(event.srcElement === this); //this指向window
});

object.onclick = myfunc

object.onclick = myfunc2

注意的是DOM Level 0只能添加一个处理函数，后面分配的会取代前面分配的

写在元素上的事件可以直接访问元素的attribute属性，上面三种方法都可以
<input type="button" value="haha" onclick="alert(event.type)">
<input type="button" value="haha" onclick="alert(this.type)">
<input type="button" value="haha" onclick="alert(type)">

使用传统委托方式 elem.onclick = function(){} 的话，可以使用 alert(elem.onclick) 看到哪些函数被注册了
而 addeventlistener() 方式注册的看不到，直到DOM3才有一个 eventListenerList 来储存已经注册了的处理函数

target属性指向触发事件的真正目标，而currenttarget属性指向目前事件处理函数所在的元素
document.body.onclick = function(event){
alert(event.currentTarget === document.body); //true
alert(this === document.body); //true
alert(event.target === document.getElementById(“myBtn”)); //true
};

模拟/定制事件：
事件触发器 fireEvent（ie） 和 dispatchEvent ，用来触发某个元素下的某个事件，通常情况是用户操作触发事件的
但有些时候我们需要自定义事件或者在特定情况下触发这些事件，就可以使用事件触发，大概流程如下：
Dom下：
var div = document.getElementById(“myDiv”), event;
EventUtil.addHandler(div, “myevent”, function(event) {
alert(“DIV: “ + event.detail);
});
EventUtil.addHandler(document, “myevent”, function(event) {
alert(“DOCUMENT: “ + event.detail);
});
if (document.implementation.hasFeature(“CustomEvents”, “3.0”)) {
event = document.createEvent(“CustomEvent”);
event.initCustomEvent(“myevent”, true, false, “Hello world!”);
div.dispatchEvent(event);
}
ie下：
var btn = document.getElementById(“myBtn”);
var event = document.createEventObject(); //create event object
event.screenX = 100; //initialize the event object
event.screenY = 0;
event.clientX = 0;
event.clientY = 0;
event.ctrlKey = false;
event.altKey = false;
event.shiftKey = false;
event.button = 0;
btn.fireEvent(“onclick”, event); //fire the event

应该使用CustomEvent来定制事件：
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent

事件委托：
var EventUtil = {








},
removeHandler: function(element, type, handler){







}

};

ie使用专用的事件处理机制 然而DOM规定的是另外一种，不一样，以下为取得事件信息方法：
EventUtil.getEvent = function() {

if (window.event) {

return this.formatEvent(window.event);

} else {

return EventUtil.getEvent.caller.arguments[0];

}

};

实现实现事件委托另一种思路 apply() call()

Dom3新增的事件属性和方法：
stopImmediatePropagation和stopPropagation()方法区别在于前者除了组织事件继续捕获或者冒泡之外，还会阻止其他事件处理函数运行

trusted属性为true表示事件由浏览器产生，false表示事件由开发者javascript代码触发

eventPhase属性指出事件在哪个阶段触发，1表示捕获阶段，2表示at the target，3表示冒泡阶段
var btn = document.getElementById(“myBtn”);
btn.onclick = function(event){
alert(event.eventPhase); //2
};
等于2的时候，this，target，currenttarget相等
document.body.addEventListener(“click”, function(event){
alert(event.eventPhase); //1
}, true);
document.body.onclick = function(event){

alert(event.eventPhase); //3
};
Dom3弃用了keypress事件

HTML5事件：
contentmenu事件，右键出现菜单事件，preventDefault()可以组织默认菜单弹出，用自己做的菜单替换
beforeunload事件，在unload事件之前触发，可以用于在用户推出之前确认，event.returnValue=“真的要离开了么？”可以设置确认的文字
DOMContentLoaded事件当dom加载完成就立刻触发，不用等images, JavaScript files, CSS files, or other such resources，不支持的话用setTimeout(function(){},0)来模拟
hashchange事件，当URL的hash值改变时触发
readystatechange，用来提供document或者元素加载状态信息，所有支持该事件的元素都有一个readyState属性，用来目前判断加载状态

触屏设备事件：
不支持双击事件，因为那是放大缩小，无法覆盖默认行为。
点击一个带有点击事件的元素或默认可点击的元素例如链接，会触发mousemove事件。如果点击后内容不改变就会触发mousedown，mouseup，click，如果内容改变不会触发那些事件了。
mousemove事件同时触发mouseover，mouseout
mousewheel和scroll事件当两个手指在屏幕上滑动页面时触发

指南针

orientationchange 事件在IOS设备上支持，检测手机的摆放状态，其中window.orientation属性0竖着，90向左转90度，-90向右转90度，因为这是window的事件，因此可以在body上用onorientationchange属性触发
火狐提供了一个 MozOrientation 事件，但这个事件可能将来会被取代
deviceorientation 事件监听window对象，当设备有加速器的时候可用，主要目的是提供设备目前的朝向信息，而不是运动信息。通过三个轴来判断：





当deviceorientation 事件被触发的时候，它会有五个属性：
alpha： 以设备坐标系z轴为轴，旋转alpha度。alpha的作用域为[0, 360)。
beta：以设备坐标系x轴为轴，旋转beta度。beta的作用域为[-180, 180)。
gamma：已设备坐标系y轴为轴，旋转gamma度。gamma的作用域为[-90, 90)。
absolute：返回一个布尔值，反映设备是否返回绝对值。
compassCalibrated：返回一个布尔值，反映设备的罗盘是否校准了

devicemotion 事件用来检测设备运动情况，例如手机正在下落或者被人拿着走路。有四个属性值：
acceleration — An object containing x, y, and zproperties that tells you the acceleration in each dimension without considering gravity.
accelerationIncludingGravity — An object containing x, y, and zproperties that tells you the acceleration in each dimension, including the natural acceleration of gravity in the z-axis.
interval — The amount of time, in milliseconds, that will pass before another devicemotionevent is fired. This value should be constant from event to event.
rotationRate — An object containing the alpha, beta, and gammaproperties that indicate device orientation.
使用前需要检测是否为null，因为不一定能提供相应数据 //fire the event

// 横屏监听
var updateOrientation = function() {

};
window.onorientationchange = updateOrientation;