亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

從shakejs來(lái)看自定義事件，及addEventListener

王笑朝 / 826人閱讀

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

shakejs是一個(gè)搖一搖的工具

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

使用方法 
 //引入

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

開(kāi)始監(jiān)聽(tīng)
myShakeEvent.start();

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

大家都知道，h5提供了一個(gè)DeviceOrientation特性，這個(gè)特性，提供了兩個(gè)事件，分別是：deviceOrientation 方向上，deviceMotion 加速度上。并沒(méi)有shake這個(gè)事件，那就用到了自定義事件這個(gè)東西了。先看看自定義事件在shakejs中的代碼

if (typeof document.CustomEvent === "function") {
       this.event = new document.CustomEvent("shake", {//自定義事件名稱(chēng)
           bubbles: true,//是否冒泡
           cancelable: true//是否可以停止捕獲
       });
} else if (typeof document.createEvent === "function") {
       this.event = document.createEvent("Event");
       this.event.initEvent("shake", true, true);
} else {
       return false;
}

上面整個(gè)的代碼，做了一個(gè)兼容性的處理。這樣就定義了一個(gè)叫shake的事件，返回一個(gè)事件對(duì)象，放到了this.event中。

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

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

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

addEventListener的第二個(gè)參數(shù)

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/85575.html

相關(guān)文章

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

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

    learning 評(píng)論0 收藏0

  • javascript自定義事件淺析

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

    miya 評(píng)論0 收藏0

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

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

    shenhualong 評(píng)論0 收藏0

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

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

    red_bricks 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<