Javascript 事件委托/冒泡
Javascript Event Delegation / bubbling
我想禁用 SPA 路由器正文部分中带有 class "nolink" 的所有链接。为了实现这一点,我使用了事件委托,它不能很好地处理嵌套元素。 (下面的简化代码)。
HTML:
<header id="header">
<nobr>
<a href="home" class="nolink">
<img src="image.png">
<span>Title</span>
</a>
</nobr>
<ul>
<li><a href="link1" class="nolink">Link 1</a></li>
<li><a href="link2" class="nolink">Link 2</a></li>
<li><a href="link3" class="nolink">Link 3</a></li>
<li><a href="link4" class="nolink">Link 4</a></li>
</ul>
</header>
JavaScript:
class Delegator {
constructor(wrapper) {
this.wrapper = wrapper || document.body;
}
add({ selector, event, callback }) {
this.wrapper.addEventListener(event, e => {
const target = e.target;
if (target.matches(selector) /* bad code: */ || target.parentElement.matches(selector) || target.parentElement.parentElement.matches(selector)) {
e.preventDefault();
callback(e);
}
})
}
}
function readyLink(event) {
let href = event.target.href /* bad code: */ || event.target.parentElement.href || event.target.parentElement.parentElement.href;
history.pushState(null, null, href);
event.preventDefault();
router.fetch(href.split("/").pop());
router.route(href);
}
const router = new Router(...);
const bodyDelegator = new Delegator();
bodyDelegator.add({
selector: `a.${nolink}`,
event: "click",
callback: readyLinks
});
由于单击图像或 span 元素时的事件路由,我不得不参考 target.parentElements,这让我很困扰。我希望它们受添加函数的影响,而不必指定一千个 parentElements 以供将来可能使用。
使用 Element.closest()
查找元素本身或其父元素之一是否与选择器匹配:
class Delegator {
constructor(wrapper) {
this.wrapper = wrapper || document.body;
}
add({ selector, event, callback }) {
this.wrapper.addEventListener(event, e => {
const target = e.target;
if (target.closest(selector)) {
e.preventDefault();
callback(e);
}
})
}
}
传递最接近回调:
class Delegator {
constructor(wrapper) {
this.wrapper = wrapper || document.body;
}
add({ selector, event, callback }) {
this.wrapper.addEventListener(event, e => {
const target = e.target;
const actual = target.closest(selector);
if (actual) {
e.preventDefault();
callback(e, actual);
}
})
}
}
然后 readyLink 可以从实际元素中获取 href
。我仍然会将事件传递给其他用途(例如调用 preventDefault
)。
function readyLink(event, actualTarget) {
let href = actualTarget.href;
history.pushState(null, null, href);
event.preventDefault();
router.fetch(href.split("/").pop());
router.route(href);
}
我想禁用 SPA 路由器正文部分中带有 class "nolink" 的所有链接。为了实现这一点,我使用了事件委托,它不能很好地处理嵌套元素。 (下面的简化代码)。
HTML:
<header id="header">
<nobr>
<a href="home" class="nolink">
<img src="image.png">
<span>Title</span>
</a>
</nobr>
<ul>
<li><a href="link1" class="nolink">Link 1</a></li>
<li><a href="link2" class="nolink">Link 2</a></li>
<li><a href="link3" class="nolink">Link 3</a></li>
<li><a href="link4" class="nolink">Link 4</a></li>
</ul>
</header>
JavaScript:
class Delegator {
constructor(wrapper) {
this.wrapper = wrapper || document.body;
}
add({ selector, event, callback }) {
this.wrapper.addEventListener(event, e => {
const target = e.target;
if (target.matches(selector) /* bad code: */ || target.parentElement.matches(selector) || target.parentElement.parentElement.matches(selector)) {
e.preventDefault();
callback(e);
}
})
}
}
function readyLink(event) {
let href = event.target.href /* bad code: */ || event.target.parentElement.href || event.target.parentElement.parentElement.href;
history.pushState(null, null, href);
event.preventDefault();
router.fetch(href.split("/").pop());
router.route(href);
}
const router = new Router(...);
const bodyDelegator = new Delegator();
bodyDelegator.add({
selector: `a.${nolink}`,
event: "click",
callback: readyLinks
});
由于单击图像或 span 元素时的事件路由,我不得不参考 target.parentElements,这让我很困扰。我希望它们受添加函数的影响,而不必指定一千个 parentElements 以供将来可能使用。
使用 Element.closest()
查找元素本身或其父元素之一是否与选择器匹配:
class Delegator {
constructor(wrapper) {
this.wrapper = wrapper || document.body;
}
add({ selector, event, callback }) {
this.wrapper.addEventListener(event, e => {
const target = e.target;
if (target.closest(selector)) {
e.preventDefault();
callback(e);
}
})
}
}
传递最接近回调:
class Delegator {
constructor(wrapper) {
this.wrapper = wrapper || document.body;
}
add({ selector, event, callback }) {
this.wrapper.addEventListener(event, e => {
const target = e.target;
const actual = target.closest(selector);
if (actual) {
e.preventDefault();
callback(e, actual);
}
})
}
}
然后 readyLink 可以从实际元素中获取 href
。我仍然会将事件传递给其他用途(例如调用 preventDefault
)。
function readyLink(event, actualTarget) {
let href = actualTarget.href;
history.pushState(null, null, href);
event.preventDefault();
router.fetch(href.split("/").pop());
router.route(href);
}