jQuery事件1-第5次课-JQ的事件跟JS一样的作用，只是写法不一样-附案例、任务

一、绑定事件的3种方式

1. 行内事件

   //JQ和JS一样
   <div onclick="fun(this)"></div>
   <script>
      function fun(obj){
          //fun即为事件处理程序
          obj.style.color='red';
      }
   </script>
   //JQ
   <div onclick="fun(this)"></div>
   <script>
      function fun(obj){
          //fun即为事件处理程序
          $(obj).css("color",'red');
      }
   </script>

   缺点：

   能不用就不用，耦合度很低，因为HTML和JS混在一起，维护起来就比较麻烦

2. 给元素的事件属性添加方法

   //JS:
   var odiv=document.getElementById("box");
   odiv.onclick=function(){
   
      }
   //缺点：只能写一个同类型的事件，团队协作中，经常会给同一个元素绑定相同的事件类型，就会存在覆盖问题。
   //JQ:
   $("#box").click(function(event){
      //$("#box")  事件源
      //click 事件类型
      //click的参数为函数，该函数即为事件处理程序
      //event 事件对象
   });
   //键盘抬起
   $("#ipt").keyup(function(){
   
   });

3. 事件监听-官方的推荐方式

   //JS
   var odiv=document.getElementById("box");
   odiv.addEventListner("click",function(){
         //写函数体                  
   },false)
   //JQ:
   可以给同一个元素绑定不同的事件类型，或者给同一个元素绑定相同的事件类型。
   1.
   $("div").bind('事件类型1',事件函数);
   $("div").bind('事件类型1 事件类型2',事件函数);
   //多个事件类型都共用同一个事件函数，即触发的事件都会执行相同的事件函数。
   比如：
      $("div").bind('click',function(){});
   比如：
      $("div").bind('click mouseout',function(){});
   2. 链式操作，比如给它绑定不同的事件和不同的事件处理函数
   $("div").bind('事件类型1',function(){}).bind('事件类型2',function(){});
   
   3.对象的写法
   $("div").bind({
          click:function(){
              //事件1的写法
          },
          mouseout:function(){
              //事件2的写法
          }
      });
   //总结：以上3种写法可任选一种，怎么玩都不会出问题

二、JQ特有的绑定事件的方式

1. hover 合成事件 = mouseover+mouseout

   其实click也相当于是合成事件：mousedown+mouseup

   使用场景：主要是用来做移入移出时的显示和隐藏特效。

   类似于css的hover伪类。

   $("div").hover(鼠标移入时的函数,鼠标离开时的函数);
   //说明：
   1、当鼠标移入到绑定的元素上时，自动执行函数1
   2、当鼠标离开该元素时，则自动执行函数2

2. one 一次性事件

   $("div").one("click",function(){
      alert("执行一次再次执行则失效")
   })
   //js没有，原理，是在执行完后将其解绑

三、事件解绑

1. 给第二种绑定事件的方式解绑

   //JS
   元素.事件类型=null;//解绑

2. 事件监听

   //jQ
   元素.removeEventListner("click",函数名);

3. JQ的解绑方式

   使用unbind的好处：

   1. 不区分你是用何种方式绑事件的，都可以用unbind来解绑
   2. 可以一次性解绑该元素身上的某个事件或某类型事件或全部事件

   $("div").unbind("click");// 解绑该div上的click事件
   $("div").unbind("click",函数名);//解绑该div上特定的点击事件
   $("div").unbind();//解绑它身上所有的事件，不区分事件类型

相关单词

1. bind 绑定、捆绑

2. one 一个

3. unbind 解绑

此资源下载链接已被无情的隐藏，请输入验证码解锁：

验证码

确定

请关注本站公众号回复“验证码”，获取验证码。

在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号