浅谈jquery事件处理

   浅谈jquery事件处理

        在以jQuery为基础库的前端开发体系中,经常会在一个页面上通过各种标识绑定许许多多的事件。就算简单的使用了事件代理,也还是造成了事件的分散,不好维护和管理。

  那么,如何解决这个问题呢?而我,想到了backbone中的events。如下:

   代码如下:

  events: {

  "click .icon": "open",

  "click .button.edit": "openEditDialog",

  "click .button.delete": "destroy"

  }

  也就是,把事件聚集到一起,类似事件处理中心这么一个概念。

  简单的理了一下实现思路:

  使用事件代理的方式,将事件绑定到body节点。(某些事件自身是不冒泡的,在此暂时不做研究)

  对于事件的执行对象,给一个统一标识。

  事件的执行函数,集中处理。

  代码如下:

  

  

 

 

  

 

 

  

  // 事件处理中心

  var ClickEventCenter = {

  "handler1": function () {

  // do something...

  },

  "handler2": function () {

  // do something...

  }

  // ...

  }

  // 事件绑定

  $body.on("click", "[data-click-center]", function () {

  var handlerName = $(this).data("click-center");

  var handler = ClickEventCenter[handlerName]

  if ($.isFunction(handler)) handler()

  })

  这样的话,一种类型的事件,集中到一起。

  在某些时候,能够起到很好的作用。

  以上所述就是本文的全部内容了,希望大家能够喜欢。

时间: 2024-08-17 13:04:44

浅谈jquery事件处理的相关文章

浅谈jQuery 选择器和dom操作_jquery

浅谈jQuery 选择器和dom操作 JQuery选择器 1.基本选择器 基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class 和标签名来查找DOM元素.这个非常重要,下面的内容都是以此为基础,逐级提高的. 1)."$("#id")",获取id指定的元素,id是全局唯一的,所以它只有一个成员. 2)."$(".class")",获取class指定的元素,不同的元素可以具有相同的class属性

浅谈jquery之on()绑定事件和off()解除绑定事件_jquery

off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该函数.其主要有以下两种形式的用法: 用法一: jQueryObject.off( [ events [, selector ] [, handler ] ] ) 用法二: jQueryObject.off( eventsMap [, selector ] ) 参数 参数 描述 events 可选/S

浅谈jQuery.easyui的datebox格式化时间

  这篇文章主要介绍了浅谈jQuery.easyui的datebox格式化时间的方法,需要的朋友可以参考下 方法很简单,这里就不多废话了,直接奉上代码: ? 1 2 3 4 5 6 $.fn.datebox.defaults.formatter = function (date) { var y = date.getFullYear(); var m = date.getMonth() + 1; var d = date.getDate(); return y + '/' + (m < 10 ?

浅谈jquery中delegate()与live()

  这篇文章主要介绍了浅谈jquery中delegate()与live()的相关资料,需要的朋友可以参考下 delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序 例如给id是showspan的div中的span标签添加事件 ? 1 2 3 4 5 6 7 8 9 10 <div id="showspan"><span>showspan**showspan</span></div> <span>

浅谈jQuery构造函数分析_jquery

在我的上一篇文章里面 阐述了jQuery的大致框架,知道了所有代码都是写在了一个自调用匿名函数里面,并且传入了window对象,源码是这样的: (function( window, undefined ) {...})( window ); 我们通过alert(jquery) 知道它是一个对象,那么这个对象是怎么构造出来的呢?我们使用$(document)类似的写法获取元素,就好像直接调用了普通的方法一样,jQuery就是普通的函数吗?如果是构造函数为什么不是 new $(document)的常

浅谈Jquery核心函数_jquery

      在Jquery中,所有的DOM对象都将封装成Jquery对象,而且只有Jquery对象才能使用Jquery方法或者属性来执行相应的操作. 所以Jquery提供了一个可以将DOM对象封装成Jquery对象的函数,就是Jquery核心函数jquery(),也称为工厂函数. jquery核心函数有7个重载,分别如下: jquery()  该函数返回一个空的jquery对象. jquery(elements)  该函数将一个或多个DOM元素转化为Jquery对象(或jquery集合) jqu

浅谈 jQuery 事件源码定位问题

原文:浅谈 jQuery 事件源码定位问题 昨天群里有人问了个事件源码定位的问题,简单描述下是这样的. 在一个不是自己写的页面上,如何快速定位到他绑定的事件代码在哪?(页面用的是jQuery)这个问题,说难不难,说简单也没那么简单,万一用的是委托之类也会麻烦点. 在 chrome 的控制台里有个 Event Listeners,这里会显示你所选择元素的事件,如果是原生事件,他会直接显示,你点击一下事件就会跳到对应代码里了,可是 jQuery 绑定的事件却不是这样的,你点击后只会跳到 jQuery

浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用_jquery

• 依赖的脚本文件 <script src="../Javascript/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="../Javascript/jquery.form.js" type="text/javascript"></script> • ajaxSubmit 和ajaxForm区

浅谈JQuery+ajax+jsonp 跨域访问_jquery

Jsonp(JSON with Padding)是资料格式 json 的一种"使用模式",可以让网页从别的网域获取资料. 一. 客户端 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv=&q