从shakejs来看自定义事件，及addEventListener

shakejs是一个摇一摇的工具

gitHub : https://github.com/alexgibson/shake.js

使用方法

<script src="shake.js"></script> //引入

初始化
var myShakeEvent = new Shake({
    threshold: 15, // 摇动阈值
    timeout: 1000 // 事件发生频率，是可选值
});

开始监听
myShakeEvent.start();

绑定函数
window.addEventListener('shake', shakeEventDidOccur, false);
    function shakeEventDidOccur () {//回调函数
    alert('shake!');// do it;
}

正式内容

大家都知道，h5提供了一个DeviceOrientation特性，这个特性，提供了两个事件，分别是：deviceOrientation 方向上，deviceMotion 加速度上。并没有shake这个事件，那就用到了自定义事件这个东西了。先看看自定义事件在shakejs中的代码

if (typeof document.CustomEvent === 'function') {
       this.event = new document.CustomEvent('shake', {//自定义事件名称
           bubbles: true,//是否冒泡
           cancelable: true//是否可以停止捕获
       });
} else if (typeof document.createEvent === 'function') {
       this.event = document.createEvent('Event');
       this.event.initEvent('shake', true, true);
} else {
       return false;
}

上面整个的代码，做了一个兼容性的处理。这样就定义了一个叫shake的事件，返回一个事件对象，放到了this.event中。

触发自定义事件

if (timeDifference > this.options.timeout) {
       window.dispatchEvent(this.event);
       this.lastTime = new Date();
}

上面是满足频率后就出发自定义的事件 dispatchEvent(this.event) 这就是触发事件的方法。

自定义事件相关资料：
http://davidwalsh.name/customevent
http://www.open-open.com/lib/view/open1342696614323.html

addEventListener的第二个参数

一般情况下 大家在使用addEventListener这个方法的时候，在第二个参数上会使用一个方法，但是，还可以传入一个对象，并且对象中handleEvent为事件处理函数，看看在shakejs中是怎么处理的

Shake.prototype.start = function () {
        this.reset();
        if (this.hasDeviceMotion) {
            alert(this)
            window.addEventListener('devicemotion', this, false);
        }
    };

上面是执行start之后，来监听，devicemotion，而第二个参数是个this，也就是shake对象，那么来看看shake对象中有没有handleEvent这个事件呢，往下面找，最后面 果然有，是这样的，

Shake.prototype.handleEvent = function (e) {
        if (typeof (this[e.type]) === 'function') {
            return this[e.type](e); //执行
        }
    };

这里的e.type就是上面监听的devicemotion事件，而在shake中又有这样名字的一个函数，return 这句也就执行了这个函数。

---

好了 关于更多的关于自定义事件和这个摇一摇模块的信息，可以看这篇里面提供的资料，或者直接翻看github项目地址。谢谢。