码迷,mamicode.com
首页 > Web开发 > 详细

jquery 深入学习笔记之一 (事件绑定)

时间:2015-07-27 11:07:31      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:jquery   事件   

【jquery 事件绑定】


1、添加元素事件绑定

(1) 添加事件为当前元素

$('p').on('click',function(){
    //code here ...
});

(2) 添加事件为未来元素(动态添加元素)

$(document父).on('click','p子',function(){
    //code here...
})

注意前后俩者对象是父子关系(只要是父子均可)

(3) 多个事件同时绑定


$(document).ready(function(){
  $("p").on({
    mouseover:function(){$(this).css("background-color","lightgray");},  
    mouseout:function(){$(this).css("background-color","lightblue");}, 
    click:function(){$(this).css("background-color","yellow");}  
  });
});



2、移除元素事件绑定



(1) 移除所有的事件

$( "p" ).off();

(2) 移除所有点击事件

$( "p" ).off( "click", "**" );

(3) 移除某个特定的绑定程序

$( "body" ).off( "click", "p", foo );

(4) 解绑某个类相关的所有事件处理程序

$(document).off(".someclass");

3. 添加元素一次事件绑定

一次触发,事件自动解除
$( "#foo" ).one( "click", function() {
  alert( "This will be displayed only once." );
});

等价于:
$("#foo").on("click", function(event){
  alert("This will be displayed only once.");
  $(this).off(event);
});











版权声明:本文为博主原创文章,未经博主允许不得转载。

jquery 深入学习笔记之一 (事件绑定)

标签:jquery   事件   

原文地址:http://blog.csdn.net/wujiangwei567/article/details/47081523

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!