技术文章 | Technical articles

JavaScript进阶课堂笔记 第四天(下午)

下午复习:

鼠标滚轮事件:

事件名称:

mousewheel

兼容性:

在火狐中不支持mousewheel 支持 DOMMouseScroll事件

 

事件对象:

获取滚轮方向的属性:

 非火狐:

e.wheelDlta 标记鼠标的滚动方向

火狐中:

e.detail 标记鼠标的滚轮方向

 

一、键盘事件

当键盘按下的时候触发

绑定方式:

document.onkeydown = function(e) {

      console.log(“键盘按下了”)

}

 

输出结果:

图片10.png

 

当键盘抬起的时候触发

绑定方式:

// 键盘抬起

document.onkeyup = function() {

console.log("键盘被抬起了");

}

 

结果:

图片11.png

 

当有字符输入的时候触发

绑定方式:

// 有字符输入

document.onkeypress = function() {

console.log("有字符输入了");

}

结果:

图片12.png

 

二、tabIndex

该属性的是html的标准属性

页面中的元素有很多, 当用户失去鼠标的时候,可以通过键盘上的tab键来选择元素

按下tab键是按照顺序来获取元素焦点

按下shift + tab键 是逆序来获取元素的焦点

tabIndex的属性值决定了按下tab键的获取顺序

 

举例:

<ul>

<li tabIndex="10">1</li>

<li tabIndex="9">2</li>

<li tabIndex="8">3</li>

<li tabIndex="7">4</li>

<li tabIndex="6">5</li>

<li tabIndex="5">6</li>

<li tabIndex="4">7</li>

<li tabIndex="3">8</li>

10  <li tabIndex="2">9</li>

11  <li tabIndex="1">10</li>

12 </ul>

 

显示结果:

图片13.png

 

三、面向对象

之前我们所写的代码都是面向过程的书写方式:

举例:

var name1 = "老王";

var length = 180;

var age = 30;

var sex = "";

 

面向过程:

var person = {

name1: "老王",

length: 180,

age: 30,

sex: ""

}

也就是说,面向对象是面向过程的另一种书写代码的方式。

 

四、构造函数

定义构造函数与定义普通函数没有任何区别

定义构造函数首字母要大写,非语法要求

举例:

// 定义普通函数

function sum() {

}

// 定义构造函数

function Dog() {

10 }

 

通过构造函数实例化对象:

var people = new People();

1.1 构造函数四步

构造函数在被new执行的时候,会有四步:

1  隐秘的开辟一个新的内存地址

2  this绑定

3  执行函数内的语句

4  返回this

所以, 在构造函数内定义函数体的时候要使用this.xx = xx 赋值属性。







6月12日前端培训班仅剩最后几个名额。。。
扫描下方二维码添加微信:haomei0452,领取 前端资料、学费优惠 !



爱创课堂是一家专门做前端培训的机构,由百度高级工程师,《JavaScript设计模式》作者张容铭老师亲自授课,全程20个项目实战,真正做到学习完即可到企业正常工作!

 
我们前端课程的五大优势:

 
1. 名师亲自授课,根据企业需求 实时跟进课程大纲,保证学员学到的都是最新的、企业最需要的前端知识点
 
2. 采取小班教学、上二休一的模式(一个班20—30人,保证老师可以照顾到每一位同学,学员有充足的时间练习

3. 签订就业协议,帮助学员制作简历,投递简历,模拟面试,不用担心就业问题,目前学员平均就业薪资12K

4. 免费学习一周,不满意不收取任何费用

5. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐
 

从小白到就业,我们全权负责!

爱创课堂 言行一致、从不忽悠!

请把自己放心的交给我们吧!


上一篇文章: JavaScript进阶课堂笔记 第四天(上午)
下一篇文章: 为什么要选择爱创课堂学前端?
更多详细内容请访问爱创官网首页:http://www.icketang.com/

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>