1、创建并初始化一个指定的DOM事件。如果给定properties对象,使用它来扩展出新的事件对象。默认情况下,事件被设置为冒泡方式;这个可以通过设置bubbles为false来关闭。
$.Event(type, [properties]) ⇒ event
$.Event('mylib:change',{bubbles:false});
//指定事件的名称,事件的动作
2、绑定自定义事件
$(document).bind('abc',function(){console.log(1)})
//触发
$(document).trigger('abc');
3、zepto.js的事件绑定(仅作了解不推荐使用)
【bind】
bind(type, function(e){ … }) ⇒ self
//当点击鼠标时,隐藏或显示 p 元素:
$("button").bind("click",function(){
$("p").slideToggle();
});
bind(type, [data], function(e){ … }) ⇒ self
//你可以在事件处理之前传递一些附加的数据。
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
bind({ type: handler, type2: handler2, … }) ⇒ self
$(document).ready(function(){
$("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
});
4、zepto.js事件解绑(仅作了解不推荐使用)
die() 方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序。
die(type.function(e){})
die({type:handler,type2:handler2,…})
$(document).ready(function(){
$("p").live("click",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("p").die();
});
});
如何使用 live() 方法移除事件处理程序的特定函数。
function changeSize()
{
$(this).animate({fontSize:"+=3px"});
}
function changeColor()
{
$(this).animate({letterSpacing:"+=2px"});
}
$(document).ready(function(){
$("p").live("click",changeSize);
$("p").live("click",changeColor);
$("button").click(function(){
$("p").die("click",changeSize);
});
});
5、zepto.js的事件代理(仅作了解不推荐使用)
【delegate】
delegate(‘selector’, ‘type’, function(e) {});
delegate(selector,{type:handler,type2:handler2,…})
//当点击鼠标时,隐藏或显示 p 元素:
//HTML 代码:
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>
//js代码
$(function(){
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
})
delegate这个方法可作为live()方法的替代,使得每次事件绑定到特定的DOM元素。
以下两段代码是等同的:
$("table").delegate("td", "hover", function(){ $(this).toggleClass("hover");
});
$("table").each(function(){ $("td", this).live("hover", function(){ $(this).toggleClass("hover"); });
});
推荐使用on和off
zepto.js 的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')
// observe all clicks inside #content:
elem.on('click', function(e){ ... })
// observe clicks inside navigation links in #content
elem.on('click', 'nav a', function(e){ ... })
// all clicks inside links in the document
$(document).on('click', 'a', function(e){ ... })
// disable following any navigation link on the page
$(document).on('click', 'nav a', false)
zepto.js的off用法
移除通过 on 添加的事件.移除一个特定的事件处理程序, 必须通过用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+
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+
$(document).one('click', function () {
console.log('我只执行一次!');
});
zepto.js的Touch模块
Touch events
/*
top 手按下再轻抬起
singleTap 单击
doubleTap 双击
//如果你不需要检测单击、双击,使用 tap 代替
longTap 长按(当一个元素被按住超过750ms触发)
swipe, swipeLeft, swipeRight, swipeUp, swipeDown
当元素被划过时触发。(可选择给定的方向)
*/
<style>.delete { display: none; }</style>
<ul id=items>
<li>List item 1 <span class=delete>DELETE</span></li>
<li>List item 2 <span class=delete>DELETE</span></li>
</ul>
<script>
// show delete buttons on swipe
$('#items li').swipe(function(){
$('.delete').hide()
$('.delete', this).show()
})
// delete row on tapping delete button
$('.delete').tap(function(){
$(this).parent('li').remove()
})
</script>
好吧,先说这么多,欢迎拍砖