jQuery事件——单个事件注册、jQuery事件处理（包括：事件处理on()绑定事件、事件处理off()解绑事件、自动触发事件trigger()）、jQuery事件对象

jQuery事件注册

1.单个事件注册

• 语法：

element.事件(function(){})

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

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

jQuery事件处理

1.事件处理 on()绑定事件

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

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

（1）events：一个或多个用空格分隔的事件类型，如：“click”或“keydown”。

（2）selector：元素的子元素选择器。

（3）fn：回调函数，即绑定在元素身上的侦听函数。

• 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!!!");
});

• 在此之前有bind()、live()、delegate()等方法来处理事件绑定或者事件委托，最新版本的请用on替代它们。

• on()方法优势3:

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

2.事件处理off()解绑事件

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

$("p").off()		//移除p元素所有事件处理程序
$("p").off("click")		//解绑p元素上面的点击事件
$("p").off("click","li")		//解绑事件委托

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

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

3.自动触发事件 trigger()

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

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

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

• element.triggerHandler()和前两种的区别是：element.triggerHandler()不会触发元素的默认行为；而前两种都会触发元素的默认行为。

jQuery事件对象

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

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

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

---

微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！