返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jQuery事件注册的实现示范
  • 690
分享到

jQuery事件注册的实现示范

2024-04-02 19:04:59 690人浏览 薄情痞子
摘要

目录Jquery 事件注册事件处理jQuery 事件注册 事件注册on优势1:多个事件绑定 on()方法可以在匹配元素上绑定一个或多个事件处理函数 语法:element.on(eve

jQuery 事件注册

  • 事件注册on
  • 优势1:多个事件绑定

on()方法可以在匹配元素上绑定一个或多个事件处理函数

语法:element.on(events,[selector],fn)

  • events:一个或多个用空格分隔的事件类型 例如:click,keydown
  • selector:元素的子元素选择器
  • fn:回调函数,绑定在元素身上的侦听函数
1.单个事件注册
$('div').click(function(){
    $(this).CSS('background','pink');
})
$('div').mouseenter(function(){
    $(this).css('background','purple');
})
----------------------------------------------------------
2.多个事件注册 on
$('div').on({
    mouseenter:function(){
        $(this).css('background','purple')
    },
    click:function(){
        $(this).css('background','pink')
    }
})
>> 以'对象'的形式来书写多个事件注册
3.鼠标经过和离开都触发这个函数
.current{background:'blue'};
$('div').on('mouseenter mouseleave',function(){
    $(this).toggleClass('current');
})

优势2:可以事件委派操作

$("ul").on("click", 'li', function() {
      alert('11')
});
// click是绑定在ul身上,但是触发对象是li

优势3:动态的创建元素 on可以给动态生成的元素绑定事件

$('ol').on('click', 'li', function() {
      alert('可以弹出');
})
var li = $("<li>我是后来创建的</li>");
$('ol').append(li);

事件处理

off( )解绑事件

off( )方法移除通过on( ) 方法添加的事件处理程序

$("p").off()  // 解除p元素所有事件处理程序
$("p").off('click')  // 解除p元素上面的点击事件
$("ul").off('click','li')  // 解除事件委托

有的事件只想触发一次,可以使用one()来绑定事件

$("p").one('click', function() {
     console.log(134);
})
>> p元素只在`第一次点击的时候触发`,之后`不再执行函数`

自动触发事件 trigger( )

1. element.click();  // 第一种简写模式
>> $("div").click();
2. element.trigger('要触发的事件');  // 第二种自动触发方式
>> $("div").trigger('click')
3. elememnt.triggerHandler('type')  // 第三种自动触发方式   不会触发元素的默认行为 (比如文本框光标闪烁)
>> $("div").triggerHandler('click')

事件对象:e event

语法:element.on(events,[selector],function(e || event){});

$("div").on('click',function(e){
    console.log(e);
})
  • 阻止默认行为:event.preventDefault( ) 或者 return false
  • 阻止冒泡:event.stopPropagation( )

到此这篇关于jQuery事件注册的实现示范的文章就介绍到这了,更多相关jQuery事件注册内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: jQuery事件注册的实现示范

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

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

猜你喜欢
  • jQuery事件注册的实现示范
    目录jQuery 事件注册事件处理jQuery 事件注册 事件注册on优势1:多个事件绑定 on()方法可以在匹配元素上绑定一个或多个事件处理函数 语法:element.on(eve...
    99+
    2024-04-02
  • python注册钉钉回调事件的实现
    目录1、注册端2、回调端:以下示例代码为python2,django 框架钉钉API文档:https://ding-doc.dingtalk.com/doc#/serverapi2/skn8ld 钉钉有回调事件流程,...
    99+
    2022-06-03
    python注册钉钉回调事件 python 钉钉回调事件
  • C#中怎么实现事件注册和注销
    本篇文章给大家分享的是有关C#中怎么实现事件注册和注销,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。C#事件注册和注销:设计思路主窗体(frmMain :IParentForm...
    99+
    2023-06-17
  • SAP CRM的事件注册机制怎么实现
    本篇内容介绍了“SAP CRM的事件注册机制怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Subject: Agent inbox在...
    99+
    2023-06-04
  • jquery touch事件注册不了的问题怎么解决
    今天小编给大家分享一下jquery touch事件注册不了的问题怎么解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。随着移...
    99+
    2023-07-06
  • python如何实现注册钉钉回调事件
    这篇文章主要介绍了python如何实现注册钉钉回调事件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。目录注册端回调端:以下示例代码为python2,django 框架钉钉AP...
    99+
    2023-06-20
  • jquery实现按Enter键触发事件示例
    复制代码 代码如下: $(function () { document.onkeydown = function (event) { var e = event || window....
    99+
    2022-11-15
    Enter键 触发事件
  • jquery实现员工管理注册页面
    本文实例为大家分享了jquery实现员工管理注册页面的具体代码,供大家参考,具体内容如下 代码展示 HTML页面代码 <body> <div class...
    99+
    2024-04-02
  • jquery事件怎么实现
    这篇文章主要讲解了“jquery事件怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery事件怎么实现”吧! jqu...
    99+
    2024-04-02
  • jQuery事件的示例分析
    这篇文章主要介绍了jQuery事件的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一.window事件<!DOCTYPE&nb...
    99+
    2024-04-02
  • Knative Eventing中怎么实现一个Registry 事件注册机制
    Knative Eventing中怎么实现一个Registry 事件注册机制,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。背景作为事件消费者,之前是无法事先知道哪些事件可以被消...
    99+
    2023-06-19
  • node.js+jQuery实现用户登录注册AJAX交互
    最近实现了Node.js当作后台,jQuery写前台AJAX代码的,实现用户登录和注册的功能,刷新了前后端交互的三观。特记录一下。 1.login.ejs实现form框架 <form >...
    99+
    2022-06-04
    用户登录 js node
  • jQuery怎么实现注册正则表单验证
    使用jQuery实现注册正则表单验证的步骤如下:1. 添加jQuery库文件到HTML页面中:```html```2. 编写HTML...
    99+
    2023-08-11
    jQuery
  • javamail实现注册激活邮件
    本文实例为大家分享了javamail注册激活邮件的具体代码,供大家参考,具体内容如下需要的jar包MySQL驱动包 2.mail.jar包SMTP和POP3协议概述SMTP协议称为简单邮件传输协议,是一组用于从原地址到目的地址传送邮件的规则...
    99+
    2023-05-31
    javamail 邮件 ava
  • JavaWeb之Servlet注册页面的实现示例
    Servlet-注册页面 环境准备: 本文所用到环境如下: 软件:Eclipse(2018) 服务器:Tomcat 9 在index.jsp添加相关的代码 <...
    99+
    2024-04-02
  • Redis实现登录注册的示例代码
    目录1. 引言2. 流程图及代码实现2.1 生成验证码保存到Redis2.2 登录验证2.3 请求拦截器3. 总结1. 引言 在传统的项目中,用户登录成功,将用户信息保存在sessi...
    99+
    2024-04-02
  • jQuery如何实现触摸事件
    这篇文章主要为大家展示了“jQuery如何实现触摸事件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现触摸事件”这篇文章吧。触摸事件//&nb...
    99+
    2024-04-02
  • jQuery 三击事件实现代码
    直接给出代码如下:复制代码 代码如下:jQuery.event.special.tripleclick = {    setup: function(d...
    99+
    2022-11-15
    jQuery 三击事件
  • Vue中的组件注册方法及注意事项
    目录Vue组件的基本概念Vue组件的注册全局注册局部注册如何使用Vue组件组件之间嵌套 Vue组件的基本概念 Vue组件是一种可复用的Vue实例,用于封装可重用的HTML元素、Jav...
    99+
    2023-05-18
    Vue注册组件 Vue组件注册
  • 怎么用jquery实现员工管理注册页面
    这篇文章主要讲解了“怎么用jquery实现员工管理注册页面”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用jquery实现员工管理注册页面”吧!代码展示HTML页面代码<body&...
    99+
    2023-06-20
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作