深圳电商网站开发,网站后台管理系统是什么,wordpress配置文件路径,潍坊网站建设 中公事件捕获、冒泡事件委托 1、事件捕获与冒泡2、事件冒泡示例3、阻止事件冒泡4、阻止事件默认行为5、事件委托6、事件委托优点 1、事件捕获与冒泡 2、事件冒泡示例
!DOCTYPE html
html langenheadmeta charsetUTF-8 /… 事件捕获、冒泡事件委托 1、事件捕获与冒泡2、事件冒泡示例3、阻止事件冒泡4、阻止事件默认行为5、事件委托6、事件委托优点 1、事件捕获与冒泡 2、事件冒泡示例
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.parent {width: 300px;height: 200px;border: 1px solid #ccc;background: #f5f5f5;}.son {width: 100px;height: 100px;background: pink;text-align: center;line-height: 90px;}/style/headbodydiv classparentdiv classsonson/div/div/bodyscriptconst son document.getElementsByClassName(son)[0];const parent document.getElementsByClassName(parent)[0];son.onclick function (e) {console.log(son click);};parent.onclick function (e) {console.log(parent click);};/script
/html当在页面触发 son 元素的点击事件时因为事件冒泡会依次打印 son click、parent click。
3、阻止事件冒泡
const son document.getElementsByClassName(son)[0];
const parent document.getElementsByClassName(parent)[0];
son.onclick function (e) {console.log(son click);e.stopPropagation(); // 阻止事件冒泡
};
parent.onclick function (e) {console.log(parent click);
};当在页面触发 son 元素的点击事件时只会打印 son click。
4、阻止事件默认行为 Tipse.preventDefault() 或 return false 会阻止默认行为
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodya hrefhttp://www.baidu.com百度/a/bodyscriptconst aDom document.getElementsByTagName(a)[0];aDom.onclick function (e) {console.log(a click);e.preventDefault(); // 阻止默认跳转// return false; // 阻止默认跳转};/script
/html5、事件委托 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodyulli1/lili2/lili3/li/ul/bodyscript srchttps://code.jquery.com/jquery-3.0.0.min.js/scriptscript// 将 li 的点击事件注册到 ul 上$(ul).on(click, li, function () {console.log(this); // lix/li});/script
/html6、事件委托优点
