淘先锋技术网

首页 1 2 3 4 5 6 7

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

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