8、jQuery-常用事件

一、事件API

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

二、on()

1、说明

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

2、语法

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

3、参数

4、栗子

html代码

<p>盘我<p>

jq代码

$("p").on("click",function(){
    alert("给p元素添加单击事件");
});
$("p").on({
  click:function{
    alert("一次绑定多个事件--->点击事件")
  }
  dblclick:function{
        alert("一次绑定多个事件--->双击事件")
  }
});

三、移除事件

1、说明

off()方法通常用于移除通过on()方法添加的事件处理程序。自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。

2、语法

$("select").off(events,select, function(event e))

3、参数

4、栗子

html代码

<button id="add">点击事件</button>
<button id="off">移除事件</button>

qj代码

$("#off").on("click",function(){alert("点击事件")})
// 移除当前元素的所有事件
$("#add").off();
$("#off").click(function () {
  $("#add").off("click", function(){
        alert("移除事件")
  })
});
$("#off").click(function () {
  $("body").off("click","#off" ,function(){
        alert("通过父类元素移除指定事件")
  })
});

四、click()

1、说明

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

2、语法

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

3、参数

4、栗子

html代码

jq代码

五、change()

1、说明

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

2、语法

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

3、参数

4、栗子

html代码

<input type='text'>

jq代码

$(":text").change(function(){
    $(this).css("background-color","#FFFFCC");
});

六、mouseover() mouseout()

1、说明

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

2、语法

$("selector").mouseover(data,fn);
$("selector").mouseout(data,fn);

3、参数

七、hover

1、说明

是mouseover和mouseout的合成事件

2、语法

$("selector").hover(inFunction,outFunction)

3、参数

4、栗子

html代码

<a href="#">首页<>

jq代码

// 给a元素添加hover事件
$("a").hover(
  function () {
    $(this).css('color','red')
  },
  function () {
    $(this).css('color','black')
  }
);

八、select()

1、说明

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

2、语法

$("selector").$(selector).select(function)

3、参数

4、栗子

html代码

<input type="text" value="请输入内容"/>
<input type="text" value="测试内容"/>
<div></div>

qj代码

$(":input").select( function () {
     $("div").text("文本框被选中");
});

九、submit()

1、说明

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

2、语法

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

3、参数

4、栗子

html代码

<form>
  <input type='text'>
  <input type='password'>
</form>

qj代码

$("form").submit(function () {
  alert("表单提交事件");
  return false;
} );

十、支持的事件汇总

1、元素事件

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

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

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

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