jQuery源码解析之on事件绑定

Posted 2020-11-14 shun1015

jquery的on方法用来在选定的元素上绑定一个或多个事件处理函数。

当参数selector存在时，通常会用来对已经存在的元素或将来即将添加到文档中的元素做事件委托，表示当点击document中的selector元素时，将触发function回调函数。

 

1 <div id="div" style="font-weight:800;font-size:24px;text-align:center;color:red;">
 2     <p id="paragraph">test events </p>
 3 </div>
 4 
 5 <script src="../jquery-3.2.1.js"></script>
 6 <script>
 7 $(function(){    
 8     $(document).on("click","#paragraph",function(){
 9         console.log(‘this is paragraph‘);
10     });
11     $(document).on("click","#div",function(){
12         console.log(‘this is div‘);
13     });
14     $(document).on("click","#addDiv",function(){
15         console.log(‘this is add div‘);
16     });
17     
18     setTimeout(function(){
19         createDiv();
20     },2000);
21 });
22 
23 function createDiv(){
24     $("<div>").attr("id","addDiv").html("this is a div add after event binding").appendTo($("body"));
25 }
26 </script>