Zepto.js-事件处理

时间:2022-07-31 01:10:06

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

Zepto.js-事件处理的更多相关文章

  1. zepto.js的事件处理

    能够深入理解zepto对事件的处理,那么整个JS的事件处理就应该差不多合格了,事件处理是JS语言的一个难点. 1. 首先来看$.event函数. JS中有很多事件,都是已经定义好了,我们直接调用就可以 ...

  2. 学习zepto.js(对象方法)[5]

    继续说. clone: 该方法不接收任何参数,会返回对象中的所有元素集合,但不会对象绑定的事件. var $temp = $("div").clone(); //并不接收任何参数. ...

  3. 学习zepto.js(对象方法)[3]

    继续说zepto里attributes的相关操作. attr,removeAttr,prop这三个方法. attr(): 三种用途 get: 返回值为一个string字符串 $("<s ...

  4. 将jquery&period;shCircleLoader插件修改为zepto&period;js兼容

    经过查阅资料zepto 和 jquery 的区别后发现是 (1)zepto.js  删去了 jquery 的 innerHeight() 和 innerWidth() 属性  (2)zepto.js和 ...

  5. scroll事件实现监控滚动条并分页显示示例(zepto&period;js)

    scroll事件实现监控滚动条并分页显示示例(zepto.js  ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...

  6. 学习zepto&period;js&lpar;Hello World&rpar;

    Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 昨天听说了zepto.js,正好最近也比较闲 ...

  7. Zepto&period;js touch模块深入分析

    目的:记录 Zepto.js touch模块 源码阅读 源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely ...

  8. 使用backbone&period;js、zepto&period;js和trigger&period;io开发HTML5 App

    为了力求运行速度快.响应迅即,我们推荐使用backbone.js和zepto.js. 为了让这个过程更有意思,我们开发了一个小小的示例项目,使用CSS重置样式.Backbone.js和带转场效果的几个 ...

  9. 移动开发js库Zepto&period;js应用详解

    从哪里下载 Zepto 地址:http://zeptojs.com/ 中文版地址:http://www.css88.com/doc/zeptojs_api/ 这个问题看起来很蠢,从官网下载不就行了嘛! ...

  10. zepto&period;js &plus; iscroll&period;js上拉加载 下拉加载的 移动端 新闻列表页面

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

随机推荐

  1. java中集合类中Collection接口中的List接口的常用方法熟悉

    1:集合类,在java语言中的java.util包提供了一些集合类,这些集合类又被称作容器. 2:区别集合类和数组.(1)数组的长度是固定的,集合的长度是可变的.(2)数组是用来存放基本数据类型的,集 ...

  2. python 反模式

    不使用 pythonic 的循环: l = [1,2,3] #Bad for i in range(0,len(list)): le = l[i] print(i,le) #Good for i,le ...

  3. kali2 vmtools

    root@kali:~# cat /etc/apt/sources.list# Regular Repositoriesdeb http://http.kali.org/kali sana main ...

  4. UVa 12171 &lpar;离散化 floodfill&rpar; Sculpture

    题意: 三维空间中有n个长方体组成的雕塑,求表面积和体积. 分析: 我们可以在最外边加一圈“空气”,然后求空气的连通块的体积,最后用总体积减去即是雕塑的体积. 还有一个很“严重”的问题就是5003所占 ...

  5. kcachegrind gui for callgrind

    DocumentationScreenshotsDownload/SourcesLinksRoadmapBugs & Wishes This is the homepage of the pr ...

  6. 自己开发轻量级ORM(二)

    上一篇简单的对轻量级ORM开发开了个头.这篇主要聊下ORM框架的设计思路. ORM本质上是对数据库操作的抽象.大体上我将其分为对数据结构的抽象和对执行方法的抽象. 我的ORM设计图: ORM框架需要完 ...

  7. &OpenCurlyDoubleQuote;一切都是消息”--MSF(消息服务框架)之【请求-响应】模式

    在前一篇, “一切都是消息”--MSF(消息服务框架)入门简介, 我们介绍了MSF基于异步通信,支持请求-响应通信模式和发布-订阅通信模式,并且介绍了如何获取MSF.今天,我们来看看如何使用MSF来做 ...

  8. Jquery根据滚动条显示返回按钮

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  9. Html中,id、name、class、type的区别

    <input type="text" name="name" id="name" class="txt"> ...

  10. LeetCode OJ 117&period; Populating Next Right Pointers in Each Node II

    题目 Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode * ...