jQuery: 整理6 bind() 绑定事件

bind绑定事件：为被选中元素添加一个或多个事件处理程序，并规定事件发生时运行的函数

             语法：

                    $(selector).bind(eventType [, eventData], handler(eventObject));

               

             参数解释：        

                eventType: 是一个字符串类型的事件类型，就是你所需要绑定的事件；

                [, eventData] : 传递的参数，格式： {名1：值1，名2：值3}   -> 大多情况下不用写

                handler(eventObject)   该事件触发执行的函数；

 

1. 绑定单个事件

1.1 bind绑定

语法格式：   

        $("元素").bind("事件类型", function() {

        });

点击查看名言

$("#test").bind("click", function() {
     alert("点击了")
});

1.2 直接绑定（常用） 

语法格式：

        $("元素").事件名(function() {

       });

 
点击查看名言
    
 $("#test").click(function() {
       console.log("点击了")
 })

 

2. 绑定多个事件

2.1 bind绑定

2.1.1 同时为多个事件绑定同一个函数

语法格式：

        指定元素.bind("事件类型1 事件类型2 ...", function() {

        });

按钮1

$("#btn1").bind("click mouseout", function() {
     console.log("点击了btn1")
})

2.1.2 为元素绑定多个事件，并设置对应的函数 

语法格式：  

        指定元素.bind("事件类型1", function() {

        }).bind("事件类型2", function() {

        })....;

按钮2

$("#btn2").bind("click" ,function() {
     console.log("点击了btn2")
}).bind("mouseout", function() {
     console.log("鼠标移出btn2")
})

2.1.3  为元素绑定多个事件，并设置对应的函数 (键值对的形式)

语法格式：

     指定元素.bind({

            "事件类型1": function() {

             },

            事件类型2": function() {

            },...

      });

  

按钮3

$("#btn3").bind({
     "click": function() {
           console.log("点击了btn3")
      },
      "mouseout": function() {
           console.log("鼠标移出btn3")
      }
})

 

2.2 直接绑定 （常用）

语法格式：

        指定元素.事件名(function() {

        }).事件名(function() {

        })...;

    

按钮4

$("#btn4").click(function(){
     console.log("点击了btn4")
}).mouseout(function(){
     console.log("鼠标移出btn4")
})