jQuery学习笔记（四）之 jQuery事件

1、jQuery 事件注册

单个事件注册：element.事件(function);

$("div").click(function() {    //注册click事件
  $(this).css("background", "purple");
});

其他事件例如：mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等。和原生基本保持一致。

2、jQuery 事件处理

2.1 事件处理on()绑定事件

• on() 可以绑定1个或者多个事件处理程序 element.on(events,[selector],fn)

  • events：一个或多个用空格分隔的事件类型，如"click"或"keydown"
  • selector： 元素的子元素选择器
  • fn： 回调函数，即绑定在元素身上的侦听函数

• on可以实现事件委托（委派）

    ```js
     $("ul").on("click", "li", function() {  //click是绑定在ul上的，但是 触发的对象是ul里面的li
        alert(11);
     });
    ```
  

• on可以给动态创建的元素绑定事件

2.2 事件处理off()解绑事件

$("div").off();   //解绑了div上的所有事件
$("div").off("click");   //解绑了div上的点击事件
$("ul").off("click", "li");  //解除事件委托

one()绑定事件，只触发一次

2.3 自动触发事件trigger()

• 元素.事件()：$("div").click();
• 元素.trigger("事件")：$("div").trigger("click");
• 元素.triggerHandler("事件")：$("div").triggerHandler("click");

上述3种方法都可以自动触发事件，第3种方法不会触发元素的默认行为，前两种方法可以

注意：元素的默认行为指的是：例如input元素获得焦点时光标会闪烁

3、jQuery 事件对象

事件被触发，就会有事件对象的产生。

$("div").on("click", function(event) {}) 此处的event即为事件对象

event可以做许多操作，例如：

阻止默认行为：event.preventDefault()

阻止冒泡： event.stopPropagation()

$(document).on("click", function() {
   console.log("点击了document");
})
$("div").on("click", function(event) {
    console.log("点击了div");
    event.stopPropagation();  //点击div则不会向上冒泡到document
})