jQuery绑定事件-多种实现方式总结

最新推荐文章于 2024-05-17 05:20:49 发布
最新推荐文章于 2024-05-17 05:20:49 发布
阅读量254 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zz_whw/article/details/60781650
版权 
<html>
<head>
<meta charset="utf-8" />
<script src=https://pan.baidu.com/s/1o8GiuOq?qq-pf-to=pcqq.c2c></script>
</head>

<body>
<input type="text"/>
<input type="button" value="button1"/>
<script>
$(function(){
  var text = $(":text");
  var button = $(":button");
  //调试器记录日志 console.log("message"); 如：火狐浏览器，打开FireBug(按F12)
  
  //触发单个事件：两种方式
  button.bind("mouseover",function(){
    console.log("移入");
  });
  button.bind({
    "mouseout": function(){
      console.log("移出");
    }
  });
  //多个事件：三个方式
  text.bind("dblclick blur",function(){
    console.log("双击或者失去焦点");
  });
  text.bind({
    "dblclick blur":function(){
      console.log("双击或者失去焦点");
    }
  });
  text.bind({
    "dblclick":function(){
      console.log("双击");
    },
    blur:function(){
      console.log("失去焦点");
    }
  });
  
  //取消事件
  text.unbind("dblclick"); //取消单个事件
  //text.unbind("dblclick blur"); //取消多个事件
  //text.unbind(); //取消全部事件
});

</script>
</body>
</html>
zz_whw
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习（146）：伪类选择器checked和disable和focus
歌谣的博客
12-18 616
<!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-...
jquery 绑定事件
态度决定一切，努力奋斗ing QQ:8790671
07-20 70
//textarea length属性为 'mylength' 键盘抬起验证事件 span cation属性 'num' 赋值$("textarea[length='lang']").bind("mouseover blur keyup",function(){$(this).siblings("span[name='inputnum']").html($(this).val().length);...
深入学习jQuery事件绑定
weixin_33694172的博客
10-04 92
前面的话 　　javascript有HTML、DOM0级、DOM2级和IE这四种事件处理程序，而jQuery对这四种事件处理程序进行了兼容处理，以更简单的方式就可以实现事件绑定。本文将详细介绍jQuery事件绑定   bind() 　　bind()方法为一个元素绑定事件处理程序，有以下3种使用方法 bind(eventType[,eventData],handler(eventObjec...
Web前端最全硬核解析，巧用案例学习jQuery框架三种事件绑定方式，2024年最新简短的面试总结
最新发布
2301_76278747的博客
05-17 390
四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~祝大家都能收获大厂offer~开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】篇幅有限，仅展示部分内容如：Jquery对象.cilck();点击事件Jquery对象.mouseover();鼠标移入时触发。
Jquery中bind和live的区别
czs1012的专栏
12-20 462
Jquery中绑定事件有三种方法：以click事件为例    （1）target.click(function(){});    （2）target.bind("click",function(){});    （3）target.live("click",function(){}); 第一种方法很好理解，其实就和普通JS的用法差不多，只是少了一个on而已 第二、三种方法都是绑定事件，但
jQuery事件绑定（三）
bwf_erg的博客
01-03 270
四. delegate方法：向匹配元素添加一个或多个事件处理程序 在jquery1.4增加，适用所有版本，但官方推荐使用on方法代替delegate方法 使用方法： $(selector).delegate(childSelector,event,data,function)      参数： childSelector: 必需项；需要添加事件处理程序的元素，一般为selector的子元
JQuery 绑定事件时传递参数的实现方法
12-12
总结来说，jQuery的`bind()`方法提供了多种方式来传递参数给事件处理函数，包括直接使用`this`、匿名函数包裹、利用`event`对象以及通过`data`选项。根据具体需求选择合适的方法，可以更好地组织和管理代码。
jQuery事件绑定与解除绑定实现方法
10-24
值得注意的是，`bind`方法可以同时绑定多种事件，只需传入一个包含多个事件类型的空间分隔字符串，例如：`bind('click mouseover', function() {...})`。 另一方面，`unbind`方法用于移除已绑定的事件处理器。它...
jquery绑定事件
送你一个大西瓜
04-12 286
bind()向匹配元素添加一个或多个事件处理器。 $(selector).bind(event,data,function)live() 向当前或未来的匹配元素添加一个或多个事件处理器； $(selector).live(event,data,function)delegate() 为指定的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegat
jQuery---绑定事件
Philo的博客
01-23 7260
js—绑定事件 文章目录一、最常用方法二、bind函数三、on函数四、delegate函数 一、最常用方法 $(“元素选择器”).事件名称(匿名函数) 举例1： //这里的button为元素选择器，click为鼠标点击事件 $("button").click(function(){ //函数内容 }) 举例2： //这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件 $("#btn1").mouseenter(function(){
Jquery事件绑定
过客如期的博客
02-01 3763
一，前言 1.jquery有四种绑定事件的方式。bind,live,delegate,on。其中live已被移除，bind和delegate底层都是on实现的。 2.jquery建议我们使用on来绑定事件。 3.除原生事件外，jquery支持绑定自定义事件。 一，$(selector).on() 1.$(selector).on(type,[selector],[data],fn)。接受四个参数： type 是事件的类型， selector 代表选择器,当selector参数不为空或者null时，那么事件不
jquery事件绑定
三五月儿的专栏
01-15 496
1、使用$(“#id”).bind(event,[data],function(eventObject))方法将监听器绑定到目标元素上 //type:附加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。如click、change、mouseover等 //data:传入监听函数的参数，通过event.data取到。可选参数。 //function：监听函数，可传入jQuery封装
jQuery事件绑定
m0_67388537的博客
07-07 2353
jQuery 事件对象常用属性也与之前学过的 DOM 事件对象几乎一致，多了一个。旧的 jQuery 事件绑定方法如。jQuery 允许给同一个 jQ 对象的同一个事件绑定多个不同的事件处理函数。jQuery 事件中的事件对象通过事件处理函数的形参获取，事件中的。指向绑定事件的 jQuery 对象代表的 DOM 对象，如果使用。等都可以使用第一种方式绑定事件，但也有特殊的如输入框的。方式添加的事件委托，委托事件处理函数中的。上的属性，与原生事件中的事件对象一致。jQuery 事件中的。
jQuery绑定事件的四种方式
weixin_30732487的博客
08-24 113
jQuery提供了多种绑定事件的方式，每种方式各有其特点，明白了它们之间的异同点，有助于我们在写代码的时候进行正确的选择，从而写出优雅而容易维护的代码。下面我们来看下jQuery中绑定事件的方式都有哪些。 jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。在开始...
JQuery的事件绑定与事件委托
J.Jian博客
01-03 7121
1、事件委托与事件绑定概念 事件绑定：将普通的事件event绑定在DOM节点上，当DOM节点被选中时，将事件与之绑定，方便用户提供相应的操作。比如：在button按钮上绑定click鼠标事件，在input中绑定focusin焦点事件等等，具体的例如：常常在代码中这样写$('.bn1').click(function(){...})就是普通的事件绑定。 事件委托：是指在事件绑定的基础上补充与扩展事件绑
jquery事件绑定与事件委托
weixin_30699443的博客
06-30 91
overflow:auto 加滚动条 scrollTop() 上下滚动条　　scrollLeft() 左右滚动条 $().click(function(){ }) $().bind("click",function(){ }) 绑定事件 $().unbind("click") 解除绑定事件 <button> 按钮标签 $("<li>") 创建标签 $("ul"...
jQuery绑定事件的方法
qiangzhogshou的博客
11-29 142
一、bind方法绑定 <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.3.1.js"></script> </head> <body> <input typ...
Jquery绑定事件的方法
zybijiso666的博客
08-01 878
delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。规定当事件发生时运行的函数(监听函数)，可传入event对象，这里的event是jQuery封装的event对象，与原生的event对象有区别，使用时需要注意。添加一个或多个事件处理程序到当前或未来的被选元素。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值