jQuery实例方法之on、one、off、trigger、hover、keydown

最新推荐文章于 2022-04-18 17:12:19 发布
最新推荐文章于 2022-04-18 17:12:19 发布
阅读量452 收藏
点赞数
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/105181931
版权

文章目录

on：绑定事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>温故而知"心"</title>
  <style>
    .demo {
      width: 100px;
      height: 100px;
      background-color: #ff0000;
    }

    .demo1 {
      width: 100px;
      height: 100px;
      background-color: #ff00ff;
    }
  </style>
</head>

<body>
  <div class="demo"></div>
  <div class="demo1"></div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <ul>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  /*
    on
    系统事件
  */
  $('.demo').on('click', function () {
    alert("xyz")
  })

  $('.demo1').on('mouseenter', function () {
    alert("lm")
  })

  //点击ul弹窗：xyzul
  $('ul').eq(0).on('click', function () {
    alert('xyzul')
  })
  //现在你想点击ul里面的li，弹窗出：xyzli
  $('ul').eq(1).on('click', 'li', () => {
    alert('xyzli')
  })
</script>

</html>

on通过对象的方式控制多个函数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>温故而知"心"</title>
</head>

<body>
  <div>xyz</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  $('div').on({
    click: function () {
      console.log('click')
    },
    mouseenter: function () {
      console.log('mouseeenter')
    },
    mouseleave: function () {
      console.log('mouseleave')
    }
  })
</script>

</html>

one

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>温故而知"心"</title>
</head>

<body>
  <a href="https://www.baidu.com">只跳转一次淘宝页面，后面一直跳转百度页面</a>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  /*
    one:只使用一次
  */
  $('a').one('click', function () {
    window.open('https://taobao.com');
    return false;
  })
</script>

</html>

off:解绑事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温故而知"心"</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background-color: #ff0000;
        }
    </style>
</head>

<body>
    <div class="demo"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    function clickOne() {
        console.log("clickOne")
    }
    function clickTwo() {
        console.log("clickTwo")
    }
    $('.demo').on('click', clickOne)
    $('.demo').on('click', clickTwo)

    function enterOne() {
        console.log("enterOne")
    }
    function enterTwo() {
        console.log("enterTwo")
    }
    $('.demo').on('mouseenter', enterOne)
    $('.demo').on('mouseenter', enterTwo)

    //off: 解绑
    //解绑div类名为demo的全部事件
    //    $('.demo').off()

    //解绑div类名为demo的全部click事件
    //    $('.demo').off('click')

    //解绑div类名为demo的click事件——clickOne
    //第二个参数是指定解绑事件的函数
    $('.demo').off('click', clickOne)
</script>

</html>

trigger

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温故而知"心"</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background-color: #ff0000;
        }
    </style>
</head>

<body>
    <div class="demo"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //系统事件
    $('.demo').on('click', function (e, a, b, c, d) {
        console.log('click', a, b, c, d)
    })
    $('.demo').trigger('click', [11, 22, 4, 7])

    //自定义事件
    $('.demo').on('pageLoad', function (e, a, b, c, d) {
        console.log('click', a, b, c, d)
    })
    $('.demo').trigger('pageLoad', [77, 21, 123, 456])

</script>

</html>

hover方法：可以触发鼠标移入移出的效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温故而知"心"</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background-color: #ff0000;
        }

        .demo1 {
            width: 100px;
            height: 100px;
            background-color: #0000ff;
        }
    </style>
</head>

<body>
    <div class="demo"></div>
    <div class="demo1"></div>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //hover:可以触发鼠标移入移出的效果
    $('.demo').on('mouseenter', () => {
        console.log('enter')
    }).on('mouseleave', () => {
        console.log('leave')
    })

    $('.demo1').hover(() => {
        console.log('enter1')
    }, () => {
        console.log('leave1')
    })

</script>

</html>

keydown:键盘按下事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温故而知"心"</title>
</head>

<body>
    <input type="text" class="demo" />
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //keydown:键盘按下事件
    $('.demo').keydown(function () {
        console.log($(this).val())
    })
</script>

</html>
&XYZ&
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery中on()方法用法实例详解
12-08
本文实例分析了jQuery on()方法的用法。分享给大家供大家参考。具体分析如下： 一、jQuery on()方法的使用：   on(events,[selector],[data],fn)   events:一个或多个用空格分隔的事件类型和可选的命名空间，如”...
jQuery中hover方法和toggle方法使用指南
01-19
jQuery提供一些方法（如：toggle）将两种事件效果合并到一起，比如：mouseover、mouseout；keyup、keydown等 1、hover函数  hover(over,out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这...
jQuery按回车键触发函数onkeydown
巴博尔的学习博客
07-20 1762
jQuery按回车键按触发函数 2020/07/20 在一些项目中，如登录、注册，用户输入密码和用户名后按回车可以登录注册。 首先，需要在body中加上onkeydown 如： <body οnkeydοwn="keyLogin()"> jquery内容 /* 回车键 */ function keyLogin(){ if (event.keyCode==13) //回车键的键值为13 login(); } javascript:window.history.forward(1); /* 登
jQuery的on()、one()与off()事件方法
世界和我们都不该止步于此
04-18 1076
目录 一.on()方法 1.使用on()方法 2.on()方法事件事件委托 3.【重点】使用on()方法给未来要创建的元素绑定事件 二.off()方法 三.one()方法 四.自动触发事件 五.阻止默认行为以及冒泡 一.on()方法 1.使用on()方法 相信我们都不陌生jQuery的on()方法，它可以在匹配元素上绑定一个或者多个事件处理函数，这也是on()方法的一个亮点 $(element).on(events[,selector],callback) //events.
jQuery中on和trigger的使用
weixin_30852367的博客
06-28 124
　　考虑这样的应用场景：我们希望在点击checkbox后，其后紧跟的span标签中的文字会加粗。实现这种功能很简单，只需要在checkbox的click回调方法中完成相应的功能即可。但是如果我们希望在代码中手动（而不是用鼠标点击）触发该事件时，可以使用jQuery的on 和 trigger。 --By Brisk　 　　on： 　　　　给jQuery对象注册一个事件。比如我为每个checkb...
jquery off on trigger
johnhuster的专栏
03-15 1057
jquery off on trigger
JQuery的ON()方法支持的所有事件罗列
10-24
在jQuery库中，`on()`方法是一个非常重要的事件处理函数，它允许我们绑定一个或多个事件处理器到指定的元素上。这个方法自jQuery 1.7版本引入，目的是替代之前的`bind()`, `live()`, `delegate()`等事件处理方法，以...
jquery新的绑定事件机制on方法的使用方法
01-19
浏览jQuery的deprecated列表，发现live()和die()在里面了，赶紧看了一下，发现从jQuery1.7开始，jQuery引入了全新的事件绑定机制，on()和off()两个函数统一处理事件绑定。因为在此之前有 bind(), live(), delegate()...
jQuery中的on与bind绑定事件区别实例详解
01-21
on(events,[selector],[data],fn) events:一个或多个用空格分隔的事件类型和可选的命名空间，如”click”或”keydown.myPlugin” 。 selector:一个选择器字符串用于... jQuery 3.0中已弃用此方法，请用 on()代替。
jQuery绑定事件方法及区别(bind,click,on,live,one)
10-19
主要介绍了jq绑定事件方法及区别,通过五种绑定方式使用bind()进行操作,并和one()进行区分,需要的朋友可以参考下
jQuery绑定事件
qq_41083450的博客
11-10 210
bind() <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-3.3.1.js"></script> </head> <body...
JQuery键盘按下与松开事件
weixin_44542115的博客
01-19 5541
本次任务完成时间：2018年01月19日 开发工具与关键技术：Adobe Dreamweaver CC 2017&amp;&amp;前端页面设计 展示效果：html+css3+JQuery 的应用 效果图： HTML部分: 首先设置几个盒子，用来构建这个页面的大致框架。 给盒子相应的类名以及id，方便css的布局以及JQuery的获取。 在盒子内放入文字。 引用JQuery插件。 CSS部...
实现一个自定义event事件，包括on ,off,trigger,once
weixin_30532759的博客
04-12 573
on监听事件，off取消事件 ，trigger触发事件，once只执行一次 class Event { constructor() { this.handlers = {};//记录所有的事件以及处理函数 /* { click:[fn1,fn2], mo...
jq 事件处理on 事件委派 解绑事件off 自动触发事件trigger/triggerHandler
weixin_42448623的博客
06-06 278
单个事件注册 $("div").click(function(){}) 事件处理on 多个事件处理 $("div").on({ click:function(){}, mouserover:function(){}, .... }) $("div").on('click mouseover',function(){ // 2个事件都会触发该函数 }) 事件委派操作 click事件绑定在ul身上，触发的对象是ul里面的li $("ul").on('click','li',function(){
jQuery源码分析之从on方法看bind,delegate,live,one方法一问
高山上的鱼
10-17 1321
请提前阅读on方法源码分析：点击打开链接 bind方法源码： bind: function( types, data, fn ) { return this.on( types, null, data, fn ); }delegate方法： delegate: function( selector, types, data, fn ) { return this.on( type
jQuery高级事件---on、off、one和事件委托
Twilight's Blog
06-16 6449
on、off、onejQuery1.7 以后推出了.on()和.off()方法，替代之前的方法。on/off整合了bind、unbind、事件委托等方法 on替代bind方法on可以替代bind方法，使用方法和bind一致// 绑定单个事件 $(":button").on("click",function(){ alert("on"); });// 传递数据
jquery 回车事件
乔的博客
06-27 646
全局： $(function(){ document.onkeydown = function(e){ var ev = document.all ? window.event : e; if(ev.keyCode==13) { $('#FormId).submit();//处理事件 } } }); 某个控件： $('#id').keydown(function(e){ if(e.keyCode==13){ $('#FormId).submit(); //处理事件 } }
jQuery中on()方法用法实例
weixin_34104341的博客
03-14 160
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能、定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法用法。分享给大家供大家参考。具体分析如下： 此方法可以在匹配元素上绑定一个或者多个事件处理函数。使用off()方法可以删除on()方法绑定的事件。 语法结构一: $(selector).on(eve...
jquery中on方法有几个参数
最新发布
06-01
jQuery中的`on()`方法有两个基本参数，分别是事件类型和事件处理函数。另外还有两个可选参数，分别是选择器和数据。具体来说，`on()`方法的语法如下： ``` $(selector).on(event, childSelector, data, function) `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值