jQuery事件处理

﹏ヽ暗。殇╰゛Y 2023-07-09 15:25 9阅读 0赞

以前注册事件用的是这种注册的方法

$('div').click(function() { 
                    $(this).css('backgroundColor', 'red')
                })

缺点是,只能单个注册,比如我想注册鼠标经过和点击事件,这样我只能一个一个的注册,就像这样

$('div').click(function() { 
                    $(this).css('backgroundColor', 'red')
                })
     $('div').mouseover(function() { 
                    $(this).css('backgroundColor', 'green')
                })

这样才能注册多个事件,  
现在新学了一个方法,可以注册多个事件  
**用on ( )绑定事件**  
这个方法可以直接注册多个事件,**以对象的形式**  
就像这样

$(function() { 
         $('div').on({ 
              click: function() { 
                    $(this).css('backgroundColor', 'red')
          },
              mouseover: function() { 
                    $(this).css('backgroundColor', 'green')
          }
          })

这样代码不会重复,  
**on()这个方法的优势还有可以事件委派操作,也就是事件委托**

**就是把原来加给子元素身上的事件绑定在父元素中,就是把事件委派给父元素**  
比如这里  
**我给 li 添加一个点击事件,以前的写法就是**

$('ul li').click (function() { 
                    $(this).css('color', 'red')
                })

**现在就是,把 li 元素身上的事件绑定到父元素 ul 中**  
事件委派操作

$('ul').on('click', 'li', function() { 
                    $(this).css('color', 'red')
                })

**用 on ( ) 方法 还可以给动态创建的元素绑定事件**  
也用事件委派操作

$('ol').on('click', 'li', function() { 
                    $(this).css('color', 'red')
                })
                var li = $('<li>wio</li>')
                $('ol').append(li);

这样,我的 li 是后来添加的,但是我的事件在之前就已经绑定好了,所以说  
用这个方法可以给未来动态添加的元素绑定事件