jquery中的事件方法

1.on() 在被选元素及子元素上添加一个或多个事件处理方法
参数：(events[,selector][,data],handler)
events : 事件类型（必填）
selector ：添加事件的元素（可选）用于过滤出被选中元素中能触发元素的后代
data: 传递数据，当一个事件被触发时，要传递给事件处理函数的 event.data
handler：function 事件被触发时的处理函数，如果函数只要执行return false,可简写为 false
示例：
首先看selector

<div>
   	<p></p>
</div>

<script>
        $("div").on('click','p',function(e){
              console.log("点击了一下")
        }) 
</script>

当提供selector参数时，事件处理程序是指为委派 事件（注：通常也有很多人叫它代理事件）。事件不会在直接绑定的元素上触发，但当selector参数选择器匹配到后代（内部元素）的时候，事件处理函数才会被触发。jQuery 会从 event target 开始向上层元素(例如，由最内层元素到最外层元素)开始冒泡，并且在传播路径上所有绑定了相同事件的元素若满足匹配的选择器，那么这些元素上的事件也会被触发。

data参数
示例：

 <script>
        $("div").on('click',{a:1,b:2,c:3},function(e){
              console.log(e.data)
        })
</script>

传递data参数时，event.data都传递给处理程序。data参数可以是任何类型，但如果是字符串类型时，那么selector参数必须提供，或明确地传递null，这样的 data 参数不会误认为是选择器。最好是使用一个对象（键值对） ，所以可以作为属性传递多个值

2.off()移除通过on()方法添加的事件处理程序
参数 (events[,selector][,function])
events: 要移除的事件类型
selector：添加事件的元素 元素的选择器(可选)
function：要移除的事件函数名

 示例：绑定了一些事件，用off() 来移除

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
</ul>
<div></div>
<script>
        $("ul li").on({
        click:function(){
            console.log('click','点击');
        },
        mouseover: function () {
            console.log('mouseover','鼠标移入');
        },
        mouseout: function () {
            console.log('mouseover','鼠标移出');
        }
    });
  $("div").on("click",function(){
      console.log("点击了一个盒子");
  })
 </script>

1.最简单的写法，去掉一个事件

 $("ul li").off("click")  

2.同时给多个元素解绑一样的事件

 $("ul li,div").off("click") 

3.同时给元素解绑多个事件

 $("ul li").off("click mouseover mouseout");

3.one()给被选元素添加仅一次的处理函数
参数 (events[,data],handler)
type: 添加的事件类型
data： 传递数据
handler：function 事件被触发时的处理函数
示例：

 <style>
        .btn{
            border:  #666 1px solid;
            padding: 2px;
            width: 90px;
            
            }
    </style>

<div>
        <input id="button1" value="点我显示联系方式" type="button" class="btn"/>
    </div>
    <p>第一次单击，但只能变更一次</p>
    <p>第二次单击，只能变更一次</p>
    <p>第三次单击，只能变更一次</p>

<script>
       function btn_click(){  //自定义事件
                    this.value="0556-7897876";
                }
       $("#button1").one("click",btn_click);  //绑定事件
       $("p").one("click",function(){
                    $(this).animate({fontSize:"+=6px"});
                })
    </script>

点击前：

点击后：

点击事件只生效一次