事件 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 = {

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;

}

}

};

 

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() {

if(window.orientation=='-90' || window.orientation=='90'){

     $('.landscape-wrap').removeClass('hide');

     console.log('为了更好的体验，请将手机/平板竖过来！');

}else{

     $('.landscape-wrap').addClass('hide');

     console.log('竖屏状态');

}

};

window.onorientationchange = updateOrientation;