jQuery基础之四 -- 事件

转载：http://blog.csdn.net/zzq58157383/article/details/7651946

1.事件绑定 
bind(type [, data], fn);
type: focus/blur, focusin/focusout, click/dblclick, load/unload, resize, scroll, mousedown/mouseup, mouseover/mouseout/mousemove,
  mouseenter/mouseleave, change, select, submit, keydown/keypress/keyup, error，也可以绑定自定义事件
data: 可选，作为event.data属性值传递给事件对象的额外数据对象
fn: 用来绑定的事件处理函数

 one(type [, data], fn); //当处理函数触发一次后，立即删除，只会被执行一次

 live(type [,data], fn); //类似于bind，给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。

 die([type] [,eventName]); //类似于unbind，移除所有通过 live() 函数添加的事件处理程序

 delegate(element, type [, data], fn);  //类似于live，向匹配元素的当前或未来的子元素附加一个或多个事件处理器，注意只是添加在element元素里面的子元素

 undelegate(element);  //类似于die，从匹配元素移除所有由delegate() 添加的事件处理器，现在或将来

$("#panel h5.head").bind("click", function(){
        var $content = $(this).next("div.content");
        if($content.is(":visible"))
            $content.hide();
        else
           $content.show();
   });

绑定多个事件：
$("div").bind("mouseover mouseout", funtion(){
   $(this).toggleClass("over");
});

通过传入一个映射对来一次绑定多个事件处理函数
$('#foo').bind({
  click: function() {
    // do something on click
  },
  mouseenter: function() {
    // do something on mouseenter
  }
});

2.合成事件
hover(enter, leave); 用于模拟光标悬停事件，当光标移动到元素上时，针对触发指定的第1个函数，移出时触发第2个函数
//相当于mouseenter和mouseleave
toggle(fn1,fn2...fnN); 用于模拟鼠标连续单击事件，第1次触发第1个fn。。。

  //另一个作用： 切换元素的可见状态

$("#panel h5.head").hover(function(){
   $(this).next("div.content").show();
},function(){
   $(this).next("div.content").hide();
});
等价于：
$("#panel h5.head").mouseover(function(){
   $(this).next("div.content").show();
});
$("#panel h5.head").mouseout(function(){
   $(this).next("div.content").hide();
});

$("#panel h5.head").toggle(function(){
   $(this).next("div.content").show();
},function(){
   $(this).next("div.content").hide();
});
等价于：
$("#panel h5.head").toggle(function(){
   $(this).next("div.content").toggle(); //切换元素的可见状态
},function(){
   $(this).next("div.content").toggle(); //切换元素的可见状态
});

3.事件冒泡

eg:单击里层的<span>触发了外层的<div>事件。。。

 停止事件冒泡：

event.stopPropagation();

阻止默认行为：eg, 单击超链接后会跳转，单击提交按钮后表单会提交

event.preventDefault();

//return false; 同时对事件对象停止冒泡和默认行为

jQuery不支持事件捕获，如果需要使用事件捕获，可以直接使用原生的JavaScript。

4.事件对象属性

event.type;            事件类型，如click、mouseover、blur等
event.preventDefault();  阻止默认行为 原IE中不支持
event.isPreventDefault(); 返回 event 对象上是否调用了 event.preventDefault()
event.stopPropagation(); 停止事件冒泡 原IE中不支持
event.target;          获取到触发事件的元素
event.relatedTarget;   相关元素
event.pageX/enent.pageY;  光标相对于页面的x坐标和y坐标，原IE中e.x()/e.y()，Firefox中e.pageX()/e.pageY()
event.which;         鼠标单击事件中获取到鼠标的左、中、右键，1=左键，2=中键，3=右键
event.metaKey;       键盘事件中获取<ctrl>按键
event.originalEvent; 指向原始的事件对象
event.timeStamp      该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数
event.result         包含由被指定事件触发的事件处理器返回的最后一个值
  $("button").click(function(e) {
    return ("最后一次点击的鼠标位置是： X" +e.pageX + ", Y" + e.pageY);
  });
  $("button").click(function(e) {
    $("p").html(e.result);
  });

5.移除事件

 unbind([type][ , data]); //没有参数则删除所有绑定的事件,有第2个参数，则只有这个特定的函数会被删除

$("#btn").unbind();  //删除所有事件
$("#btn").unbind("click");  //只删除click事件
$("#btn").unbind("click", myfun); //删除指定名称的click事件，名称可以这样指定： $("#btn").bind("click", myfun=function(){...});

6.模拟事件
trigger(type[ ,data]);
triggerHandler(type[ ,data]); //只绑定事件，而不执行浏览器默认操作eg：focus事件与焦点问题

$("btn").trigger("click"); 或者 $("btn").click();
$("btn").bind("myClick", function(event,param1,param2,...){ .....自定义事件 });
$("btn").trigger("myClick", ["param1", "param2",...]);

$("input").trigger("focus"); //不仅触发focus事件，也会使input元素本身得到焦点（这是浏览器的默认操作）
$("input").triggerHandler("focus"); //只触发绑定的focus事件，不会得到焦点
$("input").select(function(){
    $("input").after("发生 Input select 事件！");
});
$("button").click(function(){
    $("input").triggerHandler("select"); //只会在input元素后面添加"发生 Input select 事件"，而不会全部选中input里面的元素（没有执行默认的选中操作）
});

7.事件命名空间

在所绑定的事件后面添加命名空间，这样在删除事件时，只需要指定事件命名空间即可

$("div").bind("dblclick", fn).bind("click.plugin", fn).bind("mouseover.plugin", fn);

 删除事件可以直接指定命名空间： $("div").unbind(".plugin");  

$("div").trigger("click"); 会触发click和click.plugin事件
$("div").trigger("click！"); 只触发click事件，"!"是匹配所有不包含在命名空间中的click方法