jQuery基础教程学习笔记(五)事件的绑定和解绑
toyiye 2024-09-09 08:56 3 浏览 0 评论
on()的多事件绑定,基本用法:.on( events ,[ selector ] ,[ data ] )
$("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式
也可以多事件绑定 $("#elem").on("mouseover mouseout",function(){ });
多个事件绑定不同函数
$("#elem").on({
mouseover:function(){},
mouseout:function(){}
});
例:$("#test1").on('click', function(e) {
$(this).text('触发事件:' + e.type)
})//事件绑定
on()的委托机制 用法:.on( events ,[ selector ] ,[ data ], handler(eventObject) )
例:$("div").on("click","p",fn) 当用户触发在a元素上,事件将往上冒泡,一直会冒泡在div元素上。如果提供了第二参数,那么事件在往上冒泡的过程中遇到了选择器匹配的元素,将会触发事件回调函数
例: $('body').on('click', 'a', function(e) {
alert(e.target.textContent)
})
解释:给body绑定一个click事件,没有直接a元素绑定点击事件,通过委托机制,点击a元素的时候,事件触发
卸载事件off()方法
例:$("elem").off("mousedown")移除一个mousedown事件!
$("elem").off() 表示移除该节点上的所有事件
例: $(".aaron:first").off('mousedown')
})
jQuery事件对象的作用
事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁。在不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异。jQuery根据 W3C 标准规范了事件对象,所以在jQuery事件回调方法中获取到的事件对象是经过兼容后处理过的一个标准的跨浏览器对象
event.target
target 属性可以是注册事件时的元素,或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托
简单来说:event.target代表当前触发事件的元素,可以通过当前元素对象的一系列属性来判断是不是我们想要的元素
例:$("ul").on('click',function(e){
alert('触发的元素是内容是: ' + e.target.textContent)
})//多事件绑定一
解释:this指的就是$("ul")中的ul,而e.target指的是触发事件的元素li
jQuery事件对象的属性和方法
(1)event.type:获取事件的类型
(2)event.pageX 和 event.pageY:获取鼠标当前相对于页面的坐标
(3)event.preventDefault() 方法:阻止默认行为 ( event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了)
(4)event.stopPropagation() 方法:阻止事件冒泡,也就是不触发的任何前辈元素上的事件处理函数
(5)event.which:获取在鼠标单击时,单击的是鼠标的哪个键 ;event.which也将正常化的按钮按下(mousedown 和 mouseupevents),左键报告1,中间键报告2,右键报告3
(6)event.currentTarget : 在事件冒泡过程中的当前DOM元素,冒泡前的当前触发事件的DOM对象, 等同于this
(7)this和event.target的区别:js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;
例:$("#content").click(function(event) {
$("#msg").html($("#msg").html() + "<p>外层div元素被单击</p>");
event.stopPropagation(); //阻止事件冒泡
});
jQuery自定义事件之trigger事件
trigger() 方法触发被选元素的指定事件类型。$('#elem').trigger('click');
先给元素绑定一个事件,然后通过trigger来触发改事件!
trigger除了能够触发浏览器事件,同时还支持自定义事件,并且自定义时间还支持传递参数
例:$('#elem').on('Aaron', function(event,arg1,arg2) {
alert("自触自定义时间")
});
$('#elem').trigger('Aaron',['参数1','参数2'])
例:$(document).ready(function(){
$("input").select(function(){
$("input").after("文本被选中!");
});
$("button").click(function(){
$("input").trigger("select");
});
});
jQuery自定义事件之triggerHandler事件
triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作,也不会产生事件冒泡。
triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件(比如表单提交)的默认行为,而且只影响第一个匹配元素。
(1)它不会引起事件(比如表单提交)的默认行为
(2).trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素。
由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情。
(3)该方法的返回的是事件处理函数的返回值,而不是具有可链性的 jQuery 对象。此外,如果没有处理程序被触发,则这个方法返回 undefined。
例子://给input绑定一个聚焦事件
$("input").on("focus",function(event,title) {
$(this).val(title)
});
$("#accident").on("click",function() {
alert("trigger触发的事件会在 DOM 树中向上冒泡");
});
//trigger触发focus
$("button:first").click(function() {
$("a").trigger("click");
$("input").trigger("focus");
});
//triggerHandler触发focus
$("button:last").click(function() {
$("a").triggerHandler("click");
$("input").triggerHandler("focus","没有触发默认聚焦事件");
});
jQuery的其他常用方法:
bind() 方法
bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。语法:
$(selector).bind(event,data,function)替代语法:$(selector).bind({event:function, event:function, ...})
例1:
$("button").bind("click",function(){
$("p").slideToggle();
});
例2: $("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
jQuery 事件 - live() 方法
live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。
例:$("button").live("click",function(){
$("p").slideToggle();
});//当点击按钮时,隐藏或显示 p 元素:
jQuery 事件 - load() 方法
当指定的元素(及子元素)已加载时,会发生 load() 事件。该事件适用于任何带有 URL 的元素(比如图像、脚本、框架、内联框架)。根据不同的浏览器(Firefox 和 IE),如果图像已被缓存,则也许不会触发 load 事件。
语法:$(selector).load(function)
例:$("img").load(function(){
$("div").text("Image loaded");
});
jQuery 事件 - one() 方法
one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。当使用 one() 方法时,每个元素只能运行一次事件处理器函数。
语法:$(selector).one(event,data,function)
例:$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});//当点击 p 元素时,增加该元素的文本大小:
jQuery 事件 - ready() 方法
当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。
由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。ready() 函数规定当 ready 事件发生时执行的代码。ready() 函数仅能用于当前文档,因此无需选择器。
三种语法:(1)$(document).ready(function) (2)$().ready(function) (3)$(function)
注意:提示:ready() 函数不应与 <body onload=""> 一起使用。
jQuery 事件 - resize() 方法
当调整浏览器窗口的大小时,发生 resize 事件。resize() 方法触发 resize 事件,或规定当发生 resize 事件时运行的函数。
语法:$(selector).resize()及$(selector).resize(function)
例:$(window).resize(function() {
$('span').text(x+=1);
});
jQuery 事件 - scroll() 方法
当用户滚动指定的元素时,会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数。
语法:$(selector).scroll()
例:$("div").scroll(function() {
$("span").text(x+=1);
});//对元素滚动的次数进行计数:
jQuery 事件 - toggle() 方法
toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
语法:$(selector).toggle(function1(),function2(),functionN(),...)
例:$("p").toggle(
function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);
jQuery 事件 - unbind() 方法
unbind() 方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。
语法:$(selector).unbind(event,function)
例:$("button").click(function(){
$("p").unbind();
});
jQuery 事件 - delegate() 方法
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
语法:$(selector).delegate(childSelector,event,data,function)
例:$("div").delegate("button","click",function(){
$("p").slideToggle();
});//当点击鼠标时,隐藏或显示 p 元素:
jQuery 事件 - undelegate() 方法
undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序。
语法:$(selector).undelegate(selector,event,function)
例:$("body").undelegate(); //从所有元素删除由 delegate() 方法添加的所有事件处理器:
jQuery 事件 - unload 属性
当用户离开页面时,会发生 unload 事件。
语法:event.unload(function)
例:$(window).unload(function(){
alert("Goodbye!");
});//当用户点击链接离开本页时,弹出一个消息框:
jQuery 事件 - die() 方法
die() 方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序。
语法:$(selector).die(event,function)
例:$("p").die();//移除所有通过 live() 方法向 p 元素添加的事件处理程序:
jQuery 事件 - error() 方法
该方法是 bind('error', handler) 的简写方式。
当元素遇到错误(没有正确载入)时,发生 error 事件。error() 方法触发 error 事件,或规定当发生 error 事件时运行的函数。
语法:$(selector).error() 及绑定函数:$(selector).error(function)
例:$("img").error(function(){
$("img").replaceWith("
Missing image!
");
});//如果图像不存在,则用一段预定义的文本取代它:
相关推荐
- 为何越来越多的编程语言使用JSON(为什么编程)
-
JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...
- 何时在数据库中使用 JSON(数据库用json格式存储)
-
在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...
- MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)
-
前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...
- JSON对象花样进阶(json格式对象)
-
一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...
- 深入理解 JSON 和 Form-data(json和formdata提交区别)
-
在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...
- JSON 语法(json 语法 priority)
-
JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...
- JSON语法详解(json的语法规则)
-
JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...
- MySQL JSON数据类型操作(mysql的json)
-
概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...
- JSON的数据模式(json数据格式示例)
-
像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...
- 前端学习——JSON格式详解(后端json格式)
-
JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...
- 什么是 JSON:详解 JSON 及其优势(什么叫json)
-
现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...
- PostgreSQL JSON 类型:处理结构化数据
-
PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...
- JavaScript:JSON、三种包装类(javascript 包)
-
JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...
- Python数据分析 只要1分钟 教你玩转JSON 全程干货
-
Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...
- 比较一下JSON与XML两种数据格式?(json和xml哪个好)
-
JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- r语言矩阵 (127)
- browsererror (114)
- exportexcel (119)
- cv2.bitwise_not (137)
- dump命令 (128)
- es6concat (126)
- heapify (127)
- java.security.egd (130)
- javax.annotation (117)
- jsstringsplit (117)
- js数字 (115)
- maven编译 (132)
- mysqlleft (128)
- nodejsbuffer (149)
- org.apache.commons.httpclient (126)
- org.jsoup (141)
- org.springframework.web (128)
- robotframework-ride (115)
- setnocounton (141)
- socket.gethostbyname (122)
- sqlmid (121)
- time.strptime (133)
- vscode格式化 (125)
- win32con (129)
- window.localstorage (126)