jQuery事件处理

一、事件处理 on() 绑定事件
　　　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(){   //on("事件"，"子元素"，"回调函数")
       　　 alert('hello');
   　　 });   

　　 on()方法优势3：可以给未来动态创建的元素绑定事件
   　　 $("ol").on("click","li",function(){
        　　alert(11);
   　　 })
  　　  var li=$("<li>后来创建的内容</li>");
  　　  $("ol").append(li);

二、解绑事件 off()
    off()方法可以移除用过on()方法添加的事件处理程序
    $("p").off();  //解绑p元素所有事件处理程序
    $("p").off("click");  //解绑p元素上面的点击事件 
    $("ul").off("click","li");  //  解绑事件委托

三、一次性事件one()
    如果有的事件只想触发一次，可以使用one()来绑定事件。
    $("p").one("click",function(){
        alert(11);  //  该程序只会允许用户点击一次
    })

四、自动触发事件
    1.元素.事件()
        $("div").click();  // 会触发元素的默认行为
    2.元素.trigger("事件");
        $("div").trigger("click");  // 会触发元素的默认行为
    3.元素.triggerHandler("事件");  //不会触发元素的默认行为
        $("input").on("focus",function(){
            $(this).val("你好吗");
        });
        $("input").triggerHandler("focus");  //不会触发光标聚焦的事件

五、事件对象
　　　只要有事件的触发，就会有事件对象的产生：
　　　　element.on(evebts,[selector],function(event){})　//其中函数中的event就是事件对象
　　　　阻止默认行为：event.preventDefault()或者 return  false
　　　　阻止冒泡：event.stopPropagation()

　　　$(function(){
　　　　　$(document).on("click",function(){
　　　　　　　console.log("document的事件");
　　　　　});

　　　　　$("div").on("click",function(e){   //当点击了div会触发事件对象中的冒泡行为，会找到documnet，里面有点击事件，也会触发
　　　　　　　console.log(event);  //查看所有的对象，里面有很多属性和方法
　　　　　　　console.log("div中的事件");
　　　　　　　event.stopPropagation();  //阻止事件冒泡，这样document中的点击事件就不会触发。
　　　　　})
　　　})