1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

jQuery自定义事件

作者:用户 来源:互联网 时间:2016-09-15 13:58:06

jquery事件functiontab controltabselement事件jquery自定义事件Change事件冒泡机制原生js实现addclassjQuery事件jquery的事件处理jQuery事件监听

jQuery自定义事件 - 摘要: 本文讲的是jQuery自定义事件, 在JS中,消息的通知是通过事件表达的,当代码库增长到一定的规模就需要考虑将行为和自定义事件进行解耦,通过事件机制可以将类设计为独立的模块,通过事件对外通信

在JS中,消息的通知是通过事件表达的,当代码库增长到一定的规模就需要考虑将行为和自定义事件进行解耦,通过事件机制可以将类设计为独立的模块,通过事件对外通信提高了程序的开发效率。

了解自定义事件的概念:

  1. 类似 DOM 的行为:你在 DOM 节点(包括 document 对象)监听并触发自定义事件。这些事件既可以冒泡,也可以被拦截。这正是 Prototype、jQuery 和 MooTools 所做的。如果事件不能扩散,就必须在触发事件的对象上进行监听。
  2. 命名空间:一些框架需要你为事件指定命名空间,通常使用一个点号前缀来把你的事件和原生事件区分开。
  3. 自定义额外数据:JavaScript 框架允许你在触发自定义事件时,向事件处理器传送额外的数据。jQuery 可以向事件处理器传递任意数量的额外参数。
  4. 通用事件 API:只用 Dojo 保留了操作原生 DOM 事件的正常API。而操作自定义事件需要特殊的发布/订阅 API。这也意味着 Dojo 中的自定义事件不具有DOM事件的一些行为(比如冒泡)。
  5. 声明:我们往往需要在预定义的事件中加入一些特殊的变化(例如,需要Alt键按下才能触发的单击事件),MooTools 运行你定义此类自定义事件。此类事件需要预先声明,即便你只是声明他们的名字。任何未声明的自定义事件不会被触发。

理论太抽象,看看 jQuery 框架中如何使用事件。

jQuery 的事件自定义事件还是通过 on 绑定的,然后再通过 trigger 来触发这个事件。

//给element绑定hello事件
element.bind("hello",function(){
    alert("hello world!");
});
//触发hello事件
element.trigger("hello");

这段代码这样写似乎感觉不出它的好处,看了下面的例子也许你会明白使用自定义事件的好处了,参考右边的代码。


trigger需要处理的问题

  1. 模拟事件对象,用户模拟处理停止事件冒泡(因为不是通过浏览器系统触发的,而是自动触发的,所以这个事件对象要如何处理?)
  2. 区分事件类型,触发标准的浏览器事件 和 自定义事件名绑定的处理程序。

拟冒泡机制

  1. 当事件是 click 类型,自然是本身支持冒泡这样的行为,通过 stopPropagation 阻止即可
  2. 当然一些事件,如 focusin 和 blur 本身不冒泡,但 jQuery 为了跨浏览器一致性, jQuery 需要在这些事件上模拟了冒泡行为,jQuery 要如何处理?
  3. 那么如果是自定义的aaa的事件名,又如何处理冒泡?

<ul id="tabs">

    <li data-tab="users">Users</li>     <li data-tab="groups">Groups</li> </ul> <div id="tabsContent">     <div data-tab="users">part1</div>     <div data-tab="groups">part2</div> </div>     <script type="text/javascript">     $.fn.tabs = function(control) { var element = $(this); var control = $(control);   element.delegate("li", "click", function() { var tabName = $(this).attr("data-tab"); //点击li的时候触发change.tabs自定义事件  element.trigger("change.tabs", tabName); });   //给element绑定一个change.tabs自定义事件 element.bind("change.tabs", function(e, tabName) { element.find("li").removeClass("active"); element.find(">[data-tab='" + tabName + "']").addClass("active"); }); element.bind("change.tabs", function(e, tabName) { control.find(">[data-tab]").removeClass("active"); control.find(">[data-tab='" + tabName + "']").addClass("active"); });   // 激活第一个选项卡  var firstName = element.find("li:first").attr("data-tab");   element.trigger("change.tabs", firstName);   return this; };     $("ul#tabs").tabs("#tabsContent");       </script>   


以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery , 事件 , function , tab control , tabs , element , 事件jquery , 自定义事件 , Change , 事件冒泡机制 , 原生js实现addclass , jQuery事件 , jquery的事件处理 jQuery事件监听 jquery的自定义事件、jquery自定义函数、vue.js 教程、js自定义事件、jquery自定义插件,以便于您获取更多的相关知识。

formatter-Jquery ui datagrid 自定义一列进行操作执行的方法找不到

问题描述 Jquery ui datagrid 自定义一列进行操作执行的方法找不到 {field:&#039;caozuo&#039;,title:&#039;操作&#039;,width:100,align:&#039;center&#039;, formatter:formatteroper, } function formatteroper(){ ...

jQuery实现自定义事件的方法_jquery

本文实例讲述了jQuery实现自定义事件的方法。分享给大家供大家参考。具体分析如下: jQuery是一个非常强大的工具。jQuery非常有用的功能之一是可以实现事件绑定。你可以实现创建,绑定事件,可触发自己定义的jQuery事件。 自...

jQuery常用方法(持续更新)

转自:https://www.hellojava.com/article/84 0、常用代码: 请容许我在1之前插入一个0,我觉得我有必要把最常用的代码放在第一位,毕竟大部分时间大家都是找代码的。 (1)AJAX请求 $(function() { $('#send').click(function() { $.ajax({ type: "GET", /...

Rails ujs

UJS是Rails 3引入的JavaScript框架与Rails的抽象层。我们知道Rails一些Helper是依赖于JavaScript框架的,比如Ajax Form,Ajax Link等,并且在Rails 3之前默认集成的JavaScript框架是 Prototype,再这之后才换成了社区呼声很高的 jQuery。 如前...

JQuery最佳实践之精妙的自定义事件

恰好偶最近负责的一个可视化编辑器的开发,其中有些地方便应用了JQuery的自定义事件,而且达到了很好的效果-精简代码的同时充分利用了OO的原则。 本文以我实际应用开发过程中遇到的一个例子进一步说明“什么时候用JQuery...

前三篇
后三篇