JQuery 事件绑定和解绑(bind,delegate,on)

最新推荐文章于 2022-01-26 12:38:03 发布
最新推荐文章于 2022-01-26 12:38:03 发布
阅读量835 收藏 2
点赞数
分类专栏： JQuery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/houyanhua1/article/details/79614534
版权


demo.html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>

        //这种绑定事件的方法是不会覆盖的。  //该绑定方式可以通过所有的解绑方式解绑。
//        $(document).click(function () {
//            alert(1);
//        });
//        $(document).click(function () {  
//            alert(2);   //不会覆盖前面的事件
//        });
		//事件解绑 $(document).unbind("click"); 没参数表示解绑所有事件


        //第二种绑定：bind   可以同时绑定多个事件  
//        $(document).bind("click mouseenter", function () {
//            alert(1);
//        })
//        $(document).bind("click mouseenter", function () {
//            alert(2);  //不会覆盖前面的事件
//        })
		//解绑bind方式绑定的事件 $(document).unbind("click");  没参数表示解绑所有事件


        //第三种：delegate(委托)  可以通过父元素document为子元素.box绑定事件
//        $(document).delegate(".box","click mouseenter", function () {
//            alert(1);
//        })
		//解绑delegate方式绑定的事件
		//$(document).undelegate(".box","mouseenter",fn)  //解绑指定的函数，没有fn参数表示解绑所有的函数。


        //第四种：on (重点)  可以传递参数(Json格式)
        $(document).on("click mouseenter",".box",{"name":111}, function (event) {
            alert(event.data.name);  //通过事件event.data来获取数据。
        });
		//解绑on方式绑定的事件
		//$(document).off("mouseenter",".box");

//        $(function () {
//			  //直接为元素绑定事件，可以不通过父元素绑定。(常用)
//            $(".box").on("click", function () {
//                alert(5);
//            })
//        })


    </script>

</head>
<body>
<div class="box" id="aa" style="width: 100px;height: 100px;background-color: pink;"></div>
</body>
</html>


houyanhua1
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery事件绑定与解绑
原地起飞
12-10 1765
今天是一期关于事件的相关概述！！ 一、jQuery 事件注册 二、jQuery 事件处理 1、事件处理 on() 绑定事件 2、事件处理 off() 解绑事件 3、事件处理 trigger() 自动触发事件 一、jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下： 优点: 操作简单，且不用担心事件覆盖等问题。 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。 演示代码 ： &lt.
jQuery源码-事件绑定函数bind/delegate/click...
pythonluo的专栏
03-18 1111
前言:我用的jQuery版本为v2.0.1,jQuery绑定事件的接口有bind/delegate/click等其他方法，但是他们最终调用的还是this.on作为入口 但是jQuery提供两种绑定机制 1.普通事件绑定 2.委托绑定事件 这两中的区别有很大的不同，只是在作用上。委托绑定事件机制能给浏览器带来很大的性能优化。不过两种可以防止浏览器的内存泄露( 特别是在IE中) 今天我用cl
jquery学习篇
liyingying111111的专栏
11-25 720
jquery是一个轻量级的js库，封装很多有用的函数使得代码变得简洁干净。学习jquery常用的函数 1：mouseover(鼠标移上)和mouseleave(鼠标移出) 2：mouseenter()和mouseout()效果雷同 $(document).ready(function(){    $('.table tr').mouseover(function(){       $(t
jQuery绑定事件
Jancy的博客
03-04 451
jQuery提供了4中事件监听的方式，分别是bind、live、delegate、on，解除监听的函数分别是unbind、die、undelegate、off。bindbind(type,data,function(e){}) type：事件类型 data：传入监听函数的数据，通过event.data获取到，可选 function：监听函数，传入event对象 特点：把监听器绑定到目标对象上
document绑定click事件无效_JavaScript绑定/解绑事件兼容代码
weixin_35012431的博客
01-22 502
建议用电脑看比较舒服一点。为元素绑定事件(DOM)除了用对象.onclick=fn这类的方式（这种方式无法绑定多个事件，如果写了多个事件则会发生覆盖），还有： 1 对象.addEventListener("事件类型",事件处理函数,false)--谷歌、火狐和IE9、10、11支持,IE8不支持 2 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支...
jQuery---解除事件
Philo的博客
01-26 5262
jQuery—解除事件 常见的解除事件有三种，往往取决与你绑定事件所用的关键字： 举例1： //绑定事件，使用id选择器给btn1绑定点击事件 $("#btn1").on("click",function(){ console.log("点击事件") }).mouseenter(function(){ console.log("鼠标聚焦事件") }) //点击第二个按钮，解除第一个按钮事件 $("#btn2").on("click",function()
jQuery的三种bind/One/Live/On事件绑定使用方法
10-20
`on()`是jQuery 1.7引入的新事件绑定机制，它统一了`bind()`, `live()`, 和 `delegate()`的功能。`on()`提供了更大的灵活性，可以通过选择器限制事件的传播，同时支持动态绑定和事件委托。`on()`的参数结构如下： ...
jQuery中绑定事件bind() on() live() one()的异同
10-20
on() 方法是 jQuery 1.7 之后推荐的事件绑定方式，它替代了 bind()、live() 和 delegate() 方法。on() 方法同样支持为当前和未来的元素绑定事件，并且可以一次绑定多个事件处理器。实际上，on() 方法是一个更为通用...
jQuery绑定事件方法及区别(bind,click,on,live,one)
10-19
此外，`bind()`、`live()`和`delegate()`在某些早期版本的jQuery中不支持动态创建元素的事件绑定，而`on()`方法解决了这个问题。 了解了这些方法的使用和区别，可以帮助开发者在处理不同情况下的事件绑定时做出更...
jQuery(document).ready(function($) { });的几种表示方法
11-24
在写jquery的时候，因为平时用sublime text快捷键生成jQuery(document).ready(function($) { });，所以忘记了其他的几种表示方法，今天花了几分钟特意记录了一下。
关于jQuery新的事件绑定机制on()的使用技巧
10-27
从jQuery 1.7版本开始，引入了新的事件绑定机制on()，用以替换之前的一些事件绑定方法，如live()、bind()和delegate()等。为了更好地掌握jQuery的最新事件处理技术，下面详细介绍一下on()方法的使用技巧。 ### 新...
jQuery bind事件使用详解
10-28
本文将深入探讨`bind`方法的使用，包括它的基本用法、多事件绑定、自定义事件和命名空间等特性。 首先，`bind`方法的基本用法是将一个或多个事件处理器（函数）附加到指定的元素。例如，以下代码会在用户点击ID为`...
用JS锁定页面滚动条
captainl77的博客
11-21 5902
/**  * 禁用滚动条  */ function unScroll(){ var top=$(document).scrollTop(); $(document).on('scroll.unable',function (e){ $(document).scrollTop(top); }) } /**  * 解除禁用滚动条  */ function removeU
jQuery中的事件（八）：on()、off()、bind()、unbind()、one()、hover()、hide()、show()、offset()等...
weixin_30591551的博客
07-23 287
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>事件</title> <meta http-equiv="content-type" content="text/html; ...
jq事件绑定四种方式
zuo_zuo_blog的博客
05-13 1万+
1. 简单事件绑定： 这种绑定事件方式不会重叠 $(document).click(function () { alert(1); }) 2. bind方式（不推荐，1.7以后的jQuery版本被on取代） $(document).bind("click mouseenter",function () { alert(1); }) 比简单事件绑定方式...
微信开发遇坑事件---未来元素点击事件
yaofare的博客
03-19 537
相信不少人在微信里开发过网页,在非a/button标签时,页面没刷新生成的新元素我们一般都用$(document).unbind('click',".preview_imag").on('click',".preview_imag",function(){            alert(33);        });这样的写法,但是微信里这样点击是没效果的,怎么做呢?很简单 css里这样写即可...
jQuery之事件
缚己
11-05 218
页面加载 DOM 提供了window.onload 属性用来设置页面加载完毕之后执行的代码。当 html 中的 <script> 标签，写在 head 中时 js 代码会优先于 body 标签内的页面内容，所以需要这样一个属性等待页面加载的完成再执行。 jQuery 提供了 ready() 方法用来做页面加载的属性，与 DOM 中的 window.onload 起到了同样的作用。 jQuery 的入口函数执行要高于原生 DOM 的入口函数。 两种入口函数的区别： window.onload：
JQuery 主页面调用子页面(<iframe>)中的JS方法，子页面调用主页面的JS方法
热门推荐
houyanhua1的专栏
01-15 2万+
//调用子页面的方法. var childWindow = $("#addFrame")[0].contentWindow; //表示获取了嵌入在iframe中的子页面的window对象。 []将JQuery对象转成DOM对象，用DOM对象的contentWindow获取子页面window对象。 childWindow.subFunction(); //调用子页面中的subFunction方法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值