7 HTML&JS等前端知识系列之jquery的事件绑定

preface

我们知道，每一个a,input等等标签都可以为其绑定一个事件，onclick也好，focus 也罢，都可以绑定的。但是众神key想过这个问题没有，倘若这里有1000个input标签需要绑定onclick事件，那么是不是说每一个input标签都要写一个onclick呢？当然不是了，我们利用jquery，只需要写一个就行了。那好，请看代码：

基本事件绑定

jquery版本都是jquery-2.2.3

html代码

为每一个li标签绑定一个点击（onclick）事件

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

jqueyr代码

<script>
    $(function () {         // $(f(){}) 这种形式的函数等价于ready
        $('li').click(function(){     //为li这个标签绑定一个click标签。
            var tmp = $(this).text();   // this表示传入的这个li标签，获取这个li的文本内容。
            alert(tmp)
        })}
    );
</script>

ready与$(function(){})都是一样的功能，在文档树结构加载完成后执行。

都是最基本的jquery事件绑定

代码如下：

ready:

$(document).ready(function () {
    // 自己写需要的方法了
})

$()方法

$(function() {
    // 自己写需要的方法了
})

html新生成的文档

上面说的那个事件绑定只能针对在html加载完成的时候绑定，如果此时用户新增加了一个输入框，或者其他的，那么$('li').click()对新增加的li标签就没有任何效果了，此时就需要其他方法来对新的标签文档做事件绑定。请看代码：

html代码

<input type="button" value="添加" onclick="AddContent()"/>
<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

jquery代码

方法一：每增加一个li标签的时候，同时绑定事件。适用于需要绑定事件的标签不多的情景。

    function AddContent(){
        $('ul').append('<li>8</li>')   // 增加li标签
        $('li:last').click(function(){    // 对li的标签最后一个绑定clikc事件
            var tmp = $(this).text();
            alert(tmp);
        })
    }

方法二：通过delegate委托的方法

默认是先不绑定，当你点击这个标签的时候，它去找到你这个点击的标签，才去绑定，绑定完成后，立马执行，相当于现绑现用。适用于绑定事件的标签特别多。

    $('ul').delegate('li','click',function(){   // 表示去ul里找li标签，为li标签绑定click事件，触发事件后执行后面function的方法。
        alert($(this).text())   // function的方法自定义。
    })

方法三： bind方法等同于方法一，提前绑定。

    $(function () {
        $('li').bind('click',function(){   // clikc表示绑定click方法
            alert($(this).text())
        })
    });

对指定标签移除事件

方法一：unbind 传入参数表示对指定事件进行取消绑定，不传入表示取消所有事件

$("p").unbind()
$("p").unbind('click')

方法二：undelegate

传入参数表示对指定事件进行取消绑定，不传入表示取消所有事件

$("p").undelegate( "click" )
$("p").undelegate()