<!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. 走进C标准库(8)——"string.h"中函数的实现相关字符串操作函数

    我的strcat: char *strcat(char *dest,char *src) { char * reval = dest; while(*dest) dest++; while(*src) ...

  2. Microsoft Project 2010 简体中文专业版 + 永久激活密钥

    Microsoft Project 2010 简体中文专业版 + 永久激活密钥 (2014-02-17 11:44:16) 转载▼ 标签: 文化 分类: 学习 Microsoft Project已成为 ...

  3. __I、__O 、__IO volatile是什么？怎么用？ .

    这是ST库里面的宏定义,定义如下: #define __I volatile const /*!< defines 'read only' permissions */ #define __O ...

  4. Qt Windows下链接子系统与入口函数(终结版)（可同时存在main和WinMain函数）

    Qt Windows下链接子系统与入口函数(终结版) 转载自:http://blog.csdn.net/dbzhang800/article/details/6358996 能力所限,本讨论仅局限于M ...

  5. [LeetCode][Python]Largest Number

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com'https://oj.leetcode.com/problems/largest ...

  6. 详解Spring中的CharacterEncodingFilter--forceEncoding为true在java代码中设置失效--html设置编码无效

    在项目中有很多让人头疼的问题,其中,编码问题位列其一,那么在Spring框架中是如何解决从页面传来的字符串的编码问题的呢?下面我们来看看Spring框架给我们提供过滤器CharacterEncodin ...

  7. brief InformationTechnology theory of evolution

    信息技术进化论简述 无文化流氓帮帮主Ruiy Pk 清华土匪帮帮主YiC 1,按人机交互方式 命令行-->图形界面-->自然交互(语音+手控) Tips:命令行(IBM大型机,小型机+ S ...

  8. libcurl使用示例

    远程下载文件,并将http 头信息存放内存中以及文件大小等相关信息: #include <stdio.h> #include <curl/curl.h> #include &l ...

  9. JQuery 操作input

    获取选中的值 获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var item ...

  10. Android UI高级交互设计Demo

    首先:是google的新标准 Google Material design 开源项目 1.直接拿来用!十大Material Design开源项目 2.收集android上开源的酷炫的交互动画和视觉效果 ...