首页
学习
活动
专区
圈层
工具
发布

JQuery第三节

2.1. jQuery事件发展历程(了解) 简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐) 简单事件注册 click(handler) 单击事件...事件解绑 unbind方式(不用) $(selector).unbind(); //解绑所有的事件 $(selector).unbind("click"); //解绑指定的事件 undelegate方式...(不用) $( selector ).undelegate(); //解绑所有的delegate事件 $( selector).undelegate( “click” ); //解绑所有的click事件...off方式(推荐) // 解绑匹配元素的所有事件 $(selector).off(); // 解绑匹配元素的所有click事件 $(selector).off("click"); 2.4....//screenX和screenY 对应屏幕最左上角的值 //clientX和clientY 距离页面左上角的位置(忽视滚动条) //pageX和pageY 距离页面最顶部的左上角的位置

99730

前端基础-jQuery事件机制

8.1 jQuery事件发展历程(了解) 简单事件绑定–bind事件绑定–delegate事件绑定–on事件绑定(推荐) 简单事件注册 click(handler) 单击事件 mouseenter(...$(selector).on( 'click', function() {}); on注册事件委托 // 表示给$(selector)绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定...'click'); // 解绑指定的事件 undelegate方式(不用) $( selector ).undelegate(); // 解绑所有的delegate事件 $( selector).undelegate...( 'click' ); // 解绑所有的click事件 off方式(推荐) // 解绑匹配元素的所有事件 $(selector).off(); // 解绑匹配元素的所有click事件 $(selector...// screenX和screenY 对应屏幕最左上角的值 // clientX和clientY 距离页面左上角的位置(忽视滚动条) // pageX和pageY 距离页面最顶部的左上角的位置(会计算滚动条的距离

77320
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    硬核解析,巧用案例学习jQuery框架三种事件绑定方式

    在jquery框架的使用中,难免会遇到按钮或文本框等各种各样的要求要进行相应事件的绑定操作,进行事件的绑定能够增加页面的交互效果,相信在html和js中进行事件的绑定大家都不陌生,那么今天我就来和小伙伴们分享一下利用...Jquery中有三种基本的事件绑定方式,那么我们就以三个小案例的形式来分别和大家讲一下这三种基本的事件绑定方式。...",回调函数) 利用jquery的off()方法可以将的一个事件从jquery对象上解绑。...语法格式如下: jq对象.off("事件名称") 注意:如果off方法不传递任何参数,则将组件上的所有事件全部解绑, 如下面的实例:为第一个按钮绑定一个弹窗事件,点击按钮触发弹窗,点击第二个按钮,解除第一个按钮的弹窗事件...// 解除第一个按钮的绑定事件 $("#btn2").click(function () { alert("第一个按钮解绑了

    2.6K10

    【Java 进阶篇】JQuery 事件绑定:`on` 与 `off` 的奇妙舞曲

    这样,即使在页面加载完成后动态添加了新的列表项,它们仍然会受到事件的监听。 解绑事件 on 方法不仅能绑定事件,还能解绑事件,以避免不必要的执行。...然后,通过 setTimeout 函数模拟了一段时间后的解绑过程。在实际项目中,你可以根据需要来触发解绑操作,例如在特定条件下,或者在页面销毁时。...这样,只有在特定命名空间下绑定的事件才会被解绑,不影响其他事件。 事件数据传递 有时候我们需要在触发事件时传递一些额外的数据。on 方法允许我们通过事件对象的 data 属性来实现这一目的。 在特定命名空间下绑定的事件才会被解绑,不影响其他事件。 小结 通过深入学习 on 和 off 方法,我们已经更好地理解了 JQuery 事件绑定的精髓。...on 方法不仅能够简单直接地绑定事件,还支持多种用法和进阶技巧,包括事件代理、命名空间、事件数据传递等。而 off 方法则是 on 的得力助手,帮助我们灵活地解绑事件,保持代码的整洁和高效。

    64130

    jQuery 事件注册和事件处理

    语法 语法: element.事件(function(){}) $ ("div"). click (function(){事件处理程序 } 其他事件和原生基本-致。...因为普通注册事件方法的不足,jQuery又开发了多个处理方法,重点讲解如下: on(): 用于事件绑定,目前最好用的事件绑定方法 off(): 事件解绑 trigger() / triggerHandler...on()方法优势3:动态创建的元素, click0 没有办法绑定事件,on0 可以给动态生成的元素绑定事件 ("div") .on("click","p", function(){alert ("俺可以给动态生成的元素绑定事件...事件处理 off() 解绑事件 当某个事件上面的逻辑,在特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程我们称为事件解绑。...由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ; 语法 第一种: trigger( element.click() // 第一种简写形式

    4.8K40

    jQuery 事件注册、事件处理

    语法 element.事件(function(){}) $(“div”).click(function(){ 事件处理程序 }) 其他事件和原生基本一致。...​ 因为普通注册事件方法的不足,jQuery又开发了多个处理方法,重点讲解如下: on(): 用于事件绑定,目前最好用的事件绑定方法 off(): 事件解绑 trigger() / triggerHandler...等,其中最好用的是: on() on() 方法在匹配元素上绑定一个或多个事件的事件处理函数 语法 element.on(events,[selector],fn) 1. events:一个或多个用空格分隔的事件类型...事件处理 off() 解绑事件 ​ 当某个事件上面的逻辑,在特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程我们称为事件解绑。..."click", "li"); // 解绑事件委托 如果有的事件只想触发一次, 可以使用 one() 来绑定事件。

    4.7K20

    jQuery 事件注册与事件处理

    缺点: 普通的事件注册不能做事件委托,且无法实现事件解绑,需要借助其他方法。 语法 ?...用于事件绑定,目前最好用的事件绑定方法 off(): 事件解绑 trigger() / triggerHandler(): 事件触发 2.1 事件处理 on() 绑定事件 on()方法在匹配元素上绑定一个或多...事件处理 off() 解绑事件 当某个事件上面的逻辑,在特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程我们称为事件解绑。...jQuery 为我们提供 了多种事件解绑方法:die() / undelegate() / off() 等,甚至还有只触发一次的事件绑定方法 one(),在这里我们重点讲解一下 off() ; 语法 ?...事件处理 trigger() 自动触发事件 有些时候,在某些特定的条件下,我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。

    2.1K41

    jQuery事件处理

    在jQuery中,事件处理是一项重要的功能,它使我们能够对元素的各种交互行为做出响应。jQuery提供了一系列方法来绑定、解绑和触发事件,以及操作事件对象。...以下是一些常用的jQuery事件处理方法:on()方法:用于绑定一个或多个事件处理函数到选中元素上。可以绑定多个事件类型,并可以使用选择器来对特定的子元素进行委托处理。...off()方法用于解绑之前通过on()方法绑定的事件处理函数。可以指定要解绑的事件类型和处理函数。...可以使用click()方法来绑定点击事件处理函数,也可以通过调用click()方法触发点击事件。...hover()方法用于绑定鼠标进入和离开事件处理函数。可以同时指定进入和离开事件的处理函数。

    1.1K30

    第77天:jQuery事件绑定触发

    一、元素操作 1、 高度和宽度 $(“div”).height(); // 高度 $(“div”).width(); // 宽度 .height()方法和.css(“height”)的区别: 返回值不同...2、坐标值 $(“div”).offset(); // 获取或设置坐标值 设置值后变成相对定位 $(“div”).position(); // 获取坐标值 子绝父相 只能读取不能设置 3、滚动条(滚动事件...1、绑定 click/mouseenter/blur/keyup // 绑定事件 bind:$node.bind(“click”,function(){}); // 触发一次 one : $node.one...(“click”,function(){}); delegate : $node.delegate(“p”,”click”,function(){}); on: $node.on(“click”,”p”...,function(){}); 2、 解绑 unbind、undelegate off 3、触发 click : $(“div”).click(); trigger:触发事件,并且触发浏览器默认行为 triggerHandler

    1.7K30

    02-老马jQuery教程-jQuery事件处理

    绑简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。...语法:$dom.one(type,[data],fn) 说明:为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。...如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。...实例: // 解绑所有事件 $("p").unbind() // 将段落的click事件取消绑定 $("p").unbind( "click" ) // 删除特定函数的绑定,将函数作为第二个参数传入...实例: // 解绑所有的on的事件 $("p").off() // 解绑所有的p的委托click事件,所有子元素都被取消绑定 $("p").off( "click", "**" ) // 解绑具体的某个事件处理程序

    3.4K80

    02-老马jQuery教程-jQuery事件处理

    绑定简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。...语法:$dom.one(type,[data],fn) 说明:为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。...如果提供了事件类型作为参数,则只删除该类型的绑定事件。 如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。...实例: // 解绑所有事件 $("p").unbind() // 将段落的click事件取消绑定 $("p").unbind( "click" ) // 删除特定函数的绑定,将函数作为第二个参数传入...实例: // 解绑所有的on的事件 $("p").off() // 解绑所有的p的委托click事件,所有子元素都被取消绑定 $("p").off( "click", "**" ) // 解绑具体的某个事件处理程序

    7.3K00

    【Java 进阶篇】深入理解 JQuery 事件绑定:标准方式

    事件是指用户在页面上进行的操作,比如点击、鼠标移动、键盘输入等。而事件绑定则是将特定的 JavaScript 代码与页面上的某个事件相关联,以便在事件发生时执行相应的操作。...JQuery 的事件绑定机制有两种主要方式:标准方式和简化方式。本篇博客将聚焦于标准方式,通过生动的例子带你逐步掌握这一强大的前端技能。 准备工作 在开始之前,确保你的项目中已经引入了 JQuery。...标准方式:解绑事件 除了绑定事件,有时我们也需要在之后解绑事件,以避免不必要的执行。off 方法就是用于解绑事件的工具,它可以根据事件类型、选择器、回调函数等信息来进行解绑。 绑过程。在实际项目中,你可以根据需要来触发解绑操作,例如在特定条件下、或者在页面销毁时。...总结 通过本篇博客,我们深入学习了 JQuery 的标准事件绑定方式,涵盖了基础事件绑定、事件代理、多个事件类型、解绑事件、阻止默认行为和冒泡、以及事件委托的应用。

    65540

    300ms点击延迟

    300ms点击延迟 移动端的300ms点击延迟是因为移动端可以进行双击缩放的操作,因此浏览器在click之后要等待300ms,看用户有没有下一次点击,也就是判断这次操作是单击还是双击。...如果通过监听touchstart事件来替代click事件的话,会导致一些问题:touchstart是手指触摸屏幕就触发,有时候用户只是想滑动屏幕,却触发了touchstart事件;当页面上有两个元素A和...B,A元素在B元素上重叠放置,如果A元素的touchstart事件绑定的回调函数是隐藏A元素自身,那么当点击A元素后A元素会消失,事件的触发顺序是touchstart -> touchend -> click...,如果在300ms内没有第二次点击便会触发click事件,此时由于A元素消失,那么click事件便落到了B元素上,如果B元素是个链接或者绑定了click事件,那么B元素的默认行为或者是绑定的事件回调便会意外地触发...浏览器在包含width=device-width也就是视口宽度=设备宽度或者设置为比viewport值更小的页面上禁用双击缩放行为,没有双击缩放就没有300ms点击延迟,这种方案没有完全禁用缩放,而是禁用浏览器默认的双击缩放行为

    1.4K20

    jQuery基础--事件处理

    2.1. jQuery事件发展历程(了解) 简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐) 简单事件注册 click(handler) 单击事件...事件解绑 unbind方式(不用) $(selector).unbind(); //解绑所有的事件 $(selector).unbind("click"); //解绑指定的事件 undelegate...方式(不用) $( selector ).undelegate(); //解绑所有的delegate事件 $( selector).undelegate( “click” ); //解绑所有的click...事件 off方式(推荐) // 解绑匹配元素的所有事件 $(selector).off(); // 解绑匹配元素的所有click事件 $(selector).off("click"); 2.4....//screenX和screenY 对应屏幕最左上角的值 //clientX和clientY 距离页面左上角的位置(忽视滚动条) //pageX和pageY 距离页面最顶部的左上角的位置

    2.7K30

    【Java 进阶篇】深入浅出:JQuery 事件绑定的奇妙世界

    事件绑定是指在特定的 HTML 元素上设置一个监听器,用于捕捉用户触发的事件(比如点击、输入、鼠标移动等),并执行相应的操作。在 JQuery 中,事件绑定通常使用 on 方法来完成。...创造奇迹:动态绑定与解绑 在实际开发中,我们经常面临动态添加或移除元素的情况。对于这样的场景,JQuery 提供了动态事件绑定与解绑的方法,让你能够随心所欲地处理事件。...动态事件绑定 动态事件绑定是指在页面加载后,通过代码向元素添加事件监听器。这在处理动态生成的元素或在特定条件下才需要绑定事件的元素时非常有用。让我们通过一个简单的例子来演示动态事件绑定: 在页面加载后的某个时刻解绑了按钮的点击事件。在实际应用中,动态事件解绑通常与某些条件或用户行为相关,例如定时器触发、异步操作完成后等情况。...在表单提交时,通过 submit 事件阻止默认的提交行为,执行其他操作(比如异步验证、数据提交等)。 结语:奇妙世界的探索 通过本文的学习,我们深入了解了 JQuery 事件绑定的基本原理和用法。

    81910

    从零开始学 Web 之 jQuery(六)为元素绑定多个相同事件,解绑事件

    { console.log("bind-obj:click3"); } }); 二、元素绑定事件的区别 先说结论:通过调用事件名的方式和 bind 的方式只能绑定之前存在的元素...,后添加的元素不能绑定事件;而 delegate 和 on 的方式绑定元素的方式可以。...三、解绑事件 用什么方式绑定的事件,最好用什么方式解绑事件。...1、bind 解绑事件 语法: // 解绑单个或多个事件 绑定事件的元素.unbind("事件名1 事件名2 ..."); // 解绑所有的事件 绑定事件的元素.unbind(); PS:unbind...3、on 解绑事件 语法: // 父元素和子元素的所有事件都会解绑 父元素.off(); // 父元素和子元素的单个或多个事件解绑 父元素.off("事件1 事件2 ..."); // 子元素的所有事件解绑

    84920
    领券