iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript加强之自定义event事件
  • 722
分享到

JavaScript加强之自定义event事件

event事件 2022-11-15 22:11:30 722人浏览 薄情痞子
摘要

$().ready(function(){ for(var i=0;i<5;i++){ // $("#aa").click(function(){ // alert("ha


$().ready(function(){
for(var i=0;i<5;i++){

// $("#aa").click(function(){
// alert("hahahaha");
// });

$("#aa").unbind("click");
$("#aa").bind("click",function(){
alert("oooooo");
});
}
});

自定义事件:

$().ready(function(){

$("#aa").bind("click",function(){
//事件触发器,触发自定义的event
$(this).trigger("点我");
});
//自定义一个"点我"事件
$("#aa").unbind("点我");
$("#aa").bind("点我",function(){
alert("点我");
});
});

传递参数的自定义事件:

$().ready(function(){

$("#aa").bind("click",function(){
//事件触发器,触发自定义的event,传递实参
$(this).trigger("点我",['张三','李四']);
});
//自定义一个"点我"事件
$("#aa").unbind("点我");
//第一个参数是固定的,后面都是自定义,就算把event写成别的名字,它还是固定类型,鼠标事件
$("#aa").bind("点我",function(event,a,b){
alert("点我");
alert(a);
alert(b);
});
});

练习:

写一个自定义事件,把该事件绑定在一个下拉列表框中

当下拉列表框选中一项的时候,触发该事件,以参数的形式把选中的值传递到自定义事件中,并输出。

html:

<select id="select">
<option value="111">111</option>
<option value="222">222</option>
<option value="333">333</option>
</select>

js:

$().ready(function(){
$("option").unbind("click");
$("option").bind("click",function(){
$(this).trigger("选择并显示",[$(this).val()]);
});

$("option").unbind("选择并显示");
$("option").bind("选择并显示",function(event,value){
alert(value);
});

});

--结束END--

本文标题: JavaScript加强之自定义event事件

本文链接: https://www.lsjlt.com/news/172657.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript加强之自定义event事件
    复制代码 代码如下: $().ready(function(){ for(var i=0;i<5;i++){ // $("#aa").click(function(){ //...
    99+
    2022-11-15
    event事件
  • JavaScript加强之自定义callback示例
    html: 复制代码 代码如下: <select id="select"> <option value="111">111</option> &l...
    99+
    2022-11-15
    回调函数 callback
  • Angular4.x Event中DOM事件和自定义事件的示例分析
    这篇文章给大家分享的是有关Angular4.x Event中DOM事件和自定义事件的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Angular组件和DOM元素通过事件与...
    99+
    2024-04-02
  • C#为控件添加自定义事件及自定义触发
    先随便搞个事件吧 public class TestEventrgs : EventArgs { private string _name; ...
    99+
    2024-04-02
  • 如何创建 JavaScript 自定义事件
    目录怎么创建自定义事件事件定制冒泡 bubbles可取消 cancelable组合 composed给事件传递自定义数据命名约定双击事件总结前言: 相信大家肯定处理过很多的事件监听,...
    99+
    2024-04-02
  • C#怎么为控件添加自定义事件及自定义触发
    本文小编为大家详细介绍“C#怎么为控件添加自定义事件及自定义触发”,内容详细,步骤清晰,细节处理妥当,希望这篇“C#怎么为控件添加自定义事件及自定义触发”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。先随便搞个事件...
    99+
    2023-06-30
  • Vue之组件的自定义事件详解
    目录总结 <template> <div > <h2>{{msg}}</h2> <!-- 通过父组件给...
    99+
    2024-04-02
  • Android自定义Notification添加点击事件
    前言在上一篇文章中《Notification自定义界面》中我们实现了自定义的界面,那么我们该怎么为自定义的界面添加点击事件呢?像酷狗在通知栏 有“上一首”,“下一首”等控制按钮,我们需要对按钮的点击事件进行响应,不过方法和之前的点击设置不一...
    99+
    2023-05-30
  • javascript如何实现自定义事件功能
    这篇文章主要介绍了javascript如何实现自定义事件功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。概述自定义事件很难派上用场?为什么...
    99+
    2024-04-02
  • 打破VUE事件的常规:解锁自定义事件的强大力量
    ...
    99+
    2024-04-02
  • 怎么用javascript实现自定义事件功能
    这篇文章主要介绍“怎么用javascript实现自定义事件功能”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么用javascript实现自定义事件功能”文章能帮助大家解决问题。概述自定义事件很难派...
    99+
    2023-06-17
  • Vue之自定义事件内容分发详解
    1、小伙伴们这个理解起来有点复杂,希望仔细看里面的原理,自己去敲一遍: <!DOCTYPE html> <html lang="en"> <head...
    99+
    2024-04-02
  • JavaScript自定义函数求累加
    JavaScript是一种用于编写Web应用程序的高级编程语言,其强大的能力和广泛的用途已经使它成为Web开发中必备的工具之一。 在JavaScript中,自定义函数是一种非常重要的技术,它允许我们根据自己的需求编写并调用函数。在本文中,我...
    99+
    2023-05-14
  • C#事件怎么自定义
    这篇文章主要介绍“C#事件怎么自定义”,在日常操作中,相信很多人在C#事件怎么自定义问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”C#事件怎么自定义”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!事件,是C...
    99+
    2023-06-17
  • WPF自定义路由事件
    与依赖项属性类似,WPF也为路由事件提供了WPF事件系统这一组成。为一个类型添加一个路由事件的方式与为类型添加依赖项属性的方法类似,添加一个自定义路由事件的步骤: 一、声明路由事件变...
    99+
    2024-04-02
  • JavaScript高级之自定义异常
    目录1.概念 1.1什么是错误与异常 1.2异常的分类 2.异常处理 2.1try...catch语句 2.2finally语句 2.3throw语句 3.Error对象 3.1自定...
    99+
    2024-04-02
  • 自定义 Web 组件 101:利用 JavaScript 自定义元素
    创建自定义元素 要创建自定义元素,需要使用 customElements.define() 方法。该方法将自定义元素的名称、类和可选选项作为参数: customElements.define("my-element", class ext...
    99+
    2024-04-02
  • vue自定义组件怎么添加使用原生事件
    今天小编给大家分享一下vue自定义组件怎么添加使用原生事件的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。自定义组件如何添加使...
    99+
    2023-06-30
  • vue自定义组件如何添加使用原生事件
    目录自定义组件如何添加使用原生事件. $emit()传递. native属性vue使用原生事件自定义组件如何添加使用原生事件 自定义组件(Components)是vue的重要知识块之...
    99+
    2024-04-02
  • Vue中怎么自定义事件
    本篇文章给大家分享的是有关Vue中怎么自定义事件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。事件绑定每个 Vue 实例都实现了事件接口 (E...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作