jQuery为元素绑定事件

为元素绑定事件的几个方法

点击按钮绑定点击事件，鼠标移入事件，鼠标移出事件

首先给一个按钮做点击事件，为盒子绑定鼠标点击事件和鼠标移入移出事件。

代码：

    html>

lang="en">

   

        charset="UTF-8">

        http-equiv="X-UA-Compatible" content="IE=edge">

        name="viewport" content="width=device-width, initial-scale=1.0">

       

       

   

   

        绑定事件

       

   

效果图：

 

解析：给一个绑定事件的按钮，在没有点击这个按钮之前，下面的盒子不会有任何反应。再给一宽为300像素，高为200像素，背景颜色为黑色的盒子。

代码：

    src="./jquery-1.12.2.js">

解析：用jQuery的方法来写代码，需要引入jQuery插件。引入之后就可以开始为元素绑定点击事件了。

第一种方法

代码：

   

解析：这是最基础的方法，直接写需要绑定的事件和事件处理函数。当点击绑定事件的按钮之后，就会给盒子绑定鼠标单击盒子时背景颜色会变成蓝色，鼠标移入盒子时背景颜色会变成黄色，鼠标移出盒子时背景颜色变成粉色

第二种方法

代码：

   

解析:这是一个普通链式方法，方法：.事件名字(事件处理函数).事件名字(事件处理函数).事件名字(事件处理函数)。

第三种方法

代码：

   

解析：这是bind方法，方法：bind(“事件名字”，事件处理函数)；

第四种方法

代码：

   

解析：这是bind链式方法，方法：.bind(“事件名字”，事件处理函数). bind(“事件名字”，事件处理函数). bind(“事件名字”，事件处理函数)

第五种方法

代码：

   

解析：这是键值对方法，方法.bind({“事件函数”：事件处理函数，“事件函数”：事件处理函数，“事件函数”：事件处理函数})

第六种方法

代码：

   

解析：这个方法跟前面的几个方法有些不一样，这个是给父元素绑定事件，方法：父元素.delegate(“事件名字”，“子元素”，事件处理函数)。

第七种方法

代码：

   

解析：这个方法跟delegate()方法差不多，就是子元素和事件名字对调了位置，方法：on(“子元素”，“事件名字”，事件处理函数)。

每个方法最后的效果图：

鼠标单击时

 

鼠标移入时

 

鼠标移出时