<button id=>Press me!</ul> ); // There is a method that does exactly that, the one(): press.one(,function(){ alert(); }); // What this method does, is call on() behind the scenes, // with a 1 as the last argument: // press.on('click',null,null,function(){alert('I am the one and only!');}, 1);
28.模拟触发事件。
我们可以通过使用trigger模拟触发一个click事件。
<button id=>Press me!</ul> ); // Just a regular event listener: press.on(,function(e, how){ how = how || ''; alert(+ how + ); }); // Trigger the click event press.trigger(); // Trigger it with an argument press.trigger(,[]);
29.使用触摸事件。
使用触摸事件和相关的鼠标事件并没有太多不同,但是你得有一个方便的移动设备来测试会更好。看下面这个例子。
ball = $().appendTo(), startPosition = {}, elementPosition = {}; // Listen for mouse and touch events ball.on(,function(e){ e.preventDefault(); // Normalizing the touch event object e = (e.originalEvent.touches) ? e.originalEvent.touches[0] : e; // Recording current positions startPosition = {x: e.pageX, y: e.pageY}; elementPosition = {x: ball.offset().left, y: ball.offset().top}; // These event listeners will be removed later ball.on(,function(e){ e = (e.originalEvent.touches) ? e.originalEvent.touches[0] : e; ball.css({ top:elementPosition.y + (e.pageY - startPosition.y), left: elementPosition.x + (e.pageX - startPosition.x), }); }); }); ball.on(,function(){ // Removing the heavy *move listeners ball.off(); });
30.更好地使用on()/off()方法。
在jQuery1.7版本时对事件处理进行了简化,看看下面的例子吧。
<div id=> <button id=>>>>style=>Clear</button> </div> button1 = $(), button2 = $(), button3 = $(), button4 = $(), clear = $(), holder = $(); // Case 1: Direct event handling button1.on(,function(){ log(); }); // Case 2: Direct event handling of multiple events button2.on(,function(){ log(); }); // Case 3: Data passing button3.on(, Math.round(Math.random()*20), function(e){ // This will print the same number over and over again, // as the random number above is generated only once: log(+ e.data); }); // Case 4: Events with a namespace button4.on(, function(e){ log(); }); button2.on(, function(e){ log(); }); // Case 5: Using event delegation $().on(, , function(){ log.clear(); }); t; // timer clear.on({ :function(){ t = new Date(); }, :function(){ if(new Date() - t > 1000){ // The button has been held pressed // for more than a second. Turn off // the temp events $().off(); alert(); } } });
31.更快地阻止默认事件行为。
我们知道js中可以使用preventDefault()方法来阻止默认行为,但是jQuery对此提供了更简单的方法。如下:
<a href=id=>Go To Google</a> $().click(false);
32.使用event.result链接多个事件处理程序。
对一个元素绑定多个事件处理程序并不常见,而使用event.result更可以将多个事件处理程序联系起来。看下面的例子。
<button id=>点击</button> <script src=></script> <script> ); press.on(,function(){ ; }); // The second event listener has access // to what was returned from the first press.on(,function(e){ console.log(e.result + ); }); </script>
这样,控制台会输出Hip Hop!
33.创建你自己习惯的事件。
你可以使用on()方法创建自己喜欢的事件名称,然后通过trigger来触发。举例如下: