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

jQuery笔记合集
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业	jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业	jQuery DOM2-第4次课-从某个元素出发，往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
jQuery事件1-第5次课-JQ的事件跟JS一样的作用，只是写法不一样-附案例、任务	jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务	jQuery自定义动画-第8次课-animate-stop函数-附案例
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业

一、绑定事件的3种方式

1. 行内事件

   //JQ和JS一样
   <div οnclick="fun(this)"></div>
   <script>
       function fun(obj){
           //fun即为事件处理程序
           obj.style.color='red';
       }
   </script>
   //JQ
   <div οnclick="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 解绑

资料、作业、笔记下载链接： https://www.imqd.cn/how-to-use-jquery-event.html