jquery中的事件处理你真的了解吗？

在jQuery中的事件的事件处理包括三部分：1、事件绑定；2、事件解绑；3.自动触发。
我们先看一下事件绑定：
事件处理函数：on()
on()方法在匹配元素上绑定一个或多个事件的事件处理函数

语法：element.on(events,[selector], fn);
enents：一个或多个用空格隔开的事件类型。如：click
selector：元素的子元素选择器
fn：回调函数

用法1：绑定多个事件，多个事件处理程序

1.1-对多个事件添加多个事件处理程序

$("div").on({
  	mouseenter: function() {
        $(this).css("background", "green");
    },
    click:function() {
        $(this).css("background", "red");
    },
    mouseleave: function() {
        $(this).css("background", "orange");
    }
}) 

1.2-对一个对象添加多个事件但用一个事件处理程序

$("div").on("mouseenter mouseleave", function() {
    alert(11);
})

用法2：可以事件委托(委派)操作
其原理就是JavaScript中的 事件冒泡

$("ul").on( "click", "li", function() {
    alert("你点到我了");
})

on()方法里面的 click 是注册在 li 上面的事件

用法3：在创建之前给其注册事件

$("ol").on("click", "li", function() {
   alert(22);
})
var li = $("<li>我是一个新人</li>");
$("ol").append(li);

上面函数的 on() 如果换成下面代码，则事件没有注册上，不能弹出警示框

$("ol li").click(function() {
   alert(22);
});

二、解除事件绑定
解除事件方法：off()方法
off()方法，可以移除通过on()方法添加的事件处理程序

$("div").off();//清除div的所有事件
$("div").off("mouseenter");//只清除mouseenter事件
$("ul").off("mouseenter", "li");//清除 li 的mouseenter事件

三、如果某一事件只用一次的话，先用on()绑定，再用off()解绑。这样很麻烦，这里jQuery给我们准备了一个一次性“用具”：one()
用法跟上面的一样，在这里举一个例子，类比以上

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

四、自动触发事件
有时候我们写的程序，想要它自己出发，如：轮播图的自动轮播效果。这时就可以用我们的自动触发事件

1. 元素.事件()
   $(“div”).click();会触发元素的默认行为
2. 元素.trigger(“事件”)
   $(“div”).trigger(“click”);会触发元素的默认行为
3. 元素.triggerHandler(“事件”) 不会触发元素的默认行为
   $(“div”).triggerHandler(“click”);
   这些事件要先绑定才能自动触发，这个方法相当于一个触发装置