`
peter潘
  • 浏览: 10619 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

自定义事件的绑定与触发实现!

阅读更多
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery-1.8.3.js"></script>
<script>

  var eventWrap={};
	var eventIdKey='eventId'+new Date().getTime();
	var uuid=0;
	function bind($el,eName,func){
		if($el && eName && func){
			var eId=$el.attr(eventIdKey);
			if(!eId){
				eId='eid'+(++uuid);
				$el.attr(eventIdKey,eId);
				eventWrap[eId]={};
			}
			var fArr=eventWrap[eId][eName];
			if(!fArr){
				fArr=eventWrap[eId][eName]=[];
			}
			fArr.push(func);
		}
	}
	function trigger($el,eName){
		if($el && eName){
			var eId=$el.attr(eventIdKey);
			if(eId){
				var fArr=eventWrap[eId][eName];
				if(fArr){					 
					for(var i=0;i<fArr.length;i++){
						if(typeof fArr[i]=='function'){
							fArr[i].call($el);
						}
					}
				}
			}
		}
	}
	
	$(function(){
		//测试
		var $div=$('div.tdiv');
		bind($div,'aaa',function(){alert(111);});
		bind($div,'aaa',function(){alert(222);});
		trigger($div,'aaa');
	});	
	
</script>
</head>
<body>
<div class="tdiv"></div>
</body>
</html>


自定义事件的绑定与触发设计思想:
1)全局事件对象eventWrap,里面包含元素事件id对象,元素事件id对象中包含事件名称及对应的函数队列
2)使用'eventId'+new Date().getTime()作为事件id属性的名称(这样可以尽量避免属性名的冲突,毕竟用这个属性名称的少之又少!),该属性指向eventWrap中的元素事件id,
3)定义一个用来全局递增的uuid,用来生成新的事件id
4)接下来,无非是对全局事件对象eventWrap的维护而已,绑定的时候按名称把函数放进去,调用的时候按名称取出来(当然,此处还可以加上解绑函数unbind)
5)需注意的编码技巧:判断对象或变量是否存在,不存在则创建,高效代码应该如:var eId=$el.attr(eventIdKey);if(!eId){..}、var fArr=eventWrap[eId][eName];if(!fArr){..} 
分享到:
评论

相关推荐

    JQuery的自定义事件代码,触发,绑定简单实例

    自定义事件在JQuery中分为两种主要的形式:绑定自定义事件和触发自定义事件。绑定自定义事件是在指定元素上注册事件监听器,而触发自定义事件则是在指定元素上模拟事件发生。下面我们将详细解释这两种操作的知识点。...

    SVG自定义地图 自定义点点击触发事件

    SVG(Scalable Vector ...通过将jpg图片转换为SVG,我们可以轻松地添加自定义元素和事件监听,使得地图应用更加生动和功能丰富。在Android Studio中,结合SVG库和自定义View,我们可以实现这种高级功能,提升用户体验。

    PyQt5按钮点击事件 给按钮绑定事件调用自定义函数 QPushButton

    # PyQt5按钮点击事件 给按钮绑定事件调用自定义函数 QPushButton 1. 继承 QWidget 定义自定义窗口类; 1. 在窗口中创建三个 QPushButton 并设置水平布局 QHBoxLayout; 2. 将三个按钮分别绑定自定义函数。

    datagridview 按钮列 绑定事件触发

    以下将详细介绍如何在DataGridView中创建按钮列并绑定事件触发。 1. **创建按钮列** 要在DataGridView中添加按钮列,首先需要在设计时或运行时创建一个DataGridViewTextBoxColumn对象,然后将其设置为...

    jQuery实现自定义事件的方法

    本文实例讲述了jQuery实现自定义事件的方法。...下面的代码创建了一个绑定到自定义事件和自定义事件触发时将被执行。 $(this).bind("myEventName",function(){ alert&#40;"myEventName triggered"&#41;;

    为jQuery添加自定义事件机制

    总结,为jQuery添加自定义事件机制是通过`$.fn.extend`扩展jQuery功能,使用`on`和`off`来绑定和解除事件,通过`trigger`来触发事件,并可以传递参数。这种机制极大地丰富了jQuery的事件处理能力,使得开发者能够...

    C# 数据绑定 数据模版 数据库绑 自定义事件定例子

    接下来,我们将深入探讨这个主题,包括数据绑定、数据模板、Access数据库绑定以及自定义事件。 1. **数据绑定**: 数据绑定是C#中的一种机制,它将控件的属性(如文本框的文本)与数据源的属性关联起来。当数据源...

    WPF纯MVVM事件绑定+事件参数 完美示例

    首先,要实现事件绑定,我们需要引用`System.Windows.Interactivity`命名空间,这是WPF Blend SDK的一部分,提供了`EventTrigger`和`InvokeCommandAction`等类,让我们能够在XAML中绑定事件到ViewModel的命令。...

    Delphi 动态绑定事件处理函数过程

    6. **自定义事件处理函数**:你可以根据需求创建自己的事件处理函数,这个函数应与事件类型匹配。函数参数通常包含 `Sender` 对象,用于识别触发事件的对象,以及任何特定于事件的数据结构。 7. **测试与验证**:...

    jquer事件绑定

    本文将详细介绍如何使用jQuery进行事件绑定,特别是通过`bind()`方法来实现自定义命名空间事件绑定的具体应用场景及其实现方式。 #### 一、jQuery事件绑定概述 jQuery提供了多种方式来处理DOM元素上的事件绑定,...

    WPF自定义命令,快捷键绑定

    WPF自定义命令、快捷键绑定 WPF(Windows Presentation Foundation)提供了强大的命令机制,允许开发者自定义命令,并将其绑定到快捷键上,从而提高用户体验。本文将详细介绍如何自定义命令、绑定快捷键,并使用...

    jquery实现的支持自定义事件跳转到指定页面的404错误页面源码.zip

    这个“jquery实现的支持自定义事件跳转到指定页面的404错误页面源码.zip”文件显然包含了一个用jQuery编写的404错误处理解决方案,允许用户自定义错误发生时的跳转行为。现在,让我们深入探讨这个主题,了解更多关于...

    自定义列绑定数据不显示的问题_control_c#自定义dll_

    "control_c#自定义dll"标签暗示了问题的核心在于自定义控件与DLL的交互。当在DLL中定义了一个自定义控件,并尝试在另一个应用程序中使用这个控件并绑定数据时,可能会出现数据不显示的情况。这可能是由以下原因造成...

    vue自定义移动端touch事件,点击、滑动、长按事件

    在移动设备上,为了实现与用户的交互,Vue.js 提供了一套基于原生 JavaScript `touch` 事件的自定义事件处理机制。Vue 的 touch 事件处理使得开发者可以在移动端项目中轻松实现点击、滑动和长按等操作。下面我们将...

    WPF 自定义控件 支持TextChange事件延时触发的文本框

    WPF 自定义控件 支持TextChange事件延时触发的文本框

    jQuery实现获取绑定自定义事件元素的方法

    本文将详细讲解如何使用jQuery实现获取绑定自定义事件元素的方法,以及涉及到的事件绑定和元素操作技巧。 首先,我们要理解jQuery的事件绑定机制。`$.fn.bind`是jQuery用于绑定事件处理函数的核心方法。默认情况下...

    C# 利用委托定义自定义事件

    在C#中,事件通常与类的私有成员一起使用,以确保只有类内部可以触发事件,而外部只能订阅并响应事件。 为了定义一个自定义事件,我们通常会遵循以下步骤: 1. **声明委托**:首先,我们需要创建一个委托类型,它...

    JavaScript 事件绑定及深入

    JavaScript中的事件绑定是前端开发中一个核心的概念,它涉及让网页元素在特定的操作或触发条件下执行相应的代码。本文将详细介绍事件绑定的方式,包括传统事件绑定和现代事件绑定,以及在事件绑定过程中可能遇到的...

Global site tag (gtag.js) - Google Analytics