jQuery中的事件绑定与委托

alwaysPractice

于 2018-03-26 09:35:32 发布

阅读量2.1w

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： jQuery中的事件

本文链接：https://blog.youkuaiyun.com/jjjndk1314/article/details/79689197

web前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了使用jQuery进行事件处理的各种方法，包括页面加载完成后的事件初始化、直接绑定点击事件、使用事件委托提高性能以及动态添加元素的事件绑定。通过具体实例展示了不同场景下选择合适事件处理方式的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常见的几种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<script src="jquery-3.1.1.js"></script>
<script>
    // 事件准备加载方式一
   $(document).ready(function () {
        $("ul li").html(5);
   });
// 事件准备加载方式二
     $(function () {
        $("ul li").html(5);
     });

//事件绑定简单形式
   var eles=document.getElementsByTagName("li")
   eles.onclick=function () {
       alert(123)
   }

   $("ul li").click(function () {
       alert(6666)
   });

   $("ul li").bind("click",function () {
       alert(777)
   });

    //事件委托
   $('ul').on("click","li",function () {
      alert(999);
   });

   $("button").click(function () {

           var $ele=$("<li>");
           var len=$("ul li").length;
           $ele.html((len+1)*1111);
           $("ul").append($ele)
   });
   $("ul li").unbind("click")

</script>
</head>
<body>

<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>

<button>add</button>

</body>
</html>