轻松掌握 jQuery 事件基础 ----- on()绑定,off()解绑,自动触发事件 与 事件对象【四合一完整篇】

轻松掌握 jQuery 事件基础 ----- on()绑定,off()解绑,自动触发事件 与 事件对象【四合一完整篇】,第1张

📀 我们已经掌握了基本的绑定事件的方式,例如给 div 绑定一个点击事件:$('div').click(function(){}) 即可,那为什么还要专门学习这篇文章呢?如果我要求你给一个 div 分别绑定点击,移上,移开三个事件,那么根据以前的做法我们就会给它依次绑定三次不同的事件,很繁琐,代码冗余很严重,这就需要这篇文章来帮你将解决这个问题 ------ on() 绑定 与 off() 解绑

文章目标: 📑 掌握利用 on 给元素绑定多个事件📑 掌握利用 on 给元素绑定事件委派📑 掌握利用 on给动态创建的元素绑定事件📑 掌握利用 off 解绑事件📑 掌握利用 one 绑定单次触发事件
文章目录:

📊 一:利用 on 绑定事件

1.1 利用 on 绑定多个事件(不同事件处理程序)

1.2 利用 on 绑定多个事件(相同事件处理程序)

1.3 利用 on 事件委派

1.4 利用 on 给动态创建的元素绑定事件

📊  二:利用 off 解绑事件

2.1 解绑所有事件

2.2 解绑指定事件

 2.3 解绑事件委派

📊 三:绑定单次触发事件 

📊 四:自动触发事件 

4.1 $('ele').事件 

 4.2 $('ele').trigger(事件)

 4.3 $('ele').triggerHandler(事件) 

📊 五:事件对象 


一:利用 on 绑定事件

  🧽 本版块带大家掌握 利用 on 绑定多个事件(不同事件处理程序),利用 on 绑定多个事件(相同事件处理程序),利用 on 事件委派,利用 on 给动态创建的元素绑定事件

📮 1.1 利用 on 绑定多个事件(不同事件处理程序)

📕 给元素绑定多个事件,不同事件处理程序的格式:以对象形式写入

$('div').on({
                    click:function(){},
                    mouseover:function(){},
                    mouseout:function(){}
              })

案例:我们给一个 div 分别绑定三个事件,不同的事件处理程序:

      
      


📮 1.2 利用 on 绑定多个事件(相同事件处理程序)

📕 给元素绑定多个事件,相同事件处理程序的格式:空格隔开

$('div').on('mouseover mouseout',function(){})

案例:我们给 div 绑定多个事件,相同的事件处理程序:

      
      


📮 1.3 利用 on 事件委派

💹 所谓事件委派就是利用冒泡来通过父节点来影响子节点,例如我们有一个 ul 里面有 多个 li,我们要点击每个 li 都能执行事件,按照原来的思想我们会给每个 li 绑定一个点击事件,这样就需要多次绑定事件,太繁琐了,我们利用事件委派,只给 ul 绑定事件即可,点击 li 后,冒泡到 ul 身上,ul 绑定了事件,就会执行,这就是事件委派


📕 事件委派格式:括号内第二个位置写触发的元素

$('ul').on('click','li',function(){})

案例:给一个 ul 绑定事件委派,点击每个 li 都输出 ‘我被打印了’

      
            我是第一个li
            我是第二个li
            我是第三个li
      
      


📮 1.4 利用 on 给动态创建的元素绑定事件

📁 按照之前的绑定点击事件,如果我们先绑定了事件,再动态创建,那事件将不能被触发。但如果使用 on 绑定,则可以解决这一问题,on 可以给动态创建的元素绑定事件


给动态创建的 li 绑定点击事件:

      
      


 二:利用 off 解绑事件

🧺 利用 off 解绑比较简单,只有三种情况,解绑所有事件 和 解绑某个事件,还有解绑事件委派


📮 2.1 解绑所有事件

🧼 解绑所有事件只需要不写参数即可,就可以将某元素绑定过的所有事件都给取消掉


📕  解绑所有事件的格式:无参数即可

$('div').off()

案例:给 div 解绑所有事件

      
      

📮 2.2 解绑指定事件

 

🧼 解绑指定事件只需要将参数写为某个事件,就可以指定解绑哪个事件了


📕  解绑所有事件的格式:参数为某个事件

$('div').off(‘click’)

案例:给 div 解绑点击事件

      
      

📮 2.3 解绑事件委派

🧼 解绑事件委派和绑定事件委派的格式相似


📕  解绑事件委派的格式:第二个位置写会触发事件的元素

$('ul').off(‘click’,‘li’)

案例:给 ul 的 li 解绑点击事件

      
            111
            222
            333
      
      

三:绑定单次触发事件 

🧬 单次触发事件就是触发过一次就不能再触发的事件


📕  单次触发事件格式:

$('div').one('click',function(){})

案例:给 div 绑定单次触发事件

      
      

四:自动触发事件 

🧼 自动触发事件有三种形式,大范围内分两大类:会触发默认行为与不会触发默认行为

 


4.1 $('ele').事件 

🧼 $('ele').事件 这种自动触发事件会触发元素的默认行为,例如文本框标签,默认行为是获得焦点后光标闪烁

       
       

刷新页面就触发了获得焦点事件,并且触发了元素默认行为 光标闪烁


 4.2 $('ele').trigger(事件)

🧼 $('ele').trigger(事件) 也会触发元素默认行为

       
       

 刷新页面就触发了获得焦点事件,并且触发了元素默认行为 光标闪烁


 4.3 $('ele').triggerHandler(事件) 

🧼 $('ele').triggerHandler(事件) 不会触发元素默认行为,为了方便看清楚没有触发默认行为但是获得了焦点,我们在自动触发后更改表单value值,如果此时还没有光标这说明触发了事件但是没有触发默认行为

       
       

看得到value改了但是没有光标,证明了该方法自动触发了事件但是没有触发元素默认行为


五:事件对象 

事件对象在 jQuery 中的用法和在 原生js 中类似,均用 event 或 e 来表示,其方法也和原生中一模一样,例如 获得光标位置 e.pageX,e.pageY ,还有阻止冒泡与阻止默认行为等等,下面举例阻止冒泡为例:


我们知道 DOM 事件流会自动冒泡,点击了低级事件,会依次向上冒泡触发对应事件。

 

🧼 不阻止冒泡的情况:
      document
       father
                son
       
       

在不阻止冒泡的情况下,由于会自发向上级冒泡,而上级又有点击事件,所以会层层触发

 🧼 阻止冒泡的情况:
      document
       father
                son
       
                   
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表(0条)