JavaScript事件机制，也有让人深思的东西。在一开始未深入了解，我头脑里有几个问题发出：1. 自下而上（冒泡）事件怎么写，自上而下（捕获）又是怎么写？2. 捕获型和冒泡型同时设置，谁生效？3. 冒泡能够阻止，那捕获能够阻止吗？4. jquery的on或bind是冒泡，还 ...
JavaScript事件机制，也有让人深思的东西。在一开始未深入了解，我头脑里有几个问题发出：
1. 自下而上（冒泡）事件怎么写，自上而下（捕获）又是怎么写？
2. 捕获型和冒泡型同时设置，谁生效？
3. 冒泡能够阻止，那捕获能够阻止吗？
4. jquery的on或bind是冒泡，还是捕获？
5. 两种事件方式的应用场景是？
示例
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"/><title>Events</title><script type="text/javascript" src='/images/loading.gif' data-original="jquery-3.0.0.js"></script><style> html,body{ width:100%; height:100%; padding: 0; margin: 0; } div{ float:left; width: 200px; height:200px; border:1px solid blue; } p{ width: 100px; height:100px; border:1px solid red; }</style></head> <body id="body"> <div id="J_d0"> 0<p id="J_p0"></p> </div> <div id="J_d1"> 1<p id="J_p1"></p> </div> <div id="J_d2"> 2<p id="J_p2"></p> </div> <div id="J_d3"> 3<p id="J_p3"></p> </div> <div id="J_d4"> 4<p id="J_p4"></p> </div> </body> <script> var body = document.getElementById('body'); body.addEventListener('click', hello, true); //当为false时，全部在最后执行。 bindEvent_d_p(0,true,true); //点击p,输出 //i am body //i am J_d0 //i am J_p0 bindEvent_d_p(1,false,true); //点击p,输出 //i am body //i am J_p1 //i am J_d1 bindEvent_d_p(2,false,false); //点击p,输出 //i am body //i am J_p2 //i am J_d2 bindEvent_d_p(3,true,false); //点击p,输出 //i am body //i am J_d3 //i am J_p3 $("#J_d4").on("click", hello); $("#J_p4").on("click", hello); //点击p,输出 //i am body //i am J_p4 //i am J_d4 function bindEvent_d_p(index, d_useCapture, p_useCapture){ var d = document.getElementById('J_d'+index); var p = document.getElementById('J_p'+index);
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：JavaScript事件机制——细思极恐
关键词：JavaScript
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
