從shakejs來看自定義事件，及addEventListener

王笑朝發布于2019-08-21 10:27 / 774人閱讀

摘要：并沒有這個事件，那就用到了自定義事件這個東西了。先看看自定義事件在中的代碼自定義事件名稱是否冒泡是否可以停止捕獲上面整個的代碼，做了一個兼容性的處理。觸發自定義事件上面是滿足頻率后就出發自定義的事件這就是觸發事件的方法。

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項目地址。謝謝。

云服務器 GPU云服務器自定義事件 js 自定義觸發事件從數據分析來看數據倉庫定義及特點

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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
整理DOM事件相關知識點

摘要：事件相關內容當用戶與瀏覽器發生的一些交互時如果希望去獲得用戶行為就需要借助事件來完成事件部分內容在中重要性不言而喻羅列需要了解與事件相關的知識如下這也是面試中遇到的問題事件的級別事件模型事件流事件處理程序描述事件捕獲冒泡的具體流程對象常見的 DOM事件相關內容當用戶與瀏覽器發生的一些交互時, 如果希望去獲得用戶行為, 就需要借助事件來完成. 事件部分內容在 JS中重要性不言而喻. ...

shenhualong 2019-08-02 15:26 評論0 收藏0
整理DOM事件相關知識點

摘要：事件相關內容當用戶與瀏覽器發生的一些交互時如果希望去獲得用戶行為就需要借助事件來完成事件部分內容在中重要性不言而喻羅列需要了解與事件相關的知識如下這也是面試中遇到的問題事件的級別事件模型事件流事件處理程序描述事件捕獲冒泡的具體流程對象常見的 DOM事件相關內容當用戶與瀏覽器發生的一些交互時, 如果希望去獲得用戶行為, 就需要借助事件來完成. 事件部分內容在 JS中重要性不言而喻. ...

red_bricks 2019-08-23 18:25 評論0 收藏0