JQuery 事件监听

什么是事件监听

当用户在界面上执行一个操作，例如按下键盘、拖动或者单击鼠标时，都将产生一个事件。类似的DOM事件如：onclick、onmouseover、onmouseout、onkeydown、onkeyup、onkeypress、onload、onselect、onchange、onchange、onfoucs、onblur等等。那么，我们对这些事件进行监听就叫做事件监听。

on() 和 click() 的区别

二者在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给
API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

语法

$(selector).on(event,childSelector,data,function)

 

代码

$('#target').on('click',function(event){
    console.log('target');
});

 

说明 

参数	描述
event	必需。事件对象。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序。
data	可选。规定传递到函数的额外数据。当一个事件被触发时要传递event.data给事件处理函数。
function	可选。事件回调函数。规定当事件发生时运行的函数。

注意：on前面的元素必须在页面初始化的时候就存在静态页里面。

事件监听与事件委托

$("#id").on("click",function() {
   // 事件监听：只能监听页面已有元素所绑定的事件
});
$(document).on('click', '.xxx', function() {
   // 事件委托：对于动态绑定元素可以这样写，委托给父元素进行事件监听代理
});
$("#parentNode").on('click', '#children', function() {
   // document可以改成要绑定事件元素的父节点
});

 

多个事件绑定同一个函数

$("#id").on("click dbclick",function() {
   // 同时绑定单击和双击事件
});

 

多个事件绑定多个函数

$("p").on({

    mouseover:function(){····},  

    mouseout:function(){····}, 

    click:function(){····}  

  });

 

为事件传递额外数据

function handlerName(event) {
  alert(event.data.msg);
}

$(document).ready(function() {
  $("p").on("click", {msg: "You just clicked me!"}, handlerName)
});