前端提高篇(九十五)：jQuery事件：焦点、滚轮、取消默认等事件

2. keydown / keyup / keypress

---

keydown：在键按下时，开始监听；文字输入之前，结束监听

keypress：键被按下

keyup：键松开

如果三个事件都绑定了，监听的顺序是，先keydown，再keypress，最后keyup

keydown和keypress可以获得输入文本的编码，keydown获得键值编码，keypress获得字符的ASCII码值

当我输入’q’时，keydown返回q的键值，与Q的ASCII码值一致；keypress返回q的ASCII码值，

q与Q的键值一样，ASCII值不一样，所以当我们只需要判断是哪个键被按下时，用keydown

当我输入’?'时，keydown返回191，keypress返回63（问号的ASCII码值）

3. scroll()

---

滚轮事件：滚动滚动条时触发

demo：做一个永远不到底的滚动条，类似看多少呈现多少，目前加载出来的看完了，再加载新内容的功能（懒加载）

0

1

2

.wrapper {

width: 400px;

margin: 0 auto;

}

.item {

width: 200px;

height: 300px;

background: pink;

margin-top: 10px;

}

$(window).scroll(function(){

if ($(document).scrollTop() + $(window).height() >= $(‘body’).height() ){

${(}^{\prime }.wrappe{r}^{\prime }).append{(}^{\prime }<divclass="item"{>}^{\prime }+$(‘.item’).length+‘’)

}

})

另外加一个小显示区域版本的：

0

1

2

.box {

width: 500px;

height: 600px;

border: 1px solid #000;

margin: 0 auto;

overflow: auto;

}

.wrapper {

width: 400px;

margin: 0 auto;

/* border: 1px solid #000; */

}

.item {

width: 200px;

height: 200px;

background: pink;

margin-top: 10px;

}

$(‘.box’).scroll(function(){

if ($(‘.box’).scrollTop() + $(‘.box’).height() >= $(‘.wrapper’).height() ){

${(}^{\prime }.wrappe{r}^{\prime }).append{(}^{\prime }<divclass="item"{>}^{\prime }+$(‘.item’).length+‘’)

}

})

具体位置关系，看这篇文章的scrollTop、scrollLeft部分

效果：

4. 其他事件

---

4.1 event.pageX() / event.pageY()

这个在之前的案例中已经使用过了，鼠标事件中使用过，分别是鼠标的x坐标和y坐标

4.2 event.preventDefault / event.stopPropagation：取消默认事件、取消冒泡

取消a标签的默认跳转事件：

百度一下 你就知道

$(‘a’).click(function(e){

e.preventDefault();

})

效果：本来a标签点击之后会跳转，取消了默认事件之后，就不会跳转了

取消mouseover的默认冒泡操作：

用前一篇鼠标事件的案例：

box

.wrapper {

width: 300px;

border: 1px solid #000;

padding: 30px;

}

.box {

width: 100px;

height: 100px;

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。