addDelegatedEventListener

Author: wxiaoguang

web_src/js/features/repo-diff.ts

@@ -13,7 +13,7 @@ import {
   hideElem,
   showElem,
   animateOnce,
-  addElemsEventListener,
+  addDelegatedEventListener,
   createElementFromHTML,
 } from '../utils/dom.ts';
 import {POST, GET} from '../modules/fetch.ts';
@@ -37,7 +37,7 @@ function initRepoDiffFileViewToggle() {
 }
 
 function initRepoDiffConversationForm() {
-  addElemsEventListener<HTMLFormElement>(document, 'submit', '.conversation-holder form', async (form, e) => {
+  addDelegatedEventListener<HTMLFormElement>(document, 'submit', '.conversation-holder form', async (form, e) => {
     e.preventDefault();
     const textArea = form.querySelector<HTMLTextAreaElement>('textarea');
     if (!validateTextareaNonEmpty(textArea)) return;

web_src/js/features/repo-issue.ts

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import {htmlEscape} from 'escape-goat';
 import {createTippy, showTemporaryTooltip} from '../modules/tippy.ts';
-import {addElemsEventListener, createElementFromHTML, hideElem, showElem, toggleElem} from '../utils/dom.ts';
+import {addDelegatedEventListener, createElementFromHTML, hideElem, showElem, toggleElem} from '../utils/dom.ts';
 import {setFileFolding} from './file-fold.ts';
 import {ComboMarkdownEditor, getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts';
 import {parseIssuePageInfo, toAbsoluteUrl} from '../utils.ts';
@@ -443,7 +443,7 @@ export function initRepoPullRequestReview() {
     });
   }
 
-  addElemsEventListener(document, 'click', '.add-code-comment', async (el, e) => {
+  addDelegatedEventListener(document, 'click', '.add-code-comment', async (el, e) => {
     e.preventDefault();
 
     const isSplit = el.closest('.code-diff')?.classList.contains('code-diff-split');

web_src/js/utils/dom.ts

@@ -307,11 +307,11 @@ export function createElementFromHTML<T = HTMLElement>(htmlString: string): T {
   if (htmlString.startsWith('<tr')) {
     const container = document.createElement('table');
     container.innerHTML = htmlString;
-    return container.querySelector('tr') as HTMLElement;
+    return container.querySelector('tr') as T;
   }
   const div = document.createElement('div');
   div.innerHTML = htmlString;
-  return div.firstChild as HTMLElement;
+  return div.firstChild as T;
 }
 
 export function createElementFromAttrs(tagName: string, attrs: Record<string, any>, ...children: (Node|string)[]): HTMLElement {
@@ -348,7 +348,7 @@ export function querySingleVisibleElem<T extends HTMLElement>(parent: Element, s
   return candidates.length ? candidates[0] as T : null;
 }
 
-export function addElemsEventListener<T extends HTMLElement>(parent: Node, type: string, selector: string, listener: (elem: T, e: Event) => void | Promise<any>, options?: boolean | AddEventListenerOptions) {
+export function addDelegatedEventListener<T extends HTMLElement>(parent: Node, type: string, selector: string, listener: (elem: T, e: Event) => void | Promise<any>, options?: boolean | AddEventListenerOptions) {
   parent.addEventListener(type, (e: Event) => {
     const elem = (e.target as HTMLElement).closest(selector);
     if (!elem) return;