addEventListener() 事件监听的demo
2018-08-27 本文已影响146人
楠楠_c811
工作中用到了事件监听，所以专门又提溜出来复习了一下，顺手写个总结，上个小demo，方便大家也方便我下次再忘记时候拿出来回忆。
首先来复习一下概念性的东西吧，我知道大家不喜欢这样，我也不喜欢，但是很无奈，我只能通过这种方法多看一遍多加深一下印象，毕竟我智商有限，脑子跟电脑不能比，不是需要就能直接搞定，需要多看几遍才能印象深刻。
addEventListener() 语法
target.addEventListener(type, listener, useCapture);
target 文档节点、document、window 或 XMLHttpRequest。
type 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener 实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture 是否使用捕捉，看了后面的事件流一节后就明白了，一般用 false。
示例:
//设置一个函数 Go
function Go()
{
//...
}
//绑定事件监听，语法格式如下
document.getElementById("testButton").addEventListener("click", Go, false);
//或者 listener 直接写函数也可以
document.getElementById("testButton").addEventListener("click", function () { ... }, false);
OK，基础语法搞清楚之后，我们来看一下我的小demo。
我这是个动画效果的demo，引入的script标签中都是已经封装好的动画源码，需要用静态文件的可以省掉这一步，相应的修改一下布局标签中的内容就可以了。
静态布局很简单，只是放了几个标签，引入了动画源码。最后一个js文件是当前要用的js文件。
<body>
<div style="height:1880px">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<script src="../js/lib/haiku/HaikuCore.4.0.0.min.js"></script>
<script src="../js/lib/haiku/ani0.js"></script>
<script src="../js/lib/haiku/ani1.js"></script>
<script src="../js/lib/haiku/ani2.js"></script>
<script src="../js/index.js"></script>
</body>
下面就是就是js文件的所有代码了。
// 鼠标滚动监听
(function () {
// 定义初始播放状态为假
let div1Played = false;
// 为第一个动画封装函数
function div1Palay(){
// 判断动画播放状态，如果不为假，就进判断
if(!div1Played){
// 初始设置为真
div1Played = true;
let component = HaikuComponentEmbed_tsinrong_walletmotion1(
// 获取div
document.getElementById('div1'),
// 禁止自动播放
{loop:false}
);
}
}
// 方法
let scrollFunc = function (e) {
// 判断滚动位置小于多少像素的时候执行第一个动画
if(document.documentElement.scrollTop < 300) {
div1Palay();
}
}
// 处理火狐浏览器兼容
// 判断如果有鼠标滚动事件
if(document.addEventListener) {
// addEventListener 用于向指定元素添加事件，可以向一个元素添加多次多样事件，后者不会覆盖前者
// DOMMouseScroll 专门用于火狐浏览器添加滚轮事件，其它浏览器使用onmousewheel
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
// 鼠标滚动触发scrollFunc方法 //ie 谷歌
window.onmousewheel = document.onmousewheel = scrollFunc;
})();
感兴趣的可以动手试一下哦，有问题和建议也可以留言。
谢大家能有耐心看我写这么多，拜拜了您嘞 ～～
