<!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. JavaScript中创建命名空间

    引用:http://ourjs.com/detail/538d8d024929582e6200000c   在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺 ...

  2. LINUX常用命令--基础篇（一）

    1. man 对你熟悉或不熟悉的命令提供帮助解释 eg:man ls 就可以查看ls相关的用法 注:按q键或者ctrl+c退出,在linux下可以使用ctrl+c终止当前程序运行. 2. ls 查看目 ...

  3. eclipse 打开文件目录

    用简单的配置方式 eclipse打开当前文件所在文件夹的插件 Run-->External Tools-->External Tools Configurations... new 一个 ...

  4. JS中特殊句子-for in

    for(var i=0;i<len;i++)这样的用法一般都可以用for in 来替代. 例如: var a = ["a","b","c&quo ...

  5. Oracle EBS-SQL (BOM-5):检查有BOM但物料状态为NEW的物料.sql

    select DISTINCT     msi.segment1 成品编码    ,msi.description 成品描述    ,msi.item_type 物料类型    ,msi.invent ...

  6. nodejs的url模块中的resolve()的用法总结

    var url = require('url'); var a = url.resolve('/one/two/three', 'four') , b = url.resolve('http://ex ...

  7. Android中实现ListView圆角效果[转]

    本文演示如何Android中实现ListView圆角效果. 无论是网站,还是APP,人们都爱看一些新颖的视图效果.直角看多了,就想看看圆角,这几年刮起了一阵阵的圆角设计风:CSS新标准纳入圆角元素,特 ...

  8. javaScript操作select

    注意:Option中的O是要大写的,不然语法报错 1.动态创建select       function createSelect(){ var mySelect = document.createE ...

  9. ZeroClipBoard 复制粘贴插件

    ZeroClipboard 1.    引用js 1 <script type="text/javascript" src="/ZeroClipboard.js&q ...

  10. Nutch

    nutch 插件开发[资料整理]:http://my.oschina.net/cloudcoder/blog/472915 Nutch2.3+Mongodb+ElasticSearch:http:// ...