欢迎光临
我的个人博客网站

jq绑定事件

jq绑定事件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节点不受影响。

jq绑定事件jq绑定事件

        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、父节点的事件

jq绑定事件jq绑定事件

        $("#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树不要太深,因为一层一层冒泡上来影响性能。

赞(0) 打赏
未经允许不得转载:张拓的天空 » jq绑定事件
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏