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

时间：2020-12-25 11:35:30
 <!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>

相关文章