10、jQuery 事件处理

10、jQuery 事件处理

1、on() 绑定事件

(1) on（）方法可以绑定1个或者多个事件处理程序

element.on(events,[selector],fn)

①events:一个或多个用空格分隔的事件类型，如"click"或"keydown"

② selector: 元素的子元素选择器 。

③ fn:回调函数 即绑定在元素身上的侦听函数。

// on（）绑定多个事件
$(“div”).on({
 mouseover: function(){}, 
mouseout: function(){},
click: function(){}
}); 
// 如果事件处理程序相同可以一起写
$("div").on("mouseenter mouseleave", function() {
    $(this).toggleClass("current");
 });

​ (2) on（）方法可以实现事件委托（把原来加给子元素身上的事件绑定在父元素身上）

$('ul').on('click', 'li', function() {
 alert('hello world!');
});

(3) on（）方法可以给未来动态创建的元素绑定事件，click() 则无法绑定事件

 $("ol").on("click", "li", function() {
       alert(11);
 })
 var li = $("<li>我是后来创建的</li>");
 $("ol").append(li);

2、off() 解绑事件

off() 方法可以移除通过 on() 方法添加的事件处理程序

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

3、one() 只触发一次事件

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

4、trigger() 自动触发事件

（1）会触发元素的默认行为

// 第一种自动触发模式 
// element.click() 元素.事件()
  $("div").click(); // 会触发元素的默认行为

// 第二种自动触发模式
// element.trigger("type") 元素.trigger("事件")
  $("div").trigger("click"); // 会触发元素的默认行为
  $("input").trigger("focus"); // 会有光标闪烁

（2）不会触发元素的默认行为

// 第三种自动触发模式
// element.triggerHandler(type) 元素.triggerHandler("事件")
$("div").triggerHandler("click");
  $("input").on("focus", function() {
  $(this).val("你好吗");
  }); // 不会有光标闪烁
   // $("input").triggerHandler("focus");
 });