jQuery事件

JQuery添加事件的方法有如下三种

• on(events,[selector],[data], fn) 在选择元素上绑定一个或多个事件的事件处理函数。
  参数：
  events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
  selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件 总是触发。
  data:当一个事件被触发时要传递event.data给事件处理函数。
  fn:该事件被触发时执行的函数。false值也可以做一个函数的简写，返回false。
  例子：

$("p").on("click", function(){
alert( $(this).text() );
});

function myHandler(event) {
alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)

$("form").on("submit", false)

• bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数。jQuery 3.0中已弃用此方法，请用 on()代替。
  参数：
  type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
  data:作为event.data属性值传递给事件对象的额外数据对象
  fn:绑定到每个匹配元素的事件上面的处理函数
  例子：

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

• one(type,[data],fn) 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
  在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可 以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。
  参数：
  type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
  data:将要传递给事件处理函数的数据映射
  fn:每当事件触发时执行的函数。
  例子：

$("p").one("click", function(){
  alert( $(this).text() );
});

jQuery鼠标事件

• mousedown([[data],fn]) ：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。
  参数：
  data: mousedown([Data], fn)可传入data供函数fn处理。

fn:在每一个匹配元素的mousedown事件中绑定的处理函数
例子：

$("button").mousedown(function(){
  $("p").slideToggle();
});

• mouseenter([[data],fn]) : 当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
  参数：
  data:mouseenter([Data], fn) 可传入data供函数fn处理。
  fn:在每一个匹配元素的mouseenter事件中绑定的处理函数。
  例子：

$("p").mouseenter(function(){
  $("p").css("background-color","yellow");
});

• mouseleave([[data],fn]) :当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发mouseout事件。
  参数：
  data:mouseleave([Data], fn) 可传入data供函数fn处理。

  fn:在每一个匹配元素的mouseleave事件中绑定的处理函数。
  例子：

$("p").mouseleave(function(){
  $("p").css("background-color","#E9E9E4");
});

• mousemove([[data],fn]) : 当鼠标指针在指定的元素中移动时，就会发生mousemove 事件。mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和.clientY属性代表鼠标的坐标
  参数：
  data:mousemove([Data], fn) 可传入data供函数fn处理。
  fn:在每一个匹配元素的mousemove事件中绑定的处理函数。
  例子：

$(document).mousemove(function(e){
  $("span").text(e.pageX + ", " + e.pageY);
});

• mouseout([[data],fn]) :当鼠标指针从元素上移开时，发生 mouseout事件。该事件大多数时候会与mouseover 事件一起使用。

注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

参数：
data:mouseout([Data], fn)可传入data供函数fn处理。
fn:在每一个匹配元素的mouseout事件中绑定的处理函数
例子：

$("p").mouseout(function(){
  $("p").css("background-color","#E9E9E4");
});

• mouseover([[data],fn]) :当鼠标指针位于元素上方时，会发生 mouseover事件。该事件大多数时候会与 mouseout事件一起使用。

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

参数：
data:mouseover([Data], fn)可传入data供函数fn处理。
fn:在每一个匹配元素的mouseover事件中绑定的处理函数。
例子：

$("p").mouseover(function(){
  $("p").css("background-color","yellow");
});

• mouseup([[data],fn]) : 当在元素上放松鼠标按钮时，会发生mouseup 事件。与 click 事件不同，mouseup事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。
  参数：
  data:mouseup([Data], fn)可传入data供函数fn处理。
  fn:在每一个匹配元素的mouseup事件中绑定的处理函数。
  例子：

$("button").mouseup(function(){
  $("p").slideToggle();
});