jquery事件

.bind()是直接绑定在元素上  bind的特点就是会把监听器绑定到目标元素上，有一个绑一个，在页面上的元素不会动态添加的时候使用它没什么问题。但如果列表中动态增加一个“列表元素5”，点击它是没有反应的，必须再bind一次才行。要想不这么麻烦，我们可以使用live。也就是简单的绑定事件，而非事件委托
事件委托：
.live()则是通过冒泡的方式来绑定到元素上的。和.bind()的优势是支持动态数据 但绑定到document DOM节点上，性能太低
.delegate()则是更精确的小范围使用事件代理，性能优于.live()   但delegate的selector是必需的。也就是只能事件委托
与on相比 事件和选择器是位置是反的
.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制on(events,[selector],[data],fn)，参数[selector]是可选，
.on()既可以简单的绑定（不加selector），也可以事件委托（加selector，他为前面元素的子元素）


$(".a").on("mouseover",function(){})
$(document).on("mouseover",".a",function(){})
$(".a").live("mouseover",function(){})
$(document).delegate(".a","mouseover",function(){})


那么怎么实现这个动态监听的过程呢？


on()事件相当于是$(document).click(function(){if(点击的是btn){}})，给document添加了一个click事件，当点击的是btn，事件冒泡原理，从里到外，就相当于点击了document，那么就会执行后面的操作，本质上只给document添加了一个事件，而click()事件是给所有btn添加了click事件。
 
另外on()事件可以添加多个事件。


 事件委托: 
事件委托的事例在现实当中比比皆是。比如，有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。 


我们知道，DOM在为页面中的每个元素分派事件时，相应的元素一般都在事件冒泡阶段处理事件。在类似 body > div > a 这样的结构中，如果单击a元素，click事件会从a一直冒泡到div和body（即document对象）。因此，发生在a上面的单击事件，div和body元素同样可以处理。而利用事件传播（这里是冒泡）这个机制，就可以实现事件委托。具体来说，事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）。 


委托事件的优点：
1.原来的事件绑定，要绑定好多事件，现在只需要绑定一个事件，大大提高了效率和页面性能，
2.解决的动态添加元素导致不能触发的bug。






总结：①选择器匹配到较多元素时，不用click和bind，用delegate和on，增加效率并且可动态添加元素。注意dom树不要太深，父元素选择得当。Jq版本要高
②选择器匹配的元素少时，可以用click和bind。 Jq低版本支持
综上所述呢，目前用on就对了。




one(type,[data],fn)为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
trigger(type,[data])在每一个匹配的元素上触发某类事件
triggerHandler(type, [data])
这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。
这个方法的行为表现与trigger类似，但有以下三个主要区别： 
* 第一，他不会触发浏览器默认事件。
* 第二，只触发jQuery对象集合中第一个元素的事件处理函数。
* 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。


页面加载完成有两种事件，一是ready，$(document).ready()表示文档结构已经加载完成（不包含图片等非文字媒体文件），
二是onload，$(window).load()指示页面包含图片等文件在内的所有元素都加载完成。




hover()一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。
mouseleave与mouseenter的集合


blur([[data],fn])当元素失去焦点时触发 blur 事件
change([[data],fn])当元素的值发生改变时，会发生 change 事件
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])当元素遇到错误（没有正确载入）时，发生 error 事件。
focus([[data],fn])
focusin([data],fn) focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
focusout([data],fn)focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。


keydown([[data],fn])当键盘或按钮被按下时，发生 keydown 事件
keypress([[data],fn])
keyup([[data],fn])当按钮被松开时，发生 keyup 事件


mouseenter([[data],fn])当鼠标指针穿过元素时，
mouseleave([[data],fn])当鼠标指针离开元素时，
注： mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。
mouseenter 事件只在鼠标移动到选取的元素上时触发
区别：和事件冒泡有关，mouseenter会把发生冒泡的子元素的冒泡事件取消


mouseover([[data],fn])
mouseout([[data],fn])


mousemove([[data],fn])
mousedown([[data],fn])
mouseup([[data],fn])


scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
resize([[data],fn])
unload([[data],fn])


事件对象的属性
event.type获取事件类型
event.preventDefault阻止默认的事件行为
event.stopPropagation阻止事件冒泡
event.target获取触发事件的元素
event.relatedTarget获取触发事件的相关元素
event.pageX和event.pageY获取光标相对于页面的x坐标和y坐标
event.which获取鼠标或者键盘的按键
event.metaKey为键盘事件获取ctrl按键




移除事件
 
   unbind(type,[data|fn]])
bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
    $('#btn').unbind("click"); //移除click
    $('#btn').unbind(); //移除所有 
    对于只需要触发一次的，随后就要立即解除绑定的情况，用one()
    $('#btn').one("click",function(){.......}); 
模拟操作
    可以用trigger()方法完成模拟操作。
    $('#btn').trigger("click"); 
    $('#btn').click();
   触发自定义事件
    $('#btn').bind("myclick",function(){....});
    $('#btn').trigger("myclick"); 
    传递数据
    trigger(type [,data])
    $('#btn').bind("myclick",function(event,message1,message2){...........});
    $('#btn').trigger("myclick",["传给message1","传给message2"]);
    执行默认操作 
    $("input").trigger("focus");
        //不仅会触发input元素绑定的focus事件，还会触发默认操作——得到焦点。
    $("input").triggerHandler("focus");
        //只触发绑定事件，不执行浏览器默认操作
    其他用法
    绑定多个事件类型
    $("div").bind("mouseover mouseout",function(){.....});
    添加事件命名空间
    $("div").bind("click.plugin",ii=function(){......});
    在所绑定的世界类型后面添加命名空间，这样在删除事件时只需要指定命名空间即可。
        $("div").unbind(".plugin");   //删除空间内的事件
    $("div").trigger("click!"); //触发所有不包含在命名空间中的click方法
    如果包含在命名空间的也要触发：
        $("div").trigger("click");
$('div').bind('click', RecommandProduct);//为div绑定RecommandProduct 函数
$('div').unbind('click', RecommandProduct);//取消RecommandProduct 函数