Zepto.js-事件處理

http://www.webdevs.cn/article/68.html     web開發網

 

事件

$.Event $.Event(type, [properties]) ⇒ event

建立並初始化一個指定的DOM事件。若是給定properties對象，使用它來擴展出新的事件對象。默認狀況下，事件被設置爲冒泡方式；這個能夠經過設置bubbles爲false來關閉。

$.Event('mylib:change', {bubbles: false}); 

觸發事件

trigger

一個事件初始化的函數可使用 trigger來觸發。 trigger(event, [args]) ⇒ self

在對象集合的元素上觸發指定的事件。事件能夠是一個字符串類型，也能夠是一個 經過$.Event 定義的事件對象。若是給定args參數，它會做爲參數傳遞給事件函數。

// 手動觸發 click事件 $(document).trigger('click'); $(document).on('mylib:change', function (e, pam1, pam2, pam3) { console.log('change on %o with data %s, %s', e.target, pam1, pam2); }); $(document.body).trigger('mylib:change', ['one', 'two', '3']); 

triggerHandler

triggerHandler(event, [args]) ⇒ self

像 trigger，它只在當前元素上觸發事件，但不冒泡。

// 此時input上的focus事件觸發，可是input不會獲取焦點 $("input").triggerHandler('focus'); // 此時input上的focus事件觸發，input獲取焦點 $("input").trigger('focus'); 

$.proxy

$.proxy(fn, context) ⇒ function $.proxy(context, property) ⇒ function

接受一個函數，而後返回一個新函數，而且這個新函數始終保持了特定的上下文語境，新函數中this指向context參數。另一種形式，原始的function是context對像的方法。

var obj = {name: 'Zepto'}, handler = function () { console.log("hello from + ", this.name); // this：obj參數 }; $(document).on('click', $.proxy(handler, obj)); // "hello from + " "Zepto" 

添加事件

on 添加事件處理程序到對象集合中得元素上

on(type, [selector], function(e){ ... }) ⇒ self on(type, [selector], [data], function(e){ ... }) ⇒ self v1.1+ on({ type: handler, type2: handler2, ... }, [selector]) ⇒ self on({ type: handler, type2: handler2, ... }, [selector], [data]) ⇒ self v1.1+

添加事件處理程序到對象集合中得元素上。多個事件能夠經過空格的字符串方式添加，或者以事件類型爲鍵、以函數爲值的對象 方式。若是給定css選擇器，當事件在匹配該選擇器的元素上發起時，事件纔會被觸發（愚人碼頭注：即事件委派，或者說事件代理）。

若是給定data參數，這個值將在事件處理程序執行期間被做爲有用的 event.data 屬性

事件處理程序在添加該處理程序的元素、或在給定選擇器狀況下匹配該選擇器的元素的上下文中執行(愚人碼頭注：this指向觸發事件的元素)。 當一個事件處理程序返回false，preventDefault() 和 stopPropagation()被當前事件調用的狀況下， 將防止默認瀏覽器操做，如連接。

若是false 在回調函數的位置上做爲參數傳遞給這個方法， 它至關於傳遞一個函數，這個函數直接返回false。（愚人碼頭注：即將 false 看成 function(e){ ... } 的參數，做爲 function(){ return false; } 的簡寫形式，例如： $("a.disabled").on("click", false);這至關於$("a.disabled").on("click", function(){ return false; } );）

var elem = $('#content'); elem.on('click', function (e) { //... }); elem.on('click', 'nav a', function (e) { //... }); $(document).on('click', 'a', function (e) { //... }); $(document).on('click', 'nav a', false); // 上面的簡寫形式 $("a.disabled").on("click", function () { return false; }); 

one 綁定執行一次的函數

one(type, [selector], function(e){ ... }) ⇒ self one(type, [selector], [data], function(e){ ... }) ⇒ self v1.1+ one({ type: handler, type2: handler2, ... }, [selector]) ⇒ self one({ type: handler, type2: handler2, ... }, [selector], [data]) ⇒ self v1.1+

添加一個處理事件到元素，當第一次執行事件之後，該事件將自動解除綁定，保證處理函數在每一個元素上最多執行一次。selector 和 data 等參數說明請查看.on()。

$(document).one('click', function () { console.log('我只執行一次!'); }); 

移除事件

off 移除經過 on 添加的事件

off(type, [selector], function(e){ ... }) ⇒ self off({ type: handler, type2: handler2, ... }, [selector]) ⇒ self off(type, [selector]) ⇒ self off() ⇒ self

移除經過 on 添加的事件.移除一個特定的事件處理程序， 必須經過用on()添加的那個相同的函數。不然，只經過事件類型調用此方法將移除該類型的全部處理程序。若是沒有參數，將移出當前元素上所有的註冊事件。

$(document).off('click'); $(document).off();