滚轮事件与浏览器内核

鼠标滚轮事件

mousewheel事件,可以在任何元素上触发,最终会冒泡到document(IE8)window(IE9、Opera、Chrome等)对象。

与mousewheel事件对应的event对象除了包含鼠标事件的所有标准信息之外,还包含一个特殊的wheelDelta属性;当用户向前滚动鼠标滚轮时,wheelDelta是120的倍数,当用户向后滚动鼠标滚轮时,wheelDelta是-120的倍数。

栗子:

       Event.addHnadler(document, "mousewheel", function (event) {

       event = EventUtil.getEvent(event);

       alert(event.wheelDelta);

       });

注意:

鼠标滚轮事件在IE和谷歌浏览器Chrome下是通过onmousewheel这个事件实现的,但是Firefox下却不识别onmousewheel,在Firefox浏览器中,支持一个名为DOMMouseScroll的事件,也是在鼠标滚轮滚动时触发,有关鼠标滚轮的信息保存在detail属性中,当向前滚动滚轮时,其值为-3的倍数,当向后滚动滚轮时,其值为3的倍数

在IE和Chrome下通过event.wheelDelta的返回值可以知道滚轮是向上滚的还是向下滚的

当返回值为正值的时候,说明是向上滚

当返回值是负值的时候,说明是向下滚

但是对火狐下并不起作用,在火狐下需要通过event.detail来知道滚轮是向上滚的还是向下滚,火狐下还有一点不同:

当返回值为正值的时候,说明是向下滚

当返回值是负值的时候,说明是向上滚

浏览器内核

浏览器内核分成两部分渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎

渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具

渲染引擎:

 firefox使用gecko引擎

 IE使用Trident引擎

 2015年微软推出自己新的浏览器,原名叫斯巴达,后改名edge,使用edge引擎

 opera最早使用Presto引擎,后来弃用

 chrome\safari\opera使用webkit引擎

 13年chrome和opera开始使用Blink引擎

js引擎:

 老版本IE使用Jscript引擎

 IE9之后使用Chakra引擎

 edge浏览器仍然使用Chakra引擎

 firefox使用monkey系列引擎

 safari使用的SquirrelFish系列引擎

 Opera使用Carakan引擎

 chrome使用V8引擎。nodeJs其实就是封装了V8引擎

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • DOM3级事件中定义了以下9个鼠标事件: click:在用户单击主鼠标按钮或者按下回车键时触发。意味着onclic...
    陆lmj阅读 1,323评论 0 1
  • JavaScript 与 HTML 间通过事件实现交互。事件——文档或浏览器窗口中发生的一些特定的交互瞬间,即用户...
    sylvia_yue阅读 582评论 0 0
  • 事件类型 Web 浏览器中可能发生的事件有很多类型UI事件:当用户与界面上的元素交互时触发。焦点事件:当元素获得或...
    shanruopeng阅读 1,011评论 0 0
  • 事件处理程序在应用中是必不可少的,虽然现在很多框架都有自己实现事件处理方法,但是熟知原生才能让我们应对各种各样的需...
    俗三疯阅读 378评论 0 1
  • 两年前,去金堂支教,本是一场平凡的不能再的旅行,在途中却遇到了一位至今都有少许联系的人。 他是北语的研究生,是...
    如树如书阅读 267评论 0 1

友情链接更多精彩内容