Jquery click/bind/live/delegate/on事件，阻止默认事件，以及插件的写法

最新推荐文章于 2022-07-05 21:24:49 发布

球球之家/carver

最新推荐文章于 2022-07-05 21:24:49 发布

阅读量1k

点赞数

分类专栏：前端开发文章标签：阻止事件 bind live

前端开发专栏收录该内容

24 篇文章 0 订阅

订阅专栏

事件介绍

1.click()方法是我们经常使用的单击事件方法：

$(“a”).click(function() {
alert(“hello”);
});
当点击时，输出hello。

2.click()方法是bind()方法的一种简单方法。在bind()中，jQuery所有JavaScript事件对象，比如focus, mouseover, 和 resize，都是可以作为type参数传递进来的。我们直接看看jQuery文档中的一个例子：

var message = “left”;
$(“a”).bind(“click”, function() {
alert(message);
return false;
});

var message = “right”;
$(“a”).bind(“contextmenu”, function() {
alert(message);
return false;
});
上边代码中，无论是左键单击还是右键单击输出总是”right”。为了解决这个问题，我们可以将message作为data参数传递到到bind()方法中，如下：

var message = “left”;
$(“a”).bind(“click”, { msg: message }, function(e) {
alert(e.data.msg);
return false;
});

var message = “right”;
$(“a”).bind(“contextmenu”, { msg: message }, function(e) {
alert(e.data.msg);
return false;
});
这样当我们左键单击时，输出”left”；当右键单击时，输出”right”。

可见，一般情况下我们使用click()方法就可以了，当需要处理上边这种情况时，我们要使用bind()方法。

3.live()给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。如下：

$(“div.live”).bind(“click”, function() {
alert(“success”);
});
此时，当点击class为live的div时，输出”success”。此时如果有一个新的元素添加了进来，如下：

$(“

live

“).appendTo(“body”);
这时，当使用上边方法点击class为live的a标签时，不会执行。原因在于，这个元素是在调用bind()之后添加的，而使用live()方法使得在后边添加的元素也能够执行相应的事件，如下：

$(“div.live”).live(“click”, function() {
alert(“success”);
});
这样，当我们单击class为live的a标签时，如果此a标签是后边添加的，也能照常输出”success”。至于原因，在这里不做具体的说明，本篇主要比较几种方法的区别。

最后，看看delegate()方法，这个方法到目前为止我自己还没有使用过，应该是在1.4.2中才有的。

live()方法的一个不足在于它不支持链式写法：

$(“#test”).children(“a”).live(“mouseover”, function() {
alert(“hello”);
});
上边这种写法并不会输出，我们使用delegate()可以写为：

$(“#test”).delegate(“a”, “mouseover”, function() {
alert(“hello”);
});
这样就可以正常的输出我们想要的结果了。本篇总结了click()、bind()、live()和delegate()方法，其中并没有做非常详细的解释，仅望能对大家在具体使用时有所帮助。

下面是

on和插件的实例

<!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>