<!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>

     <title>Document</title>

     <style>

         *{margin:0;padding:0}

         html,body{width:100%;height:100%;overflow: hidden;position:relative}

         #div1{width:100%;height:100%;background: #f0f;position: absolute}

         #div2{width:100%;height:100%;background: #00f;position: absolute;left:0}

         .top{top:100%;}

         .bottom{top:0}

         .hide{display: none}

     </style>

     <link rel="stylesheet" href="animate.min.css"/>

 </head>

 <div id="div1" class="animated">

 </div>

 <div id="div2" class=" bottom hide">

 </div>

 <body>

 <script src="jquery.js"></script>

 <script>

 //    $(function(){

 //

 //        $("#div1").click(function(){

 //            $("#div2").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {

 //                $("#div2").removeClass(effect);

 //            });

 //            var effect = 'animated bounceInUp';

 //            $("#div2").removeClass("hide").addClass(effect);

 //        })

 //        $("#div2").click(function(){

 //            $("#div2").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {

 //                $("#div2").removeClass(effect).addClass("hide");

 //            });

 //            var effect = 'animated bounceOutDown';

 //            $("#div2").addClass(effect);

 //

 //        })

 //    })

 </script>

 <script>

     $(function(){

         $("#div1")[0].addEventListener("click",function(){

             alert(11);

         $("#div1")[0].removeEventListener("click",arguments.callee,false)

         },false)

     })

 </script>

 </body>

 </html>

addEventlistener监听的事件完成一次后自动取消与jquery的one方法比较；animate动画制作，arguments.callee的用法的更多相关文章

  1. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  2. JS 中的事件绑定、事件监听、事件委托

    事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有 ...

  3. javascript事件监听与事件委托

      事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件 ...

  4. 在Javascript中监听flash事件(转)

    在Javascript中监听flash事件,其实有两种做法: 1.在特定的环境下(例如专门制作的flash),大家约定一个全局函数,然后在flash的事件中用ExternalInterface.cal ...

  5. vue监听滚动事件，实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...

  6. Vue 爬坑之路（七）—— 监听滚动事件 实现动态锚点

    前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑 ...

  7. vue监听滚动事件-元素固定位置显示

    1.监听滚动事件 用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.hand ...

  8. vue监听滚动事件 实现某元素吸顶或者固定位置显示

    https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首 ...

  9. JS 事件绑定、事件监听、事件委托详细介绍

    原:http://www.jb51.net/article/93752.htm 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代 ...

随机推荐

  1. HTML5兼容IE各版本的写法

    IE下判断IE版本的语句 <!--[if lte IE 6]> <![endif]--> IE6及其以下版本可见   <!--[if lte IE 7]> < ...

  2. 微信网页授权java实现

    功能:主要用于在用户通过手机端微信访问第三方H5页面时获取用户的身份信息(openId,昵称,头像,所在地等..)可用来实现微信登录.微信账号绑定.用户身份鉴权等功能.     开发前的准备: 1.需 ...

  3. stormzhang的推荐！

    欢迎转载,但请务必在明确位置注明出处!http://stormzhang.com/android/2014/07/07/learn-android-from-rookie/ QQ交流群:入群理由请正确 ...

  4. android 获取http网络图片保存png

    1.android 获取网络图片的方式很多,普通网络通信的方式都可以用在获取网络图片上. android   http获取数据常用的方式: 1.Apache接口(HttpClient) 2.标准Jav ...

  5. eclipse快捷键说明

    Ctrl+1 快速修复(最经典的快捷键,就不用多说了) Ctrl+D: 删除当前行  Ctrl+Alt+↓ 复制当前行到下一行(复制增加) Ctrl+Alt+↑ 复制当前行到上一行(复制增加) Alt ...

  6. Unix/Linux环境C编程入门教程(5) Red Hat Enterprise Linux(RHEL)环境搭建

    Unix/Linux版本众多,我们推荐Unix/Linux初学者选用几款典型的Unix/Linux操作系统进行学习. 通过./a.out ./Y.out执行出结果,证明C++程序编译成功,也就说明li ...

  7. 2016 Multi-University Training Contest 1 总结

    算是组队后第一次打比赛吧. 09题开始就有人过了,看到题目,这不是轮廓线DP的裸题么?!!,一发WA告终,然后发现题目是有改动的.还是太心急了. 然后我读了第一题,是最小生成树求期望距离,我把题意说了 ...

  8. 一个基于Qt的截屏程序

    最近有一个arm板上的程序需要重写用户手册,在网上找了许久,没找到合适的截屏工具.于是只好自己动手做一个了. 因为arm板上有已经有了Qt环境,于是想到用 Qt的QPixmap::grabWindow ...

  9. Java用Dijkstra算法实现地图两点的最短路径查询（Android版）

    地图上实现最短路径的查询,据我了解的,一般用Dijkstra算法和A*算法来实现.由于这是一个课程项目,时间比较急,而且自己不熟悉A*算法,所以参考网上的Dijkstra算法(http://blog. ...

  10. bootstrap-dialog的使用

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...