下午复习:
鼠标滚轮事件:
事件名称:
mousewheel
兼容性:
在火狐中不支持mousewheel 支持 DOMMouseScroll事件
事件对象:
获取滚轮方向的属性:
非火狐:
e.wheelDlta 标记鼠标的滚动方向
火狐中:
e.detail 标记鼠标的滚轮方向
一、键盘事件
当键盘按下的时候触发
绑定方式:
1 document.onkeydown = function(e) { 2 console.log(“键盘按下了”) 3 } |
输出结果:
1 |
当键盘抬起的时候触发
绑定方式:
1 // 键盘抬起 2 document.onkeyup = function() { 3 console.log("键盘被抬起了"); 4 } |
结果:
1 |
当有字符输入的时候触发
绑定方式:
1 // 有字符输入 2 document.onkeypress = function() { 3 console.log("有字符输入了"); 4 } |
结果:
1 |
二、tabIndex
该属性的是html的标准属性
页面中的元素有很多, 当用户失去鼠标的时候,可以通过键盘上的tab键来选择元素
按下tab键是按照顺序来获取元素焦点
按下shift + tab键 是逆序来获取元素的焦点
tabIndex的属性值决定了按下tab键的获取顺序
举例:
1 <ul> 2 <li tabIndex="10">1</li> 3 <li tabIndex="9">2</li> 4 <li tabIndex="8">3</li> 5 <li tabIndex="7">4</li> 6 <li tabIndex="6">5</li> 7 <li tabIndex="5">6</li> 8 <li tabIndex="4">7</li> 9 <li tabIndex="3">8</li> 10 <li tabIndex="2">9</li> 11 <li tabIndex="1">10</li> 12 </ul> |
显示结果:
1 |
三、面向对象
之前我们所写的代码都是面向过程的书写方式:
举例:
1 var name1 = "老王"; 2 var length = 180; 3 var age = 30; 4 var sex = "男"; |
面向过程:
1 var person = { 2 name1: "老王", 3 length: 180, 4 age: 30, 5 sex: "男" 6 } |
也就是说,面向对象是面向过程的另一种书写代码的方式。
四、构造函数
定义构造函数与定义普通函数没有任何区别
定义构造函数首字母要大写,非语法要求
举例:
1 // 定义普通函数 2 function sum() { 3 4 } 5 6 7 // 定义构造函数 8 function Dog() { 9 10 } |
通过构造函数实例化对象:
1 var people = new People(); |
1.1 构造函数四步
构造函数在被new执行的时候,会有四步:
1 1 隐秘的开辟一个新的内存地址 2 2 与this绑定 3 3 执行函数内的语句 4 4 返回this |
所以, 在构造函数内定义函数体的时候要使用this.xx = xx 赋值属性。
6月12日前端培训班仅剩最后几个名额。。。
扫描下方二维码添加微信:haomei0452,领取 前端资料、学费优惠 !
爱创课堂是一家专门做前端培训的机构,由百度高级工程师,《JavaScript设计模式》作者张容铭老师亲自授课,全程20个项目实战,真正做到学习完即可到企业正常工作!
我们前端课程的五大优势:
1. 名师亲自授课,根据企业需求 实时跟进课程大纲,保证学员学到的都是最新的、企业最需要的前端知识点
2. 采取小班教学、上二休一的模式(一个班20—30人,保证老师可以照顾到每一位同学,学员有充足的时间练习)
3. 签订就业协议,帮助学员制作简历,投递简历,模拟面试,不用担心就业问题,目前学员平均就业薪资12K
4. 免费学习一周,不满意不收取任何费用
5. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐
从小白到就业,我们全权负责!
爱创课堂 言行一致、从不忽悠!
请把自己放心的交给我们吧!