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();