`

jquery custom event

 
阅读更多
先说说jquery关于事件的处理方式,在jquery中,函数要想被触发,需要至少四个因素:
1、事件对象
2、事件执行函数
3、将事件执行函数和事件对象进行绑定到某个具体的监听对象上
4、触发该事件

举例:
    //首先定义一个事件处理函数:
    function cust(){
      console.log(' hello every I am the custom function')
    }

    //其次,自定义一个事件
    var e = $.Event('introduce',{name:'intro',data='100'})//利用jquery的Event构造器创建了一个

    //将事件执行函数和事件对象进行绑定到某个具体的监听对象上
    $('body').bind('introduce',cust)

    //触发该事件
    $('body').trigger('introduce')


我们经常用到自定义事件是在写jquery plugin的时候,插件允许用户定义callback,然后我们在插件中根据插件的几个不同的状态来触发用户自定义的callback,我们也可以这样用:
   function cust(e){
    console.log(e.name)
    console.log("====hello I am cust function ===");
   }

   $('a').bind('cust1',cust)

   $('a').trigger({type:'cust1', test:true,name:'gao'});

分享到:
评论

相关推荐

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

    Demo-Ingenious JQuery custom event JQuery最佳实践-精妙的自定义事件 问题:一个复选框X,你如何便捷地触发它的click事件的处理逻辑,但是又不改变它当前的选中状态? 答案:用自定义事件处理函数封装复选框click...

    前端+ jquery-ui-1.13.1.custom

    这个“前端+jquery-ui-1.13.1.custom”压缩包包含了针对前端开发定制的 jQuery UI 版本,经过测试确认可以正常使用。下面我们将深入探讨 jQuery UI 的核心特性、主要组件以及如何在项目中应用和自定义。 **1. ...

    jquery-ui-1.12.0.custom.zip

    select: function(event, ui) { // 当用户选择一个建议项时执行的代码 console.log(ui.item.value); } }); }); ``` 在这个例子中,`availableTags`是数据源,`$("#tags")`是绑定的文本输入框,`select`回调...

    最新jquery-ui-1.11.2.custom压缩包

    select: function(event, ui) { // 用户选择建议项后的处理逻辑 } }); ``` 4. **自定义样式**:为了达到百度搜索栏的效果,你可能还需要对Autocomplete的样式进行定制,这可以通过修改jQuery UI的CSS文件或者...

    jquery-3.2.0.js,jquery-3.2.0.min.js

    - **自定义动画(Custom Animations)**:使用 `.animate()` 方法可以创建自定义动画,如改变宽高、透明度等。 **Ajax(Asynchronous JavaScript and XML):** - **$.ajax()**:核心的异步请求函数,支持 JSON, ...

    jQuery表单验证插件 jQuery.validity

    $.validity.register('customRule', function(value) { if (value === 'yourCustomCondition') { return true; } else { return false; } }); ``` **事件处理** 插件提供了多个事件,允许开发者在验证过程中...

    为jQuery添加自定义事件机制

    在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本文将深入探讨如何为...通过阅读和实践提供的jQueryEvent压缩包中的源码,可以更深入地理解这个过程。

    JQuery实战视频教程中需要使用的JQuery文件

    **jQuery实战视频教程中需要使用的JQuery文件** 在学习JavaScript库和框架的过程中,jQuery是一个非常重要的工具,尤其对于初学者来说,它简化了许多DOM操作、事件处理和Ajax交互。本教程将聚焦于jQuery的核心概念...

    jquery-prototype-custom-event-bridge:允许格式为“命名空间”的自定义事件

    jQuery-prototype-custom-event-bridge 测试。 允许格式为namespace:eventname自定义事件在 Prototype 和 jQuery 之间传递。 由 jQuery 触发的此类自定义事件将命中 Prototype 观察者(以及 jQuery 侦听器)。 ...

    30个jquery经典Demo

    27. **自定义事件(Custom Events)**:通过`.trigger()`和`.on()`创建并触发自定义事件,增加代码灵活性。 28. **DOM操作(DOM Manipulation)**:`.append()`, `.prepend()`, `.remove()`等方法用于DOM结构的增...

    JQuery事件Demo

    console.log('Custom event triggered!'); }); // 触发自定义事件 $(document).trigger('myCustomEvent'); ``` ### 五、事件解除绑定 使用`.off()`方法可以解除事件绑定,以避免内存泄漏或重复处理。例如,解除...

    JQuery In Action.PDF

    Developers can add new methods to the JQuery prototype, creating custom functionalities that can be reused throughout their applications. - **Example:** `$.fn.myPlugin = function(options) { /* Your ...

    JQuery-UI文档

    <link rel="stylesheet" href="jquery-ui-1.12.1.custom.css"> <script src="jquery-ui-1.12.1.custom.js"> <!-- 示例代码 --> ;">这是对话框内容 $(function() { $("#dialog").dialog(); }); ``` ### 4. ...

    jQuery 1.5 API 中文版

    Custom $.animate( params [, duration] [, easing] [, fn] ) $.animate( params, options ) $.stop( [clearQueue] [, jumpToEnd] ) $.delay( duration [, queueName] ) Settings booljQuery.fx.off numjQuery.fx....

    Learning jQuery 3 - Fifth Edition

    Create custom interactive elements for your web designs Find out how to create the best user interface for your web applications Use selectors in a variety of ways to get anything you want from a page...

    最近版本jquery3.1.1

    - **自定义动画(Custom Animations)**:`animate()`方法允许创建自定义动画,控制CSS属性的变化。 #### 3.4 Ajax交互 - **Ajax请求(AJAX Requests)**:`$.ajax()`, `$.get()`, `$.post()`等函数用于异步数据...

    JQuery异步上传下载

    formData.append("customField", "customValue"); // 可以添加额外字段 $.ajax({ url: "upload.php", // 服务器端处理文件上传的脚本 type: "POST", data: formData, cache: false, contentType: false, // ...

    JQuery API教程!绝对齐全

    `jquery-ui-1.8.10.custom.zip`包含了自定义版本的jQuery UI库。 ### 三、jQuery库与资料 1. **JQuery库**:jQuery库是核心库文件,如`jquery.js`,它包含所有jQuery功能,开发者通常将其引用到HTML页面中以使用...

    jQuery鼠标右键点击显示菜单.zip

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本示例“jQuery鼠标右键点击显示菜单”是基于jQuery-1.11.2.min.js版本实现的一个功能,...

    jQuery鼠标右键点击显示菜单代码

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及动画制作等任务。在标题“jQuery鼠标右键点击显示菜单代码”中,我们要讨论的是如何利用jQuery来实现用户在页面上鼠标右键点击时...

Global site tag (gtag.js) - Google Analytics