国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

王笑朝 / 780人閱讀

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

shakejs是一個搖一搖的工具

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

使用方法 
 //引入

初始化
var myShakeEvent = new Shake({
    threshold: 15, // 搖動閾值
    timeout: 1000 // 事件發(fā)生頻率，是可選值
});

開始監(jiān)聽
myShakeEvent.start();

綁定函數(shù)
window.addEventListener("shake", shakeEventDidOccur, false);
    function shakeEventDidOccur () {//回調(diào)函數(shù)
    alert("shake!");// do it;
}
正式內(nèi)容

大家都知道，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中。

觸發(fā)自定義事件 
if (timeDifference > this.options.timeout) {
       window.dispatchEvent(this.event);
       this.lastTime = new Date();
}

上面是滿足頻率后就出發(fā)自定義的事件 dispatchEvent(this.event) 這就是觸發(fā)事件的方法。

自定義事件相關(guān)資料：
http://davidwalsh.name/customevent
http://www.open-open.com/lib/view/open1342696614323.html

addEventListener的第二個參數(shù)

一般情況下 大家在使用addEventListener這個方法的時候，在第二個參數(shù)上會使用一個方法，但是，還可以傳入一個對象，并且對象中handleEvent為事件處理函數(shù)，看看在shakejs中是怎么處理的

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

上面是執(zhí)行start之后，來監(jiān)聽，devicemotion，而第二個參數(shù)是個this，也就是shake對象，那么來看看shake對象中有沒有handleEvent這個事件呢，往下面找，最后面 果然有，是這樣的，

Shake.prototype.handleEvent = function (e) {
        if (typeof (this[e.type]) === "function") {
            return this[e.type](e); //執(zhí)行
        }
    };

這里的e.type就是上面監(jiān)聽的devicemotion事件，而在shake中又有這樣名字的一個函數(shù)，return 這句也就執(zhí)行了這個函數(shù)。

好了 關(guān)于更多的關(guān)于自定義事件和這個搖一搖模塊的信息，可以看這篇里面提供的資料，或者直接翻看github項目地址。謝謝。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85575.html

相關(guān)文章

  • 原生js之DOM事件相關(guān)

    摘要：而由于級標準中并沒有定義事件相關(guān)的內(nèi)容，所以事件級別只包括級，級和級三種。此屬性返回當前事件所綁定的對象。自定義事件可以綁定到任意元素上，此處選擇只是為了演示方便。 前端學習的東西有很多，現(xiàn)代前端開發(fā)，前端工程化的東西要懂，基礎(chǔ)的原生js也要懂，畢竟，框架都是有生命周期的，更替非常快，然而卻有這么一個框架，它是最輕量的前端框架，每個瀏覽器都內(nèi)置，它叫vanilla.js。好吧，其實va...

    learning 評論0 收藏0

  • javascript自定義事件淺析

    摘要：首先來看看什么是自定義事件讓函數(shù)能夠具備事件的某些特性。其實自定義事件在一些主流的類庫中都有實現(xiàn)，后續(xù)會分析具體的實現(xiàn)方法。今天，我們就先用簡單的例子來實現(xiàn)自定義事件的功能。 在團隊協(xié)作的很多情況下，某個js的函數(shù)會根據(jù)不斷增加的需求進而不斷增加功能，如果功能需求累積過多，我們就很難把控自己在這個函數(shù)中新定義的變量會不會覆蓋掉之前的定義。如： function action(){ ...

    miya 評論0 收藏0

  • 整理DOM事件相關(guān)知識點

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

    shenhualong 評論0 收藏0

  • 整理DOM事件相關(guān)知識點

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

    red_bricks 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<