AJax技术

jQuery中的100个技巧(4)

字号+ 作者:H5之家 来源:H5之家 2017-02-24 10:01 我要评论( )

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

<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 &gt; 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来触发。举例如下:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 用AJAX返回HTML片段中的JavaScript脚本

    用AJAX返回HTML片段中的JavaScript脚本

    2017-02-23 08:00

  • jQuery $.ajax .abort() 大猫 (Madao)

    jQuery $.ajax .abort() 大猫 (Madao)

    2017-02-20 09:00

  • FileUpload using Jquery Ajax and Generic Handler

    FileUpload using Jquery Ajax and Generic Handler

    2017-02-20 08:03

  • MagicSuggest dynamic ajax source

    MagicSuggest dynamic ajax source

    2017-02-19 16:00

网友点评