技术文章 | Technical articles

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

 一、鼠标滚轮事件

事件名称: onmousewheel  

兼容性: 火狐不支持onmousewheel  支持DOMMouseScroll事件

该事件触发条件: 当鼠标滚轮滚动的时候触发。

 

绑定方式:

// document绑定鼠标滚轮事件

document.onmousewheel = function() {

console.log("滚动滚轮了");

}

 

chrome中滚动:

图片1.png

 

IE中滚动滚轮:

图片2.png

 

在火狐中滚动滚轮 没有反应

原因是因为火狐不支持 mousewheel事件

支持方式:

document.addEventListener(DOMMouseScroll, function() {})

 

图片3.png

 

二、事件对象

在鼠标的点击事件中, 我们关心的是鼠标的位置

在鼠标滚轮事件中,我们关心的是滚轮的方向

 

chrom向下滚动:

图片4.png

 

chrome中向上滚动:

图片5.png

 

IE中向下滚动:

图片6.png

 

IE中向上滚动:

图片7.png

总结:

在非火狐中(IEchrome)指示鼠标滚轮方向的属性是: e.wheelDelta

向下滚动: -120的倍数

向上滚动: 120的倍数

 

在火狐中向下滚动:

图片8.png

 

在火狐中向上滚动:

图片9.png

 

总结:

在火狐中指示鼠标滚轮方向的属性是: e.detail

向下滚动: 3的倍数

向上滚动: -3的倍数







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



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

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

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

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

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

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

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

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

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

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

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

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