jQuery事件详解之bind()

当文档加载完毕，如果打算为元素绑定事件来完成某些操作，可以使用bind()方法来对匹配的元素进行事件绑定。

//bind()方法的调用格式
bind(type [,data],fn)

第一个参数表示事件类型，包括blur、focus、load、resize、scroll、unload、click、dblick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleaave、change、select、submit、keydown、keypress、keyup、error等（也可以是自定义的事件）。

第二个参数为传递给事件对象的额外数据对象（可选）。

第三个参数是用来绑定的处理函数。

基本效果

<button>按钮</button>
    <p>hello,jQuery</p>
    <script>
        $(function(){
            $("p").hide();
            $("button").bind("click",function(){
                $(this).next().show();
            })
        })
    </script>

演示

代码演示

加强效果

在上面的演示中只能点一次，再次点击没有反应，为了实现“点击，p标签内容显示;再次点击，p标签内容隐藏”这一效果，需要判断p标签是否隐藏。

为了判断元素是否显示，可以使用jQuery中的is()方法来完成。

<button>按钮</button>
    <p>hello,jQuery</p>
    <p>点击<span id="counter">0</span>次</p>
    <script>
        $(function(){
            var counter=1
            $("button").bind("click",function(){
                $("#counter").text(counter++)
                var p=$(this).next()
                if(p.is(":visible")){//如果p标签的内容显示
                    $(p).hide()
                }
                else{
                    $(p).show()
                }
            })
        })
    </script>

演示

代码演示

改变绑定事件的类型

改变上面的效果“当鼠标移入时显示，移出时隐藏”

<button>按钮</button>
    <p>hello,jQuery</p>
    <p>鼠标状态:<span id="mouseState">移出</span></p>
    <script>
        $(function(){
            var state=$("#mouseState")
            var p=$("button").next()
            $("button").bind("mouseover",function(){
                state.text("移入")
                p.show()
            }).bind("mouseout",function(){
                state.text("移出")
                p.hide()
            })
        })
    </script>

演示

代码演示

简写绑定事件

像click,mouseover这类事件，jQuery也提供了一套简写的方法，如：

$(button).click(function(){
alert("hello~")
})