jQuery事件处理

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

   $('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 是后来添加的,但是我的事件在之前就已经绑定好了,所以说
用这个方法可以给未来动态添加的元素绑定事件