jquery on绑定事件

描述：给一个或多个元素（当前的或未来的）的一个或多个事件绑定一个事件处理函数。（1.7版本开始支持，是 bind()、live() 和 delegate() 方法的新的替代品）

语法：.on( events [, childSelector] [, data ], handler )

参数说明：

1.events - 事件（必须）：String

一个或多个事件（或任意命名空间），比如"click"或 "keydown.myPlugin"。

2.childSelector- 子元素选择器（可选）：String

选择选择器子元素的选择器。如果这个子元素选择器是null或者省略了，那么事件总是被选择器触发。（多用于动态生成的元素）

3.data - 数据（可选）：Anything

 事件被触发时要传递给事件处理函数的数据。

4.handler - 事件处理函数（必须）：Function( Event eventObject [, Anything extraParameter ] [, ... ] )

 * 要传参数，第一个参数必须是event（事件）。

简单例子：

$(document).on('click', function() { // 给整个文档添加点击事件，给点击事件绑定一个事件处理函数（弹出1）
   alert(1); 
})

这里的click是事件（events）,function是事件处理函数（handler）

click是点击事件，还支持其他事件，下面是完整列表：

blur 失去焦点事件
focus 获得焦点事件
focusin 获得焦点事件
focusout 失去焦点事件（和blur有所区别）
load 加载事件
resize 改变大小事件
scroll 滚动事件
unload 重新加载事件
click 单击事件
dblclick 双击事件
mousedown 鼠标滑轮向下滚动事件
mouseup 鼠标滑轮向上滚动事件
mousemove 鼠标移动事件
mouseover 鼠标经过/移入事件
mouseout 鼠标移出事件
mouseenter  鼠标移入事件
mouseleave 鼠标移开事件
change 值改变事件
select 选择事件
submit 提交事件
keydow 键盘按下事件
keypress 键盘按键按下事件
keyup 键盘按键弹起事件
error 错误事件
contextmenu 右键菜单事件

复杂例子1（给动态生成的元素绑定事件）：

<div class="container"></div>

var $div = $('<div class="content"></div>'); // 创建一个class为"content"的div
$('.container').append($div); // 将创建的div添加到class为"container"的div中

$('.container').on('click', '.content', function() { // 将事件绑定到动态生成的div上
     alert(1); 
});

这里看起来是将事件触发函数绑定到选择器$('.container')的点击事件上，事实上是绑定到选择器的子元素.content的点击事件上。

复杂例子2（触发事件时传递参数）：

<button>点我啊快点我</button>

$('button').on('click', function(event, arg1, arg2) {
    alert('参数1： ', arg1, '参数2：', arg2);
}).trigger('click', ['我是参数1', '我是参数2']);

这里先给元素绑定事件，并定义好传参，随后直接触发并传递实参。注意的是形参的第一个必须是event，即从第二个形参开始才是实际要传递给处理函数的自定义参数。

复杂例子3（阻止冒泡）：

<div class="out">
    <div class="in"><div>
</div>

$('.in').on('click', function(e) {
    alert(1);
    e.stopPropagation();
});

这里如果不阻止向上冒泡，会alert两次，原因是in元素是在out元素里面的，in绑定的事件会冒泡到out上。

 

"我不会再为你难过了。"