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

王笑朝发布于2019-08-21 10:27 / 600人阅读

摘要：并没有这个事件，那就用到了自定义事件这个东西了。先看看自定义事件在中的代码自定义事件名称是否冒泡是否可以停止捕获上面整个的代码，做了一个兼容性的处理。触发自定义事件上面是满足频率后就出发自定义的事件这就是触发事件的方法。

shakejs是一个摇一摇的工具

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

使用方法

 //引入

初始化
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项目地址。谢谢。

混合云私有云自定义事件 js 自定义触发事件从数据分析来看数据仓库定义及特点

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85575.html

原生js之DOM事件相关

摘要：而由于级标准中并没有定义事件相关的内容，所以事件级别只包括级，级和级三种。此属性返回当前事件所绑定的对象。自定义事件可以绑定到任意元素上，此处选择只是为了演示方便。前端学习的东西有很多，现代前端开发，前端工程化的东西要懂，基础的原生js也要懂，毕竟，框架都是有生命周期的，更替非常快，然而却有这么一个框架，它是最轻量的前端框架，每个浏览器都内置，它叫vanilla.js。好吧，其实va...

learning 2019-08-22 13:51 评论0 收藏0
javascript自定义事件浅析

摘要：首先来看看什么是自定义事件让函数能够具备事件的某些特性。其实自定义事件在一些主流的类库中都有实现，后续会分析具体的实现方法。今天，我们就先用简单的例子来实现自定义事件的功能。在团队协作的很多情况下，某个js的函数会根据不断增加的需求进而不断增加功能，如果功能需求累积过多，我们就很难把控自己在这个函数中新定义的变量会不会覆盖掉之前的定义。如： function action(){ ...

miya 2019-08-21 10:46 评论0 收藏0
扩展 HT for Web 之 HTML5 表格组件的 Renderer 和 Editor

摘要：那么类中如何添加模块呢，只需要在方法中类的方法定义上，添加这行代码，并在方法定义上添加事件对应的函数，再在构造函数中调用类的方法。在HT for Web提供了一下几种常用的Editor，分别是： slider：拉条 color picker：颜色选择器 enum：枚举类型 boolean：真假编辑器 string：普通的文本编辑器除了这几种常用编辑器之外，用户还可以通过继承h...

brianway 2019-08-05 18:17 评论0 收藏0
整理DOM事件相关知识点

摘要：事件相关内容当用户与浏览器发生的一些交互时如果希望去获得用户行为就需要借助事件来完成事件部分内容在中重要性不言而喻罗列需要了解与事件相关的知识如下这也是面试中遇到的问题事件的级别事件模型事件流事件处理程序描述事件捕获冒泡的具体流程对象常见的 DOM事件相关内容当用户与浏览器发生的一些交互时, 如果希望去获得用户行为, 就需要借助事件来完成. 事件部分内容在 JS中重要性不言而喻. ...

shenhualong 2019-08-02 15:26 评论0 收藏0
整理DOM事件相关知识点

摘要：事件相关内容当用户与浏览器发生的一些交互时如果希望去获得用户行为就需要借助事件来完成事件部分内容在中重要性不言而喻罗列需要了解与事件相关的知识如下这也是面试中遇到的问题事件的级别事件模型事件流事件处理程序描述事件捕获冒泡的具体流程对象常见的 DOM事件相关内容当用户与浏览器发生的一些交互时, 如果希望去获得用户行为, 就需要借助事件来完成. 事件部分内容在 JS中重要性不言而喻. ...

red_bricks 2019-08-23 18:25 评论0 收藏0