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

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”或者微信扫描二维码都可以关注微信公众号

WEB前端全栈圈
除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 710
(0)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top