jQuery事件

什么是事件？

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

如：

• 在元素上移动鼠标。
• 按钮点击

• 键盘按击

  常见 DOM 事件：

文档事件	键盘事件	鼠标事件	表单事件
load	keypress	click	focus
unload	keyup	mouseleave	blur
scroll	keydown	mouseenter	submit

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。

--当点击button按钮时候，有target='_blank'属性的a标签会隐藏

$(document).ready(function(){
  $("button").click(function(){
    $("a[target='_blank']").hide();
  });
});

dblclick()

当双击元素时，会发生 dblclick 事件。

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

--当双击p元素的时候，当前的p标签块的背景变红
  $("p").dblclick(function(){
    $(this).css("background-color","red");
  });

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

--当鼠标指针移动到id选择器test上方，并按下鼠标按键时，当前的test的背景变黄
$(document).ready(function(){
  $("#test").mousedown(function(){
    $(this).css("background-color","yellow");
  });
});

与此类似的有：

1.mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件，或规定当发生  mouseleave 事件时运行的函数

2.mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数

3.mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

4.mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

hover()

hover()方法用于模拟光标悬停事件。(有两个函数事件)

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

--当鼠标指针移动到类选择器test上，会弹出You entered test!会话框，而移出的时候会弹出Bye! You now leave test!会话框

$("#test").hover(function(){
  alert("You entered test!");
  },
  function(){
  alert("Bye! You now leave test!");
});

focus()

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

--当选中inout输入框时候，当前的input背景变灰色

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

与此相对的是:

blur()

当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

toggle()

该方法可实现元素隐藏或点击显示不同事件

toggle()方法可以在元素的click事件中绑定两个或两个以上的函数，同时，它还可以实现元素的隐藏与显示的切换，绑定多个函数的调用格式如下：

$(selector).toggle(fun1(),fun2(),funN(),...)
其中，fun1，fun2就是多个函数的名称

--当第一次点击div时候，div里面的内容是”绑定1“，第二次点击的时候是绑定2，第三次点击是绑定3。接着循环

$("div").toggle(
    function(){
        $(this).html("绑定1");
    },
    function(){ 
        $(this).html("绑定2");
    },
    function(){ 
        $(this).html("绑定3");
    }
);