jQuery选择器和事件

1）选择器

   $(".className")——类选择器；

   $("#IDName")——ID选择器；

   $("ElementTagName")——元素名选择器；

   更多选择器点击打开链接

2）事件

   click()——点击事件；

   dblclick()——双击事件；

   mouseenter()——鼠标进入事件；

   mouseleave()——鼠标离开事件；

   更多事件点击打开链接

3）事件的绑定和解绑

   bind()、on()——事件绑定;

   unbind()、off()——事件解绑；

   注意on()、off()需要在jQuery1.7版本以上；

事件绑定

$(document).ready(function(){
    $("#btn1").bind("click",clickHandler);
    $("#btn1").bind("click",clickHandler2);
    $("#btn1").unbind("click",clickHandler2);
});

function clickHandler(e){
    console.log(e.target.innerHTML);

}function clickHandler2(e){
    console.log(e.target.id);
}
 
  
 4)事件的目标 
  
 
  
currentTarget与target的区别:
 
  
1、target发生在事件流的目标阶段，而currentTarget发生在事件流的整个阶段（捕获、目标和冒泡阶段）;
 2、只有当目标流处于目标阶段的时候才相同;
 3、而当事件流处于捕获和冒泡阶段时，target指向被点击的对象，而currentTarget指向当前事件活动的对象，通常是事件的祖元素。
 
  
5）事件的冒泡
 
  
event.stopImmediatePropagation()——阻止所有元素的事件冒泡；
 
  
event.stopPropagation()——阻止父级元素的事件冒泡；
 
  
 
  



    
    
    
    
    



    

        
广州恒大
        
山东鲁能
        
上海上港
        
北京国安
        
上海申花
    



 
  eventTarget.js的代码： 
  
 
  
$(document).ready(function(){
    $("body").bind("click",bodyHandler);
    $("div").bind("click",divHandler);
    $("div").bind("click",divHandler2);
});

function bodyHandler(e){
    //currentTarget:body; target:div
    console.log(e);
}

function divHandler(e){
    //currentTarget:div; target:div
    console.log(e);
    //阻止父级元素的冒泡
    //e.stopPropagation();
    //阻止所有元素的冒泡
    e.stopImmediatePropagation();
}
function divHandler2(e){
    console.log(e);
}
 
  
6）自定义事件：
 
  
jQuery.Event("myEvent")——指定自定义事件的类型为myEvent;
 $(selector).trigger(event,[param1,param2])——规定被选元素触发的事件； 
  
第一种书写方式：
 
  
 
  
//给element绑定hello事件
element.bind("hello",function(){
    alert("hello world!");
});
       
//触发hello事件
element.trigger("hello");
 
  第二种书写方式： 
  
 
  



    
    
    
    


click me


myEvent.js代码： 
  
 
  
    //自定义事件
var btn;
$(document).ready(function(){
    btn=$("#btn");
    btn.click(function(){
        //自定义事件类型
        var e=jQuery.Event("myEvent");
        //触发自定义事件
        btn.trigger(e);
    });
    //绑定自定义事件
    btn.on("myEvent",function(e){
        console.log(e);
    });
});