jQuery事件

一、 jQuery绑定事件的方法：

1. on()被选元素及子元素上添加一个或多个事件处理程序.
2. one()也是绑定事件,为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。用one()绑定事件时，每个元素只能运行一次事件处理函数。

二、解除绑定的事件的方法：

1. off()方法，移除绑定的事件

三、代码触发指定的事件
1.trigger()

看个例子：

<div class="container">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
</div>
<div class="wrap"> </div>
<script>

//正式写法：
$('.container li' ).on('click',function(){
        console.log('写法1');
        var str = $(this).text();
        $('.wrap').text(str);
    })

$('.container li' ).one('click',function(){
        console.log('我只能执行一次');
        var str = $(this).text();
        $('.wrap').text(str);
    })

//写法2：
 $('.container>ul>li').click(function(){
        console.log('写法2');
         var str = $(this).text();
        $('.wrap').text(str);  
    })

//还可以这样写
//命名空间没有什么特别的作用，只不过在解绑事件时，便于区别绑定的实际，名字可以随便写
 $('.container li').on('click.hello', function () {
          console.log('写法3');
          var str = $(this).text();
          $('.wrap').text(str);
  })

//解绑事件
$('.container li' ).off()

//解绑带有命名空间的指定事件
$('.container li' ).off('click,hello')

</script>

但是，用上边方法绑定事件时，只是给现有的li元素绑定了，如果新增了li,是没有绑定事件的，这个时候要怎么给新增的元素也绑定事件呢？
看下边例子

<div class="container">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
</div>
<div class="wrap"> </div>
<input type="text" id="tex">
 <button class="btn">增加</button>
<script>
$('.container li' ).on('click',function(){
        console.log('写法1');
        var str = $(this).text();
        $('.wrap').text(str);
    })

// 点击btn新增了li,但是新增的li这个时候，是没有绑定事件的
$('.btn').on('click',function(){
    var str  = $('input#tex').val();
    $('.container ul').append('<li>'+str+'</li>');
})

//这个时候，我们就可以用jQuery事件代理的方法了
$('.container ul').on('click','li',function(){
     var str = $(this).text();
        $('.wrap').text(str);
})

</script>

四、trigger()方法触发被选元素的指定事件类型

<div class="container">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
</div>
<div class="wrap"> </div>
<input type="text" id="tex">
 <button class="btn">增加</button>
<script>
$('.container ul').on('click','li',function(){
     var str = $(this).text();
        $('.wrap').text(str);
})

//3秒后，第一个li的click事件会被触发
setTimeout(function(){
        $('.container li' ).eq(0).trigger('click');
 },3000)
</script>