鼠标滑轮事件的差异onmousewheel和DOMMouseScroll

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>鼠标滑轮事件 onmousewheel, DOMMouseScroll</title>
    <style>
    body{width:100%;  height:400px; background:#eee;}
    h2{font-weight:normal;}
    </style>
</head>
<body>
<h2 id='rtn'>0</h2>
<script>
    function $(id){return document.getElementById(id);}
    
    // firefox不能通过 dom.eventtype=fn 这样的方式定义 鼠标滑轮事件
        if(document.addEventListener) document.addEventListener('DOMMouseScroll', function(e){$('rtn').innerHTML=parseInt($('rtn').innerHTML,10)+e.detail/3+''; }, false);
    
    
        document.onmousewheel=function(e){
        e=e||window.event;
        $('rtn').innerHTML=parseInt($('rtn').innerHTML,10) +e.wheelDelta/120+'';
        };
    
    // firefox通过 addEventListener('DOMMouseScroll', fn, false) 这样的方式添加 鼠标滑轮事件
    // ie chrome safari opera等浏览器 通过 html dom事件方式添加  dom.event=fn

    //滑轮方向 判断  firefox , event.detail  取值 向上 -3 ，向下 3
    // 滑轮方向判断 ie chrome opera safari 取值 向上 120，向下 -120

</script>
</body>
</html>

相关阅读:
angular ngIf指令以及组件的输入输出
angular 命令行指令总结
angular8.x 事件的处理和样式绑定
nodejs更新版本（windows）
angular重要指令 ngFor
emmet 常用总结
手机真机调试（ng项目)
最长回文子串
最长连续序列
重复的子字符串

原文地址：https://www.cnblogs.com/stephenykk/p/3123066.html