DOM事件操作

事件处理

一、事件API

jQuery对象的核心事件方法，核心事件函数，主要用于为元素的任意事件(包括自定义事件)添加、取消、触发绑定的一个或多个事件处理函数

二、on()方法(首选方法)

1、说明

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

2、语法

​ $(selector).on(event,childSelector,data,function,map)

3、参数

1. event:必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件
2. data:可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
3. function:可选。规定当事件发生时运行的函数。
4. map:规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

三、toggle([speed],[easing],[fn])

1、说明

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的click事件。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

2、语法

​ $(selector).toggle(speed,easing,function)

3、参数

1. speed： 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。
2. easing：可选参数。用来指定切换效果，默认是"swing"，可用参数"linear"。
3. fn：在动画完成时执行的函数，每个元素执行一次。

四、change([[data],fn])

1、说明

当元素的值发生改变时，会发生change事件。

该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生

2、语法

​ $(selector).change(data,fn);

3、参数

1. data：fn处理函数的参数或数据。
2. fn：在每一个匹配元素的keydown事件中绑定的处理函数。

五、click([[data],fn])

1、说明

触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。

2、语法

​ $(selector).click(data,fn);

3、参数

1. data：fn处理函数的参数或数据。
2. fn：在每一个匹配元素的click事件中绑定的处理函数。

六、mouseover([[data],fn])

1、说明

当鼠标指针位于元素上方时，会发生mouseover事件。该事件大多数时候会与mouseout事件一起使用。

与mouseenter事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发mouseover事件。只有在鼠标指针穿过被选元素时，才会触发mouseenter事件

2、语法

​ $(selector).mouseover(data,fn);

3、参数

1. data：fn处理函数的参数或数据。
2. fn：在每一个匹配元素的keydown事件中绑定的处理函数。

七、mouseout([[data],fn])

1、说明

当鼠标指针从元素上移开时，发生mouseout事件。该事件大多数时候会与mouseover事件一起使用。

2、语法

​ $(selector).mouseout(data,fn);

3、参数

1. data：fn处理函数的参数或数据。
2. fn：在每一个匹配元素的keydown事件中绑定的处理函数。

八、select([[data],fn])

1、说明

当textarea或文本类型的input元素中的文本被选择时，会发生select事件

2、语法

​ $(selector).mouseout(data,fn);

3、参数

1. data：fn处理函数的参数或数据。
2. fn：在每一个匹配元素的select事件中绑定的处理函数。

九、submit([[data],fn])

1、说明

当提交表单时，会发生 submit 事件。该事件只适用于表单元素。

2、语法

​ $(selector).submit(data,fn);

3、参数

1. data：fn处理函数的参数或数据。
2. fn：在每一个匹配元素的submit事件中绑定的处理函数。

十、示例代码

给p元素添加单击事件
$("p").on("click",function(){
alert("");
});
$("p").on({
  click:function{
  }
  dblclick:function{    
  }
});

给a元素添加hover事件
$("a").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);    


/*用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的click事件。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的*/
$("li").toggle(
  function () {
    $(this).addClass("visibled");
  },
  function () {
    $(this).removeClass("visibled");
  }
);  
    
$(selector).change(function(){
    
});         
    
$("btn").click(function(){
    
});

$("a").mouseout(function(){
  $(this).css("color","#ffaaaa");
});  

$("a").mouseover(function(){
  $(this).css("color","red");
});   

$(":text").select( function () { /* ...do something... */ } );   



$("form").submit( function () {
  return false;
} );  

一、其它事件

1. 元素事件

方法	版本	描述
bind()	1.0	为元素的任意事件绑定事件处理函数。
one()	1.1	为元素(或后代元素)的任意事件绑定一次性的事件处理函数。
live()	1.31.71.9	为元素(或后代元素)的任意事件绑定事件处理函数。
delegate()	1.4.2	为元素(或后代元素)的任意事件绑定事件处理函数。
on()	1.7	为元素(或后代元素)的任意事件绑定事件处理函数。
unbind()	1.0	bind()的逆操作，解除元素任意事件绑定的处理函数。
die()	1.31.71.9	live()的逆操作，解除元素(或后代元素)任意事件绑定的处理函数。
undelegate()	1.4.2	delegate()的逆操作，解除元素(或后代元素)任意事件绑定的处理函数。
off()	1.7	on()的逆操作，解除元素(或后代元素)任意事件绑定的处理函数。
trigger()	1.0	手动触发元素上的任意事件。
triggerHandler()	1.2	手动触发元素上的任意事件，但不会触发元素的默认事件行为，也不支持事件冒泡。

2. 浏览器事件——主要用于浏览器Window对象的事件

   resize()	1.0	为resize事件绑定处理函数，或触发该事件。该事件会在浏览器窗口大小被改变时触发。
   scroll()	1.2	为scroll事件绑定处理函数，或触发该事件。该事件会在元素滚动(滚动条有变化)时触发。

3. 表单事件——主要用于表单元素的事件

   focus()	1.0	为focus事件绑定处理函数，或触发该事件。该事件会在元素获得焦点时触发。
   blur()	1.0	为blur事件绑定处理函数，或触发该事件。该事件会在元素失去焦点时触发。
   focusin()	1.0	为focusin事件绑定处理函数。该事件会在元素获得焦点时触发。
   focusout()	1.0	为focusout事件绑定处理函数。该事件会在元素失去焦点时触发。
   change()	1.0	为change事件绑定处理函数，或触发该事件。该事件会在元素的值被更改时触发。
   select()	1.0	为select事件绑定处理函数，或触发该事件。该事件会在元素的用户输入被选中时触发。
   submit()	1.0	为submit事件绑定处理函数，或触发该事件。该事件会在表单被提交时触发。

4. 键盘事件——与键盘按键操作相关的事件

   keydown()	1.0	为keydown事件绑定处理函数，或触发该事件。该事件会在键盘按键被按下时触发。
   keypress()	1.0	为keypress事件绑定处理函数，或触发该事件。该事件会在键盘按键被按下时触发。
   keyup()	1.0	为keyup事件绑定处理函数，或触发该事件。该事件会在键盘按键被按下并释放时触发。

5. 鼠标事件——与鼠标按键操作相关的事件

   click()	1.0	为click事件绑定处理函数，或触发该事件。该事件会在点击鼠标按钮时触发。
   dblclick()	1.0	为dblclick事件绑定处理函数，或触发该事件。该事件会在双击鼠标按钮时触发。
   toggle()	1.01.81.9	为click事件绑定两个以上的处理函数，每次触发事件时将轮流切换执行其中的单个函数。
   hover()	1.0	为hover事件绑定处理函数。该事件会在鼠标进入或离开元素时触发。
   mouseenter()	1.0	为mouseenter事件绑定处理函数。该事件会在鼠标进入元素时触发。
   mouseleave()	1.0	为mouseleave事件绑定处理函数。该事件会在鼠标离开元素时触发。
   mouseover()	1.0	为mouseover事件绑定处理函数。该事件会在鼠标进入元素时触发。
   mouseout()	1.0	为mouseout事件绑定处理函数。该事件会在鼠标离开元素时触发。
   mousedown()	1.0	为mousedown事件绑定处理函数。该事件会在鼠标按钮被按下时触发。
   mouseup()	1.0	为mouseup事件绑定处理函数。该事件会在鼠标按钮被按下并释放时触发。