jq绑定事件

 <div style="width:100px;height:100px;border:1px solid red;overflow:auto;" id="box">  <div style="width:50px;height:50px;border:1px solid red" id="content"></div> </div>

html元素

1、js绑定事件分为冒泡和捕获两种情况

2、冒泡执行顺序，先执行子元素的事件，再执行父元素的事件

3、捕获执行顺序，先执行父元素的事件，再执行子元素的事件

4、在既有捕获又有冒泡的情况下，先从外层一层一层往内执行捕获，一直到目标元素，目标元素按照绑定顺序执行。然后继续往外执行冒泡。这个是自己测试出来的结果，仅代表个人看法，和网上很多人的说法不一样。也欢迎大佬指正。

这里将流程划分为三部分：1、从外往内执行捕获。 2、达到目标元素后，按绑定顺序执行。3、从内往外冒泡

5、dom动画发生时，取到的dom数据是动画前的

6、停止事件的传播 e.stopPropagation();

在4的流程中，执行e.stopPropagation()可以让事件不传播的下一步骤，并且不传播的下一个dom节点。在第二步的同dom节点不受影响。

  if (!window.addEventListener) {   //兼容IE8   window.addEventListener = window.attachEvent;  }  $("#content").click(function (e) {   //$(this).height(200); //第一次,直接改变高度   $(this).animate({ "height": 200 }, 2000, function () {    console.log("end");   }).stop(true, true);//第二次，缓慢改变高度   //e.preventDefault();   console.log("content 冒泡1");  });  $("#content").click(function (e) {   console.log('content 冒泡2', $(this).height());  });  $("#content").on("click", function () {   console.log('content 冒泡3', $(this).height());  });  $("#content")[0].addEventListener("click", function (e) {   console.log('content 捕获1', $(this).height());  }, true);  $("#content")[0].addEventListener("click", function () {   console.log('content 捕获2', $(this).height());  }, true);  $("#box").click(function () {   console.log('box 冒泡1', $("#content").height());  });  $("#box").on("click", function () {   console.log('box 冒泡2', $("#content").height());  });  $("#box")[0].addEventListener("click", function (e) {   console.log('box 捕获1', $("#content").height());   e.stopPropagation();  }, true);  $("#box")[0].addEventListener("click", function (e) {   console.log('box 捕获2', $("#content").height());   //e.stopPropagation();  }, true);  $("#box").on("scroll", function () {   console.log("resize");  });

demo

 7、jquery on 绑定

jquery on 可以将子dom的事件绑到父节点上。执行顺序是 1、绑定在子节点的事件，2、绑定在父节点的子节点的事件 3、父节点的事件

  $("#box").on("click", function () {   console.log('box 冒泡1', $(this).height());  });  $("#box").on("click","#content", function () {   console.log('content 冒泡2', $("#content").height());  });  $("#content").on("click", function () {   console.log('content 冒泡3', $(this).height());  });

on 的顺序

 8、各种绑定冒泡事件的总结

1.选择器匹配到的元素比较多时，不要用bind() 或者 click(function(){})迭代绑定，会绑定很多事件

2.用delegate()或者on()，可以动态给子节点添加的绑定事件，绑定这个节点不能是动态的。

3.用delegate()和on()方法，dom树不要太深，因为一层一层冒泡上来影响性能。

原文转载：http://www.shaoqun.com/a/503915.html

跨境电商：https://www.ikjzd.com/

houzz：https://www.ikjzd.com/w/236

etsy：https://www.ikjzd.com/w/169.html

<divstyle="width:100px;height:100px;border:1pxsolidred;overflow:auto;"id="box"><divstyle="width:50px;height:50px;border:1pxsolidred"id="content"><
gtin：gtin
贝贝官网：贝贝官网
亚马逊listing的描述到底怎么写更吸引消费者？：亚马逊listing的描述到底怎么写更吸引消费者？
深圳世界之窗炫彩嘉年华有什么好玩的？2020深圳世界之窗炫：深圳世界之窗炫彩嘉年华有什么好玩的？2020深圳世界之窗炫
广州海洋馆有什么好玩的景点？：广州海洋馆有什么好玩的景点？