jquery-事件委托

jQuery中的事件委托方式比较丰富，就以同样的例子来说： 1、用on方法,代码如下：1$(function(){2$("#lists").on("click","li",function(event){3var target = $(event.target);4target.cs...

薛中然

800人浏览 · 2018-06-30 10:10:58

薛中然 · 2018-06-30 10:10:58 发布

jQuery中的事件委托方式比较丰富，就以同样的例子来说：

1、用on方法,代码如下：

1  $(function(){
2             $("#lists").on("click","li",function(event){
3                 var target = $(event.target);
4                 target.css("background-color","red");
5             })
6         })

2.用delegate（）方法，代码如下：

1         $(function(){
2             $("#lists").delegate("li","click",function(event){
3                 var target = $(event.target);
4                 target.css("background-color","red");
5             })
6         })

   $('.pager').delegate('a','click',function(){
  
   if($(this).parent().hasClass('previous')){
  
   page--
  
   }else{
  
   page++
  
   }
  
   })

on()方法和delegate（）方法对于事件委托的写法很像。并且执行事件委托的时候只有子元素（本文中的li）会触发事件，而代为执行的父元素（本文中为ul）不会触发事件，所以我们不需要盘判断触发事件的元素节点名，这一点明显优于原生的JavaScript。

3.用bind()方法，代码如下：

1        $(function(){
2             $("#lists").bind("click","li",function(event){
3                 var target = $(event.target);
4                 if(target.prop("nodeName")=="LI"){
5                 target.css("background-color","red");}
6             })
7         })

bind()方法同原生的JavaScript实现方法一样，当父元素代子元素执行事件时，父元素也会触发事件，所以我们需要判断一下触发事件的元素名。此外，用bind()方法给元素绑定事件的时候要注意，它只能给已经存在DOM元素添加事件，不能给未来存在DOM

元素添加添加事件。如果要频繁地添加DOM元素，并且给新添加的DOM元素绑定事件的话，用live(),delegate(),on()等方法。鉴于jQuery从1.7之后就不推荐live（）和delegate（）方法了，所以大家还是使用on（）方法吧。

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r

魔乐社区

提升Angular2-HN性能的7个实用技巧：让新闻加载速度飞起来

Angular2-HN是一款基于Angular构建的Progressive Hacker News客户端，专为追求高效新闻浏览体验的用户设计。本文将分享7个实用技巧，帮助你优化Angular2-HN的性能，让新闻加载速度显著提升，带来更流畅的阅读体验。## 1. 启用Service Worker缓存关键资源Service Worker是提升Angular应用性能的强大工具，它可以在后台缓存