jQuery事件处理

2020-02-29 12:45:18 阅读：211 来源： 互联网

标签：jQuery 事件处理 function li 事件 click css red

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

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

呆呆爱代码发布了26 篇原创文章 · 获赞 4 · 访问量 1639 私信关注

标签：jQuery,事件处理,function,li,事件,click,css,red
来源： https://blog.csdn.net/weixin_45658984/article/details/104571463

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery事件处理