你還在使用jquery的click(),bind()方法麼?

時間 2019-12-02

標籤還在使用 jquery click bind 方法欄目 JQuery 简体版

原文原文鏈接

這裏只是忽然發現jquery 1.7 以後的事件綁定推薦了一些變化。jquery推薦使用on方法來綁定事件。javascript

相信之前都是用的click,bind,unbind方法吧。html

若是你仔細看看jquery的源碼的話，那麼你會發現bind的方法也是用的on方法來實現的。java

在必定程度上on方法比bind或者是click之類的方法，更高效。jquery

下面只是一個demo，固然這裏包含了jquery的插件的寫法。ajax

關於jquery的插件的寫法，能夠自行百度。若是你的自學能力夠厲害的話，能夠查看jquery的源碼。api

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <title></title>
</head>
<body>
    <input type="button" value="test" id="test"/>
    <script type="text/javascript">
        $(function(){
            $("#test").hello({
                "size":1
            });
        });
    </script>
    <script type="text/javascript">
    ;(function($){
        $.fn.hello = function(options){
            var defaults = {"size":0},

                opts     = $.extend({},defaults,options),

                show = {
                    play:function(options){
                        var _root =  this; 
                        _root.autoPlay();
                        _root.eventClick();
                    },
                    autoPlay:function(){
                        console.log("auto");
                    },
                    eventClick:function(){
                        //$("#test").on("click",{show:"dd"},function(e){
                        //    console.log("click :" +  e.data.show);
                        //});

                        $("#test").on({
                            click:function(){
                                alert("click");
                            },
                            mouseenter:function(){
                                alert("enter");
                            },
                            mouseleave:function(){
                                alert("leave");
                            }
                        });
                    }
                };
            return this.each(function(){
                show.play(opts);
            });
        };
    })(jQuery);
    </script>
</body>
</html>

如裏你從這裏學到了什麼，那麼恭喜！ui