之前一直做flex，现在来做js，觉得js的事件机制不是很好用，参考flex的事件机制为jQuery开发一个插件，即自定义事件。 利用这个插件，jQuery对象能够派发自定义的事件，而父级的对象能够对此事件进行监听，对事件的处理依次分为捕获，目标，冒泡三个阶段。
捕获：从根结点出发，到派发事件的目标对象，如果注册了监听，即会执行监听函数。默认时，不打开捕获
目标：发出事件的目标对象，如果注册了监听，即会执行监听函数
冒泡：捕获的反过程，即从目标对象出发，依次调用父级对象的监听函数。默认时，打开冒泡
给个例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text jquery.jevent.js</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.jevent.js"></script>
<script type="text/javascript" >
var str1 = "Click1";
var str2 = "Click2";
$(document).ready(function(){
$("#div1"). addJEventListener(str1, function(data,str){alert("div1"+"@"+data.msg+"@"+str);},true);
$("#div11").addJEventListener(str1, function(data,str){alert("div11"+"@"+data.msg+"@"+str);},true);
$("#div2"). addJEventListener(str2, function(data,str){alert("div2"+"@"+data.msg+"@"+str);},true);
$("#div21").addJEventListener(str2, function(data,str){alert("div21"+"@"+data.msg+"@"+str);});
$("#button1").addJEventListener(str1, function(data,str){alert("button1"+"@"+data.msg+"@"+str);});
$("#button2").addJEventListener(str2, function(data,str){alert("button2"+"@"+data.msg+"@"+str);},true);
$("#button1").click(function(){
$(this).dispatchJEvent(str1,{msg:"msg from button1"});
});
$("#button2").click(function(){
$(this).dispatchJEvent(str2,{msg:"msg from button2"});
});
});
</script>
</head>
<body>
<div id="div1">
<div id="div11">
<img id="img1" src="pic3.jpg" width="140" height="140"/>
<input type="button" id="button1" value="click Me 1!"/>
</div>
</div>
<div id="div2">
<div id="div21">
<img id="img2" src="pic5.jpg" width="140" height="140"/>
<input type="button" id="button2" value="click Me 2!"/>
</div>
</div>
</body>
</html>
这个例子中，各级结点都通过addJEventListener()分别注册了对"Click1"或"Click2"事件的监听，而点击button1时，会通过dispatchJEvent()派发事件，例子可以从附件中下载
。如点击button1时，依次alert的结果为：
div1@msg from button1@capture //div1在捕获click1事件
div11@msg from button1@caputre //div11在捕获click1事件
button1@msg from button1@target //目标对象button1执行监听函数
div11@msg from button1@bubble //div11在冒泡过程中执行监听函数
div1@msg from button1@bubble //div1的冒泡过程中执行监听函数
可见先严格地执行了上面提到的处理事件的步骤。
细节部分：
1、当事件被派发时，只有目标对象的父级对象能够得到处理事件的机会，如将上面的div2同样也注册对"Click1"的监听，便不会被调用，因为div2并不是button1的父级对象。
2、对象在注册对某一事件的监听时，可以选择是否找开捕获或冒泡，如果打开捕获，则在事件处理的捕获时即会执行监听函数，默认时捕获不打开，冒泡打开。
3、同一对象可以对某一事件多次注册监听，当然也可以删除对事件的监听
对插件提拱的扩展介绍如下：
1、dispatchJEvent: function(name,data,capture,bubble)
jQuery对象通过此函数来派发事件，
name是事件的标识，为一个字符串，
data为事件所携带的信息，该信息会做为参数传递给监听函数，如上例 中button1的data为{msg:"msg from button1"},
capture指示对该事件的处理是否开启捕获过程，默认为true，
bubble指示对该事件的处理是否开启冒泡过程,默认为true.
2、addJEventListener:function(name,func,capture,bubble);
jQuery对象可以通过此函数来注册对事件的监听，
name仍是事件的标识，表示注册的是对哪个事件的监听，
capture表示该监听是否参与事件处理的捕获过程，默认为false
bubble表示是否参与事件处理的冒泡过程，默认为true，
func为所注册的监听函数，func定义的格式为 function(data,state) {},data即为事件派发时的参数,state代表此时处理过程位于哪个阶段，是"capture","target"不是"bubble".
3、removeJEventListener:function(name,func);删除对已经注册的监听
4、hasJEventListener:function(name);判断是否已经注册了对某一事件的监听
有了这个插件，应该可以提高jQuery的开发速度了。发上来与大家分享，期待大家的宝贵意见！
分享到：
相关推荐
每个菜单项可以是一个`<li>`元素，通过CSS进行美化，并通过jQuery添加事件处理，例如链接跳转、执行函数等。此外，我们还需要处理菜单的定位问题，确保菜单出现在鼠标点击的位置附近。这通常通过计算鼠标坐标并设置...
在IT行业中，jQuery是一个广泛使用的JavaScript库，...综上所述，这个知识点主要涵盖了jQuery的自定义事件机制、DOM事件的监听以及如何利用这些机制来动态跟踪表单元素的值变化，从而在Web开发中实现更灵活的交互设计。
在这个"jQuery自定义添加删除标签代码.zip"压缩包中，我们可以期待找到一个利用jQuery实现的标签系统，它允许用户动态地添加和删除标签。这个系统可能对于构建诸如博客、论坛或者任何需要用户输入标签的Web应用非常...
在IE8下使用jQuery获取自定义标签的知识点主要涉及到JavaScript的DOM操作、jQuery的选择器以及对旧版浏览器的兼容性处理。以下是对这些主题的详细解释： 1. **自定义标签**： 自定义标签是HTML5引入的一个新特性，...
5. **可扩展性**：具备良好的扩展性，开发者可以通过插件提供的API添加自定义功能，如与其他系统集成、数据同步等。 在【压缩包子文件的文件名称列表】中，我们看到两个文件： 1. **说明.htm**：这通常是一个HTML...
本篇文章将介绍如何自定义一个jQuery插件，为jQuery添加Notification机制。 首先，我们需要理解jQuery插件的基本结构。一个简单的jQuery插件通常包括一个函数，该函数接收jQuery对象作为参数，并通过`this.each`...
// 添加自定义错误类 }, unhighlight: function(element, errorClass, validClass) { $(element).removeClass("custom-error"); // 移除自定义错误类 }, ``` 7. **自定义提交按钮**：如果你希望在表单验证...
在IT行业中，jQuery是一个非常...总的来说，通过学习这个jQuery自定义拖拽插件，你可以深入理解jQuery事件处理、DOM操作和插件开发，提升你的前端开发技能。记得阅读提供的文档，并动手实践，这是掌握技术的最好方式。
今天我们将主要关注jQuery中的节点操作、特殊属性操作以及事件机制。 一、jQuery节点操作 1. 选择器：jQuery提供了丰富的选择器，如ID选择器(#id)、类选择器(.class)、元素选择器(element)等，用于快速定位DOM元素...
本篇文章将详细探讨一款基于jQuery的自定义图片标注插件，它允许用户在图片上选择区域并进行编辑，为图片添加个性化注释。 该插件主要服务于那些需要用户对图片进行精确选择和标注的应用场景。它通过一个下拉框菜单...
本项目“jQuery自定义表单添加删除代码”基于jQuery 1.10.2版本，旨在实现动态地向表单中添加或删除输入元素，以及自定义标题和附件功能，这对于创建灵活的用户交互界面特别有用。以下将详细解析这个项目的重点内容...
【jQuery用户自定义日程表管理代码】是一个基于JavaScript库jQuery开发的日程安排管理系统，它为用户提供了一种灵活的方式来组织和管理他们的日常任务和事件。这个框架尤其适用于创建交互式的Web应用程序，帮助用户...
本资源提供了一段用于自定义添加和推荐标签的jQuery源码，非常适合那些需要在网站上实现类似功能的开发者。下面我们将深入探讨jQuery中的标签系统及其实现方法。 首先，我们要理解jQuery的核心特性。jQuery通过一个...
这个名为"jQuery自定义添加标签相关插件"的压缩包可能包含了以下内容： - **JavaScript文件**：包含实现标签功能的jQuery插件代码。 - **CSS文件**：定义了标签的样式，包括颜色、字体、布局等。 - **示例HTML文件**...
**jQuery自定义验证**是一种强大的前端验证解决方案，它允许开发者根据项目需求定制验证规则和提示信息，提升用户体验。本文将深入探讨jQuery自定义验证的核心概念、功能和应用场景，以及如何利用正则表达式和非空...
首先，我们要理解jQuery的事件绑定机制。`$.fn.bind`是jQuery用于绑定事件处理函数的核心方法。默认情况下，它接受事件类型（如"click"）和一个回调函数作为参数。然而，在这里，我们看到一个对`$.fn.bind`的重载，...
事件委托是jQuery的一种优化策略，利用事件冒泡机制，将事件绑定在父元素上，从而减少事件处理器的数量。例如，`$("ul").on("click", "li", function() { ... })`会在ul元素上监听点击事件，但只有当点击的是li子...
此外，还可以利用jQuery的插件机制，将此功能封装成一个可复用的插件。 总结，jQuery自定义右键弹出菜单的实现，不仅展示了jQuery的基本用法，还体现了其在用户交互设计上的灵活性。对于有需求的开发者来说，这是一...