jQuery基础(二)
慕课网视频总结
处理表单焦点
表单处理事件focusin事件与focusout事件,同样用于处理表单焦点的事件还有blur与focus事件
它们之间的本质区别:
是否支持冒泡处理
举个简单的例子
<div><input type="text" /> </div>
其中input元素可以触发focus()事件
div是input的父元素,当它包含的元素input触发了focus事件时,它就产生了focusin()事件。
focus()在元素本身产生,focusin()在元素包含的元素中产生
blur与focusout也亦是如此
表单事件之change事件
<input>元素,<textarea>和<select>元素的值都是可以发生改变的,开发者可以通过change事件去监听这些改变的动作
input元素
监听value值的变化,当有改变时,失去焦点后触发change事件。对于单选按钮和复选框,当用户用鼠标做出选择时,该事件立即触发。
select元素
对于下拉选择框,当用户用鼠标作出选择时,该事件立即触发
textarea元素
多行文本输入框,当有改变时,失去焦点后触发change事件
表单事件之select事件
当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。
触发元素的select事件:
$("input").select();
监听提交表单的动作
例如:验证表单输入的正确性,如果错误就阻止提交,从新输入
方法一:$ele.submit()
绑定$ele元素,不带任何参数一般是用来指定触发一个事件,用的比较少
<div id="test">点击触发<div> $("ele").submit(function(){alert('触发指定事件') }) $("#text").click(function(){$("ele").submit() //指定触发事件 });
方法二:$ele.submit( handler(eventObject) )
绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数
这样可以针对事件的反馈做很多操作了
<form id="target" action="destination.html"><input type="submit" value="Go" /> </form> $("#target").submit(function() { //绑定提交表单触发//this指向 from元素 });
方法三:$ele.submit( [eventData ], handler(eventObject) )
使用与方法二一致,不过可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题
<form id="target" action="destination.html"><input type="submit" value="Go" /> </form> $("#target").submit(11111,function(data) { //绑定提交表单触发//data => 1111 //传递的data数据 });
通过在<form>元素上绑定submit事件,开发者可以监听到用户的提交表单的的行为
具体能触发submit事件的行为:
- <input type="submit">
- <input type="image">
- <button type="submit">
- 当某些表单元素获取焦点时,敲击Enter(回车键)
上述这些操作下,都可以截获submit事件。
这里需要特别注意:
form元素是有默认提交表单的行为,如果通过submit处理的话,需要禁止浏览器的这个默认行为 传统的方式是调用事件对象 e.preventDefault() 来处理, jQuery中可以直接在函数中最后结尾return false即可
jQuery处理如下:
$("#target").submit(function(data) { return false; //阻止默认行为,提交表单 });
键盘按下与松手监听
keydown事件:
当用户在一个元素上第一次按下键盘上字母键的时候,就会触发它。使用上非常简单,与基本事件参数处理保持一致,这里使用不在重复了,列出使用的方法
//直接绑定事件 $elem.keydown( handler(eventObject) ) //传递参数 $elem.keydown( [eventData ], handler(eventObject) ) //手动触发已绑定的事件 $elem.keydown()
keyup事件:
当用户在一个元素上第一次松手键盘上的键的时候,就会触发它。使用方法与keydown是一致的只是触发的条件是方法的
注意:
- keydown是在键盘按下就会触发
- keyup是在键盘松手就会触发
- 理论上它可以绑定到任何元素,但keydown/keyup事件只是发送到具有焦点的元素上,不同的浏览器中,可获得焦点的元素略有不同,但是表单元素总是能获取焦点,所以对于此事件类型表单元素是最合适的。
键盘用来接收字母、数字等ANSI字符
在input元素上绑定keydown事件会发现一个问题:
每次获取的内容都是之前输入的,当前输入的获取不到
keydown事件触发在文字还没敲进文本框,这时如果在keydown事件中输出文本框中的文本,得到的是触发键盘事件前的文本,而keyup事件触发时整个键盘事件的操作已经完成,获得的是触发键盘事件后的文本
当浏览器捕获键盘输入时,还提供了一个keypress的响应,这个跟keydown是非常相似,这里使用请参考keydown这一节,具体说说不同点
keypress事件与keydown和keyup的主要区别
- 只能捕获单个字符,不能捕获组合键
- 无法响应系统功能键(如delete,backspace)
- 不区分小键盘和主键盘的数字字符
总而言之,
KeyPress主要用来接收字母、数字等ANSI字符,而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如:功能键(F1-F12)、编辑键、定位键以及任何这些键和键盘换档键的组合等。
on()的多事件绑定
$("#elem").on('click',function(){})
多个事件绑定同一个函数
$("#elem").on("mouseover mouseout",function(){ });
通过空格分离,传递不同的事件名,可以同时绑定多个事件
多个事件绑定不同函数
$("#elem").on({mouseover:function(){}, mouseout:function(){} });
通过空格分离,传递不同的事件名,可以同时绑定多个事件,每一个事件执行自己的回调方法
将数据传递到处理程序
function greet( event ) {alert( "Hello " + event.data.name ); //Hello 慕课网 } $( "button" ).on( "click", {name: "慕课网" }, greet );
可以通过第二参数(对象),当一个事件被触发时,要传递给事件处理函数的
on()的高级用法
委托机制
.on( events ,[ selector ] ,[ data ], handler(eventObject) )
在on的第二参数中提供了一个selector选择器,简单的来描述下
参考下面3层结构
<div class="left"><p class="aaron"><a>目标节点</a> //点击在这个元素上</p> </div>
给出如下代码:
$("div").on("click","p",fn)
事件绑定在最上层div元素上,当用户触发在a元素上,事件将往上冒泡,一直会冒泡在div元素上。如果提供了第二参数,那么事件在往上冒泡的过程中遇到了选择器匹配的元素,将会触发事件回调函数
卸载事件off()方法
- 通过.on()绑定的事件处理程序
- 通过off() 方法移除该绑定
绑定2个事件
$("elem").on("mousedown mouseup",fn)
删除一个事件
$("elem").off("mousedown")
删除所有事件
$("elem").off("mousedown mouseup")
快捷方式删除所有事件,这里不需要传递事件名了,节点上绑定的所有事件讲全部销毁
$("elem").off()
事件对象的作用
<ul><li class="even1"></li><li class="even2"></li><li class="even2"></li>......... </ul>
ul有N个子元素li(这里只写了3个),如果我要响应每一个li的事件,那么常规的方法就是需要给所有的li都单独绑定一个事件监听,这样写法很符合逻辑,但是同时有显得繁琐
因为li都有一个共同的父元素,而且所有的事件都是一致的,这里我们可以采用要一个技巧来处理,也是常说的"事件委托"
事件没直接和li元素发生关系,而且绑定父元素了。由于浏览器有事件冒泡的这个特性,我们可以在触发li的时候把这个事件往上冒泡到ul上,因为ul上绑定事件响应所以就能够触发这个动作了。唯一的问题怎么才知道触发的li元素是哪个一个?
这里就引出了事件对象了
事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁
回到上面的问题,既然事件对象是跟当前触发元素息息相关的,所以我们就能从里面相关的信息,从事件对象中找到 event.target
event.target
target 属性可以是注册事件时的元素,或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托
简单来说:event.target代表当前触发事件的元素,可以通过当前元素对象的一系列属性来判断是不是我们想要的元素
<div class="aaron">
<ul>
<li>点击:触发一</li>
<li>点击:触发二</li>
<li>点击:触发三</li>
<li>点击:触发四</li>
</ul>
</div>
//多事件绑定一
$("ul").on('click',function(e){
alert('触发的元素是内容是: ' + e.target.textContent)
})
事件对象的属性和方法
event.type:获取事件的类型
触发元素的事件类型
$("a").click(function(event) {alert(event.type); // "click"事件 });
event.pageX 和 event.pageY:获取鼠标当前相对于页面的坐标
通过这2个属性,可以确定元素在当前页面的坐标值,鼠标相对于文档的左边缘的位置(左边)与 (顶边)的距离,简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
event.preventDefault() 方法:阻止默认行为
这个用的特别多,在执行这个方法后,如果点击一个链接(a标签),浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了
event.stopPropagation() 方法:阻止事件冒泡
事件是可以冒泡的,为防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数
event.which:获取在鼠标单击时,单击的是鼠标的哪个键
event.which 将 event.keyCode 和 event.charCode 标准化了。event.which也将正常化的按钮按下(mousedown 和 mouseupevents),左键报告1,中间键报告2,右键报告3
event.currentTarget : 在事件冒泡过程中的当前DOM元素
冒泡前的当前触发事件的DOM对象, 等同于this.
this和event.target的区别:
js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;
.this和event.target都是dom对象
如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用;
自定义事件之trigger事件
在jQuery通过on方法绑定一个原生事件
$('#elem').on('click', function() {alert("触发系统事件")});
alert需要执行的条件:必须有用户点击才可以。如果不同用户交互是否能在某一时刻自动触发该事件呢? 正常来说是不可以的,但是jQuery解决了这个问题,提供了一个trigger方法来触发浏览器事件
所以我们可以这样:
$('#elem').trigger('click');
在绑定on的事件元素上,通过trigger方法就可以调用到alert了,挺简单!
再来看看.trigger是什么?
简单来讲就是:根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
trigger除了能够触发浏览器事件,同时还支持自定义事件,并且自定义时间还支持传递参数
$('#elem').on('Aaron', function(event,arg1,arg2) {alert("自触自定义时间")}); $('#elem').trigger('Aaron',['参数1','参数2'])
trigger触发浏览器事件与自定义事件区别?
- 自定义事件对象,是jQuery模拟原生实现的
- 自定义事件可以传递参数
自定义事件之triggerHandler事件
trigger事件还有一个特性:会在DOM树上冒泡,所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡
trigger事件是具有触发原生与自定义能力的,但是存在一个不可避免的问题: 事件对象event无法完美的实现,毕竟一个是浏览器给的,一个是自己模拟的。尽管 .trigger() 模拟事件对象,但是它并没有完美的复制自然发生的事件,若要触发通过 jQuery 绑定的事件处理函数,而不触发原生的事件,使用.triggerHandler() 来代替
triggerHandler与trigger的用法是一样的,重点看不同之处:
- triggerHandler不会触发浏览器的默认行为,.triggerHandler( "submit" )将不会调用表单上的.submit()
- .trigger() 会影响所有与 jQuery 对象相匹配的元素,而 .triggerHandler() 仅影响第一个匹配到的元素
- 使用 .triggerHandler() 触发的事件,并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的,那么它就不会进行任何处理
- 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反,.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件,会返回 undefined
jQuery基础(二)相关推荐
- Day21 jQuery 基础二
Jquery jquery是一个js的代码库 通过jQuery查找DOM元素要比原生js快捷很多 jQuery允许开发者使用CSS1-CSS3几乎所有的选择器,以及jQuery独创的选择器 引入jQu ...
- jQuery基础二DOM操作
DOM:Document Object Model的缩写,中文是文档对象模型,根据W3C DOM规范(htttp://www.w3.org/DOM ),它是一种与浏览器.平台.语言无关的接口,该接口可 ...
- Jquery基础之DOM操作
Jquery基础之DOM操作 Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DO ...
- Bootstrap基础二十七 多媒体对象(Media Object)
Bootstrap<基础二十七> 多媒体对象(Media Object) 原文:Bootstrap<基础二十七> 多媒体对象(Media Object) Bootstrap 中 ...
- 《jQuery基础》总结
目前,互联网上最好的jQuery入门教材,是Rebecca Murphey写的<jQuery基础>(jQuery Fundamentals).这本书虽然是入门教材,但也足足有100多页.我 ...
- Bootstrap基础二 网格系统
原文:Bootstrap<基础二> 网格系统 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什 ...
- jQuery基础简介
jQuery基础简介 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Visual Studio 2015 jQuery ...
- jQuery基础——选择器
一.基础知识 jQuery选择器返回的结果(jQuery对象)都是数组的形式. jQuery对象 和 Dom对象转换: - jQuery对象[下标(索引)] => Dom对象 - $(Do ...
- jQuery基础(菜鸟教程,建议收藏不然怕你后悔!)
jQuery基础 在线使用:jquery (v3.6.0) - jQuery 是一个高效.精简并且功能丰富的 JavaScript 工具库.它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTM ...
- Js与Jq实战:第七讲:jQuery基础
第七讲:jQuery基础 一.预习笔记 1.jQuery的简述 2.jQuery对象与JS对象 3.jQuery的基本选择器 4.jQuery层次选择器 5.jQuery基本过滤选择器 6.jQuer ...
最新文章
- 区块链带来的价值包括哪些_爱链社区干货:区块链技术为冷链物流带来的了那些价值?...
- 零基础自学python的建议-经验之谈——大学时候,我是如何零基础自学Python的?...
- 拥抱开源IaaS云平台:360度盘点OpenStack
- Dubbo 迈出云原生重要一步 - 应用级服务发现解析
- 数据库系统概念总结:第十一章 索引与散列
- 合肥站 | 神策 2019 数据驱动大会「PPT 下载」新鲜出炉!
- Java9 新特性 详解
- 安卓系统校园招聘平台APP答辩PPT免费下载
- 配置devtools热部署
- 【转载】StreamInsight系列-QueryTemplate\QueryBinder\Query
- 苹果谷歌双双被曝,你的手机正在窃听你的生活
- 小数形式与科学计数法转换c语言,BUAA小数形式与科学计数法转换(简)
- 小白能读懂的 《手把手教你学DSP(TMS320X281X)》第六章 使用c语言操作dsp寄存器(以SCI为例进行说明))
- 项目进度管理-活动历时估算工具技术:三点估算
- Linux 修改密码出现“鉴定令牌操作错误”
- python核心技术与实战,Python核心技术与实战——十五|深入了解迭代器和生成器...
- SAP RETAIL 自动补货WRP1R事务代码报错 - Forecast values for determining target stock do not exist -
- 服装进销存2022年排行榜,新手小白必看!
- 个人网站接入live2d详细教程
- UI基础三:简单的BOL报表开发