事件绑定（bind()、on()）

来源：互联网发布：网卡mac ip绑定编辑：程序博客网时间：2024/05/30 04:56

bind()

1、简要描述：bind()向匹配元素添加一个或多个事件处理器。
2、使用方式：$(selector).bind(event,data,function)
3、参数设置：

event：必需项；添加到元素的一个或多个事件(例如 click,dblclick等；单事件处理：例如$(selector).bind("click",data,function);多事件处理：1.利用空格分隔多事件，例如$(selector).bind("click dbclick mouseout",data,function);利用大括号灵活定义多事件，例如$(selector).bind({event1:function,event2:function,...})空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；)
data：可选；需要传递的参数；
function：必需；当绑定事件发生时，需要执行的函数；

on()

1、简要描述：on() 为指定的元素,添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
2、使用方式：$(selector).on(event,childselector,data,function)
3、参数设置：

event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等； (单事件处理：例如$(selector).on("click",childselector,data,function);多事件处理：利用空格分隔多事件，例如 $(selector).on("click dbclick mouseout",childseletor,data,function);利用大括号灵活定义多事件，例如 $(selector).on({event1:function, event2:function, …},childselector);空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；)
childSelector: 可选；需要添加事件处理程序的元素，一般为selector的子元素；　
data：可选；需要传递的参数；
function：必需；当绑定事件发生时，需要执行的函数；

异同点：

相同点：

　　1.都支持单元素多事件的绑定；空格相隔方式或者大括号替代方式;

　　2.均是通过事件冒泡方式，将事件传递到document进行事件的响应；
　　
不同点：
　　1.jQuery1.7版本出来之后，官方已经不推荐用bind()，替代函数为on();
　　2.bind()函数只能针对已经存在的元素进行事件的设置；但是on()支持未来新添加元素的事件设置；演示代码如下:

<!DOCTYPE html><head>    <title></title>    <style type="text/css">        .container        {            width: 300px;            height: 300px;            border: 1px #ccc solid;            background-color: Green;        }        .btn-test        {            border: 1px #ccc solid;            padding: 5px 15px;            cursor: pointer;        }    </style>    <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            //利用bind()方法，给P标签设置click方法   （失败）            $(".container p").bind("click", function () {                alert("bind()添加单击事件成功!");            });            //利用on()方法.给P标签设置click方法  （成功）            $(".container").on("click", "p", function () {                //显示隐藏div                alert("on()添加单击事件成功!");            });            //按钮添加P标签            $(".btn-test").click(function () {                $(".container").append("<p>这是新增的段落!</p>");            });        });    </script></head><body>    <input type="button" class="btn-test" value="添加元素" />    <div class="container">    </div></body></html>

0 0