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

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

? ? ? ? ? ? ?语法：

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

? ? ? ? ? ? ? ?

? ? ? ? ? ? ?参数解释：? ? ? ??

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

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

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

?

1. 绑定单个事件

1.1?bind绑定

语法格式：? ?

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

? ? ? ??});

<div id="test" style="cursor: pointer;">点击查看名言</div>

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

1.2 直接绑定（常用）?

语法格式：

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

? ? ? ?});

 <div id="test" style="cursor: pointer;">点击查看名言</div>    
 $("#test").click(function() {
       console.log("点击了")
 })

?

2. 绑定多个事件

2.1?bind绑定

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

语法格式：

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

? ? ? ? });

<button type="button" id="btn1">按钮1</button>

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

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

语法格式：??

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

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

? ? ? ? })....;

<button type="button" id="btn2">按钮2</button>

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

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

语法格式：

?????指定元素.bind({

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

? ? ? ???????},

? ? ? ??????事件类型2": function() {

? ? ? ? ? ? },...

? ? ? });

??

<button type="button" id="btn3">按钮3</button>

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

?

2.2 直接绑定 （常用）

语法格式：

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

? ? ? ? }).事件名(function() {

? ? ? ? })...;

????

<button type="button" id="btn4">按钮4</button>

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

?