开发工具与关键技术:vs JavaScript
作者:王民
撰写时间:2020年5月3日
一.载入事件:
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
简单地说,这个方法纯粹是对向window.load事件注册的替代方法。通过使用这个方法,
可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。
注意:可以在同一个页面中无限次地使用$(document).ready()事件。
其中注册的函数会按照(代码中的)先后顺序依次执行。
参数说明:fn 要在DOM就绪时执行的函数
在DOM加载完成时运行的代码,可以这样写:
jQuery 代码:
$(document).ready(function(){
在这里写代码...
});
简写形式
$(function(){
在这里代码...
})
二.jQuery中的鼠标事件
-
click() 鼠标单击事件
-
dblclick() 鼠标双击事件
-
mousedown() 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生mousedown事件
-
mouseup() 当在元素上放松鼠标按钮时,会发生 mouseup 事件。
-
mouseenter() 当鼠标指针穿过元素时,会发生mouseenter事件。该事件大多数时候会与mouseleave 事件一起使用。
-
mouseleave() 当鼠标指针离开元素时,会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用
7.mouseover() 当鼠标指针位于元素上方时,会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用
8.mouseout() 当鼠标指针从元素上移开时,发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用 -
mousemove() 当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。
mousemove事件处理函数会被传递一个变量——事件对象,其.clientX 和 .clientY 属性代表鼠标的坐标注意!!! mouseover与mouseenter的区别: mouseover如果鼠标指针穿过选定元素的任何子元素,都会触发mouseover事件, mouseenter如果鼠标指针穿过选定元素的任何子元素不会触发mouseenter事件 mouseout与mouseleave的区别: mouseout不论鼠标指针离开被选元素还是任何子元素,都会触发mouseout事件。 mouseleave只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件 简而言之:就是移动到选定元素的子元素上面是否触发事件 mouseover 子元素 触发 mouseenter 子元素 不触发 mouseout 子元素 触发 mouseleave 子元素 不触发
-
jQuery鼠标事件之hover事件
hover([over,]out)
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。
参数说明:
over,out:
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
当鼠标移到元素上或移出元素时触发执行的事件函数
13.jQuery中的focus()获取焦点事件与blur()失去焦点事件(鼠标事件)
13.1 focus() 事件
当元素获得焦点时,触发focus事件。可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数
13.2 blur() 事件
当元素失去焦点时触发 blur 事件。
这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的
13.3 focusin() 事件
当元素获得焦点时,触发 focusin 事件。
focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。
13.4 focusout() 事件
当元素失去焦点时触发 focusout 事件。
focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况
三.jQuery中的表单事件
1.hange()事件
元素,和元素的值都是可以发生改变的,开发者可以通过change事件去监听这些改变的动作
input元素
监听value值的变化,当有改变时,失去焦点后触发change事件。对于单选按钮和复选框,当用户用鼠标做出选择时,该事件立即触发。
select元素
对于下拉选择框,当用户用鼠标作出选择时,该事件立即触发
textarea元素
多行文本输入框,当有改变时,失去焦点后触发change事件
2.select()事件
当textarea或文本类型的input元素中的文本被选择时,会发生 select 事件。
这个函数会调用执行绑定到select事件的所有函数,包括浏览器的默认行为。
可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
3.submit()事件
提交表单是一个最常见的业务需求,比如用户注册,一些信息的输入都是需要表单的提交。
同样的有时候开发者需要在表单提交的时候过滤一些的数据、做一些必要的操作
(例如:验证表单输入的正确性,如果错误就阻止提交,从新输入)此时可以通过submit事件,监听下提交表单的这个动作
使用上非常简单,与基本事件参数处理保持一致
这里需要特别注意:
form元素是有默认提交表单的行为,如果通过submit处理的话,需要禁止浏览器的这个默认行为
,jQuery中可以直接在函数中最后结尾return false即可
4.事件对象常用几个:
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和
(
t
h
i
s
)
的
使
用
、
e
v
e
n
t
.
t
a
r
g
e
t
和
(this)的使用、event.target和
(this)的使用、event.target和(event.target)的使用;
四. 键盘事件:
鼠标有mousedown,mouseup之类的事件,这是根据人的手势动作分解的2个触发行为。
相对应的键盘也有这类事件,将用户行为分解成2个动作,键盘按下与松手,针对这样的2种动作,jQuery分别提供了对应keydown与keyup方法来监听
- keydown()事件:当键盘或按钮被按下时,发生keydown事件。
- keyup()事件: 当按钮被松开时,发生keyup事件。它发生在当前获得焦点的元素上。
注意:在input元素上绑定keydown事件会发现一个问题:
每次获取的内容都是之前输入的,当前输入的获取不到
keydown事件触发在文字还没敲进文本框,这时如果在keydown事件中输出文本框中的文本,
得到的是触发键盘事件前的文本,而keyup事件触发时整个键盘事件的操作已经完成,
获得的是触发键盘事件后的文本
当浏览器捕获键盘输入时,还提供了一个keypress的响应,这个跟keydown是非常相似
keypress事件与keydown和keyup的主要区别
只能捕获单个字符,不能捕获组合键
无法响应系统功能键(如delete,backspace)
不区分小键盘和主键盘的数字字符
总而言之,
KeyPress主要用来接收字母、数字等ANSI字符,
而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。
诸如:功能键(F1-F12)、编辑键、定位键以及任何这些键和键盘换档键的组合等
五.事件的绑定和解绑
1.on()的多事件绑定
之前的鼠标事件,表单事件与键盘事件都有个特点,就是直接给元素绑定一个处理函数,
所有这类事件都是属于快捷处理。翻开源码其实可以看到,所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。
jQuery on()方法是官方推荐的绑定事件的一个方法。
基本用法:on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数。
最常见的给元素绑定一个点击事件,对比一下快捷方式与on方式的不同
$("#elem").click(function(){}) //快捷方式
$("#elem").on(‘click’,function(){}) //on方式
最大的不同点就是on是可以自定义事件名,当然不仅仅只是如何,继续往下看
多个事件绑定同一个函数
$("#elem").on(“mouseover mouseout”,function(){ });
通过空格分离,传递不同的事件名,可以同时绑定多个事件
多个事件绑定不同函数
$("#elem").on({
mouseover:function(){},
mouseout:function(){},
click:function(){}
});
通过空格分离,传递不同的事件名,可以同时绑定多个事件,每一个事件执行自己的回调方法 - 卸载事件off()方法
通过.on()绑定的事件处理程序
通过off() 方法移除该绑定
根据on绑定事件的一些特性,off方法也可以通过相应的传递组合的事件名,名字空间,
选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时,只有与这些参数完全匹配的事件处理函数才会被移除
示范:
【
$(“elem”).on(“mousedown mouseup”,fn)—绑定2个事件----
$(“elem”).off(“mousedown”)—删除一个事件----
$(“elem”).off(“mousedown mouseup”)--------删除所有事件-----------
$(“elem”).off()【 快捷方式删除所有事件,这里不需要传递事件名了,节点上绑定的所有事件讲全部销毁
】
】