jQuery之 .bind() 方法

最新推荐文章于 2021-02-21 19:16:10 发布

原创最新推荐文章于 2021-02-21 19:16:10 发布 · 432 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习-复习

学习-复习专栏收录该内容

7 篇文章

订阅专栏

本文介绍了jQuery中bind()方法的应用，该方法用于将事件处理程序绑定到元素上。文章通过一个实例展示了如何使用bind()方法来控制文本内容的显示与隐藏，并对比了bind()方法与直接绑定事件的区别。

学的最高境界就是忘记

根据w3c :

定义和用法

bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

将事件和函数绑定到元素

规定向被选元素添加的一个或多个事件处理程序，以及当事件发生时运行的函数。

牛刀小试

<script type="text/javascript">
$(document).ready(function(){
  $("button").bind("click",function(){
    $("p").slideToggle();
  });
});
</script>
<body>
<p>This is a paragraph.</p>
<button>请点击这里</button>
</body>

这个效果就是点击按钮，可以隐藏文本内容，然后在点击，文本再出现。
这是为bind()方法添加的一个click事件。它的等同效果为下：

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle();
    });
});
</script>
<body>
<p>This is a paragraph.</p>
<button>请点击这里</button>
</body>

他们的效果是相同的，不同的是一个是通过bind()方法添加的click事件。另一个直接添加click事件。
当然两个都能实现效果，但是事件肯定不止一个，mouse事件，click事件。。。很多。
而且bind可以添加很多事件，这样写就比较简单了。最后附上w3c的图。
来自w3c
仅为个人观点，如有错误请多指教~~