事件重复注册是jquey消耗内存的一大问题 但是有些问题则是我们自己造成的
比如说你在写代码的时候 这样写
$("
#sample").click(function(){
})
我想大部分人都会这么写
这样写带来什么坏处呢 不能灵活绑定方法
click 这个函数其实是on的简单调用 无法使用 on的高级调用 其实也破坏了js的灵活性
待我写一个列子
$("#sample").click(function(){
alert("注册");
})
$("#sample").click(function(){
alert("再注册");
})
先弹出“注册” 在弹出“在注册”
如果我再写个off方法呢
$("#sample").off("click");
我操
(暴躁)
不执行了 但是我想第二个执行
(无奈的笑)
第一个不执行啊 怎么办啊
别急用on吧
我们先写个方法
function do1(){
alert("注册");
}
function do2(){
alert("再注册");
}
$("#sample").on("click",do1);
$("#sample").on("click",do2);
这时候我们可以选择性删除了
(够拽)

$("#sample").off("click",do1);
执行下
弹出”再注册“;

(呵呵)
就是这样
在告诉你们一个小秘密
(苦逼)
这时候你们匿名绑定的删不掉的

比如我写个函数
function on(sel, data, fn) {
console.log(sel);
console.log(data);
console.log(fn);
}
on(".test",function(){})
如果不处理下 data = function(){} fn = undefined;
我操 如果我固执的用这些参数 那不完了 怎么办呢
function on(sel, data, fn) {
if(fn == null) {
//(types, fn)
fn = data;
data = undefined;
}
console.log(sel);
console.log(data);
console.log(fn);
}
变量转换法 比较巧妙 不错 不愧是我的徒弟
jquery on的变换写法
if ( data == null && fn == null ) {
// ( types, fn )
fn = selector;
data = selector = undefined;
} else if ( fn == null ) {
if ( typeof selector === "string" ) {
// ( types, selector, fn )
fn = data;
data = undefined;
} else {
// ( types, data, fn )
fn = data;
data = selector;
selector = undefined;
} }

动态添加到页面的DOM元素，用.on()方法绑定的事件不需要关心注册该事件的元素何时被添加进来，也不需要重复绑定。 有的同学可能习惯于用.bind()、.live()或.delegate()，查看源码就会发现，它们实际上调用的都是.on()方法，并且.live()方法在jQuery1.9版本已经被移除。
引用 http://www.tuicool.com/articles/Zf67ru 感谢 赵东禹大神
jquery on还有一种写法
$( "div.test" ).on({
click: function() { $( this ).toggleClass( "active" ); },
mouseenter: function() { $( this ).addClass( "inside" ); },
mouseleave: function() { $( this ).removeClass( "inside" ); }
});
一次委托多个方法
// Types can be a map of types/handlers
if ( typeof types === "object" ) {
// ( types-Object, selector, data )
if ( typeof selector !== "string" ) {
// ( types-Object, data )
data = data || selector;
selector = undefined;
}
// 遍历types对象，针对每一个属性绑定on()方法
// 将types[type]作为fn传入
for ( type in types ) {
on( type, selector, data, types[ type ], one );
}
return this;
}
js的超级sb逻辑\("▔□▔)/ 其实我认为C的语法最正宗╮(╯3╰)╭
逻辑或（||）
（1）对于布尔值，逻辑或是非常简单的，只要有一个true，就返回true；
（2）对于不是布尔值的情况则：
如果第一个操作数是对象，则返第一个操作数
如果第一个操作数的求值结果为false，则返回第二个操作数
如果两个操作数都是对象，则返回第一个操作数
如果两个操作数是null，则返回null
如果两个操作数是NaN，则返回NaN
如果两个操作数是undefined，则返回undefined
data = {} || anything
data = anything || {} 返回对象
data = 1+2==4 || 3 返回3
data = {o:1} || {o:2} 返回{o:1}
data = null || null 返回null
data = NaN || NaN 返回NaN
data = undefined || undefined 返回undefined
值得注意的是 虽然函数按顺序注册 但对于调用没有任何关系

妈的，回去改代码去

on绑定事件加参数
function greet( event ) { alert( "Hello " + event.data.name );}
$( "button" ).on( "click", { name: "Karl"}, greet );
$( "button" ).on( "click", { name: "Addy"}, greet );
on通过对象方式传值 使用event.data获取值
命名空间的方式调用
$( "#loginbtn" ).on( "click.s1", {
name: "Karl"
}, greet );
$( "#loginbtn" ).on( "click.s2", {
name: "Addy"
}, greet );
$( "#loginbtn" ).off( "click.s1", greet );
这样调用的化 只会执行第二个绑定的函数 虽然他们同名
$( "#loginbtn" ).off( "click", greet );
这样调用的化 不会执行任何方法

不错，学习了

$( "#dataTable tbody tr" ).on( "click", function() {
alert( $( this ).text() );
});
$( "#dataTable tbody" ).on( "click", "tr", function() {
alert( $( this ).text() );
});
第一种绑定事件的方法相当于bind 第二种则使用了委托代理的方法
委托事件有一个优势，他们能在后代元素添加到文档后，可以处理这些事件。 在确保所选择的元素已经存在的情况下，进行事件绑定时，您可以使用委派的事件，以避免频繁的绑定事件及解除绑定事件。
除了可以给未创建的后代元素绑定事件外（即上面提到的优势），代理事件的另一个好处就是，当需要监视很多元素的时候，代理事件的开销更小。
官网有个列子
var count = 0;
$( "body" ).on( "click", "p", function() {
$( this ).after( "<p>Another paragraph! " + (++count) + "</p>" );
});
大家研究下就可以发现你可以减少重复绑定事件的开销

hao

$( "#dataTable tbody" ).on( "click", "tr", function() {
alert( $( this ).text() );
});
不是还是要click？和直接click（function（）{
}）不一样么？

持续关注

棒棒哒~~~~~~~~~~~~~~~~