jQuery事件

1. jQuery 事件注册

单个事件注册

语法：

element.事件(function() {})

$("div").click(function(){ 事件处理程序})

其他事件和原生基本一致。

比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等

$("div").click(function() {
  $(this).css("background","purple");
})
$("div").mouseenter(function() {
  $(this).css("background","skyblue")
})

2. jQuery事件处理

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

on()方法在匹配元素上绑定一个或多个事件处理函数

语法：

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

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

$("div").on({
  mouseenter:function() {
    $(this).css("background", "skyblue");
  },
  click: function() {
    $(this).css("background", "purple");
  }
})

on()方法优势1：

• 可以绑定多个事件，多个事件处理程序。

$("div").on({
  mouseover: function() {},
  mouseout: function() {},
  click: function() {}
})

• 如果事件处程序相同

$("div").on("mouseover mouseout", function() { 
  $(this).toggleClass("current");
})

on()方法优势2：

可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

$("ul").on("click","li", function() {
  alert("hello");
})
// click 是绑定在ul上的，但是触发的是li

on()方法优势3：

动态创建的元素， click()没有办法绑定事件，on()可以给动态生成的元素绑定事件

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

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

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

$("div").off(); // 移除div上所有事件

$("div").off("click"); // 移除div上的点击事件

$("ul").off("click", "li"); // 解绑事件委托

• 如果有的事件只想触发一次，可以使用one()来绑定事件。

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

2.3 自动触发事件trigger()

有些事件希望自动触发，比如轮播图的自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发

element.click() // 第一种简写形式

element.trigger("type") // 第二种自动触发模式

element.triggerHandler(type) //第三种自动触发模式

// 自动触发事件
// 1. 元素.事件()
$("div").click();
// 2. 元素.trigger("事件")
$("div").trigger("click");
// 3. 元素.triggerHandler("事件") 与以上两种方法的区别是：不会触发元素的默认行为
$("div").triggerHandler("click")

3. jQuery 事件对象

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

element.on(events,[selector],function(event) {})

阻止默认行为：event.preventDefault() 或者return false

阻止冒泡：event.stopPropagation()