淘先锋技术网

首页 1 2 3 4 5 6 7

cbb6468f0f6340498374353697dbc0cd.gif

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

7368f2558b82814f86b203f86d829627.png

文章目标:

  • 📑 掌握利用 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 分别绑定三个事件,不同的事件处理程序:

      <div></div>
      <script>
              $('div').on({
                    click:function(){
                          console.log('点击事件触发了');
                    },
                    mouseover:function(){
                          console.log('鼠标移上去了');
                    },
                    mouseout:function(){
                          console.log('鼠标移开了');
                    }
              })
      </script>

0d757c08950f40c38e676a6c53bc1d4b.png


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

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

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

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

      <div></div>
      <script>
            $('div').on('mouseover mouseout',function(){
                  $(this).toggleClass('current')
            })
      </script>

73b41e4b41a6409a93da929d8c0cf265.gif


📮 1.3 利用 on 事件委派

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


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

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

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

      <ul>
            <li>我是第一个li</li>
            <li>我是第二个li</li>
            <li>我是第三个li</li>
      </ul>
      <script>
            $('ul').on('click','li',function(){
                  console.log('我被打印了');
            })
      </script>

8d2cce6a705a4839a7f67d1c98175bc0.png


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

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


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

      <ul></ul>
      <script>
            $('ul').on('click','li',function(){
                  console.log('新创建的 li 被触发了');
            }) 
            var lis=$('<li>新创建的 li</li>')
            $('ul').append(lis)
      </script>

1a5477c7772d40b88a66fc56fc89efcd.png


 二:利用 off 解绑事件

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

88ec8c58566acf451a0b35e124cc5dab.png


📮 2.1 解绑所有事件

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


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

$('div').off()

案例:给 div 解绑所有事件

      <div></div>
      <script>
              $('div').on({
                    click:function(){
                          console.log('点击事件触发了');
                    },
                    mouseover:function(){
                          console.log('鼠标移上去了');
                    },
                    mouseout:function(){
                          console.log('鼠标移走了');
                    }
              })
              $('div').off()
      </script>

📮 2.2 解绑指定事件

 

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


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

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

案例:给 div 解绑点击事件

      <div></div>
      <script>
              $('div').on({
                    click:function(){
                          console.log('点击事件触发了');
                    },
                    mouseover:function(){
                          console.log('鼠标移上去了');
                    },
                    mouseout:function(){
                          console.log('鼠标移走了');
                    }
              })
              $('div').off('click')
      </script>

📮 2.3 解绑事件委派

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


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

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

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

      <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
      </ul>
      <script>
            $('ul').on('click','li',function(){
                  console.log('我被触发了');
            })
            $('ul').off('click','li')
      </script>

三:绑定单次触发事件 

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


📕  单次触发事件格式:

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

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

      <div></div>
      <script>
              $('div').one('click',function(){
                    console.log('我触发啦');
              })
      </script>

四:自动触发事件 

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

 

1766599970de4faca01960bd0138ddba.png


4.1 $('ele').事件 

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

       <input type="text">
       <script>
              $('input').focus();
       </script>

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

e849a28c8468482c9d5fc1dd9d5a7e39.png


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

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

       <input type="text">
       <script>
              $('input').trigger('focus');
       </script>

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

e849a28c8468482c9d5fc1dd9d5a7e39.png


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

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

       <input type="text">
       <script>
              $('input').triggerHandler('focus');
              $('input').val('111')
       </script>

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

3d568ccfbabe4119b6d29a2064300b41.png


五:事件对象 

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


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

 

🧼 不阻止冒泡的情况:

      document
       <div class="father">father
                <div class="son">son</div>
       </div>
       <script>
             $(document).on('click',function(){
                  console.log('document冒泡了');
             })
               $('.father').on('click',function(){
                     console.log('father冒泡了');
               })
               $('.son').on('click',function(){
                     console.log('son冒泡了');
               })
       </script>

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

3fc2307074584b5b8e9976c42db540c5.png

 🧼 阻止冒泡的情况:

      document
       <div class="father">father
                <div class="son">son</div>
       </div>
       <script>
             $(document).on('click',function(){
                  console.log('document冒泡了');
             })
               $('.father').on('click',function(){
                     console.log('father冒泡了');
               })
               $('.son').on('click',function(event){
                     event.stopPropagation();
                     console.log('son冒泡了');
               })

阻止冒泡的情况下点击son黄色盒子,只会触发其son事件,但是由于father没有阻止冒泡,点击father盒子还是会向上冒泡

8b974ccdd3264ea6ad52fe04040c78bc.png 

e87bceeb4dcb48938181a248e1be8657.gif