JavaScript jQuery事件

初学者liwd 2020-05-05 12:24:54
//$(document).ready() 方法
/*
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
简单地说,这个方法纯粹是对向window.load事件注册的替代方法。通过使用这个方法,
可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。

注意:可以在同一个页面中无限次地使用$(document).ready()事件。
其中注册的函数会按照(代码中的)先后顺序依次执行。
参数说明:fn 要在DOM就绪时执行的函数
在DOM加载完成时运行的代码,可以这样写:
jQuery 代码:
$(document).ready(function(){
// 在这里写你的代码...
});
//简写形式
$(function(){
// 在这里写你的代码...
})
*/

//1.1 jQuery键盘事件 keydown()与keyup()事件
/*
鼠标有mousedown,mouseup之类的事件,这是根据人的手势动作分解的2个触发行为。
相对应的键盘也有这类事件,将用户行为分解成2个动作,键盘按下与松手,针对这样的2种动作,
jQuery分别提供了对应keydown与keyup方法来监听

- keydown()事件
当键盘或按钮被按下时,发生keydown事件。
- keyup()事件
当按钮被松开时,发生keyup事件。它发生在当前获得焦点的元素上。
*/
//$(".target1").keydown(function (e) {
// //console.log(e.target.value);
// $("em").first().text(e.target.value);
//});

//1.2jQuery键盘事件 keypress()事件
/*在input元素上绑定keydown事件会发现一个问题:
注意:每次获取的内容都是之前输入的,当前输入的获取不到

keydown事件触发在文字还没敲进文本框,这时如果在keydown事件中输出文本框中的文本,
得到的是触发键盘事件前的文本,而keyup事件触发时整个键盘事件的操作已经完成,
获得的是触发键盘事件后的文本

当浏览器捕获键盘输入时,还提供了一个keypress的响应,这个跟keydown是非常相似

keypress事件与keydown和keyup的主要区别
只能捕获单个字符,不能捕获组合键
无法响应系统功能键(如delete,backspace)
不区分小键盘和主键盘的数字字符
总而言之,

KeyPress主要用来接收字母、数字等ANSI字符,
而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。
诸如:功能键(F1-F12)、编辑键、定位键以及任何这些键和键盘换档键的组合等。
*/

//1.0 jQuery中的鼠标事件
/*
1. click() 鼠标单击事件 // js onclick
2. dblclick() 鼠标双击事件 // js ondblclick

3. mousedown() 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生mousedown事件
4. mouseup() 当在元素上放松鼠标按钮时,会发生 mouseup 事件。

5. mouseenter() 当鼠标指针穿过元素时,会发生mouseenter事件。该事件大多数时候会与mouseleave 事件一起使用。
6. mouseleave() 当鼠标指针离开元素时,会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用

7.mouseover() 当鼠标指针位于元素上方时,会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用
8.mouseout() 当鼠标指针从元素上移开时,发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用

9. mousemove() 当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。
mousemove事件处理函数会被传递一个变量——事件对象,其.clientX 和 .clientY 属性代表鼠标的坐标

注意!!!
mouseover与mouseenter的区别:
mouseover如果鼠标指针穿过选定元素的任何子元素,都会触发mouseover事件,
mouseenter如果鼠标指针穿过选定元素的任何子元素不会触发mouseenter事件
mouseout与mouseleave的区别:
mouseout不论鼠标指针离开被选元素还是任何子元素,都会触发mouseout事件。
mouseleave只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件
简而言之:就是移动到选定元素的子元素上面是否触发事件
mouseover 子元素 触发
mouseenter 子元素 不触发
mouseout 子元素 触发
mouseleave 子元素 不触发
*/

//1.0 click单击事件
//$(".box").click(function () {
// alert("这是一个click单击事件被触发了")
//});

//2 dblclick鼠标双击事件
//$(".box").dblclick(function () {
// alert("这是一个dblclick鼠标双击事件被触发了")
//});

//3 mousedown 鼠标移动到某个元素上被按下的时候触发的事件
//$(".box").mousedown(function () {
// alert("这是一个mousedown鼠标被按下的时候触发");
//});

//4 mouseup当在元素上放松鼠标按钮时
//$(".box").mouseup(function () {
// alert("这是一个mouseup当在元素上放松鼠标按钮时触发的事件");
//});
...全文
13 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

61,111

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧