jq繫結事件
阿新 • • 發佈：2020-12-23
1、js繫結事件分為冒泡和捕獲兩種情況
2、冒泡執行順序，先執行子元素的事件，再執行父元素的事件，先執行先繫結的再執行後繫結的。
3、捕獲執行順序，先執行父元素的事件，再執行子元素的事件
4、dom動畫發生時，取到的dom資料是動畫前的
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>js執行順序</title> <div id="a"demo></div> <script src="/Scripts/jquery-1.9.1.min.js"></script> </head> <body> <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> <script> //http://www.360doc.com/content/19/0501/09/5923560_832671242.shtml $("#content").click(function () { //$(this).height(200); //第一次,直接改變高度 $(this).animate({ "height": 200 }, 2000, function () { console.log("end"); });//第二次，緩慢改變高度 }); $("#content").click(function () { console.log('("#content").click()', $(this).height()); }); $("#content").on("click", function () { console.log('("#content").on("click")', $(this).height()); }); $("#content")[0].addEventListener("click", function () { console.log('("#content")[0].addEventListener("click")', $(this).height()); }, true); $("#content")[0].addEventListener("click", function () { console.log('("#content")[0].addEventListener("click")2', $(this).height()); }, true); $("#box").click(function () { console.log('("#box").click()', $("#content").height()); }); $("#box").on("click", function () { console.log('("#box").on("click")', $("#content").height()); }); $("#box")[0].addEventListener("click", function () { console.log('("#box")[0].addEventListener("click")', $("#content").height()); }, true); $("#box").on("scroll", function () { console.log("resize"); }); </script> </body> </html>