How to use delegate-it - 10 common examples

function init(): void {
	// Exclude PR review box because it's in a `position:fixed` container; The scroll HAS to appear within the fixed element.
	delegate('textarea:not(#pull_request_review_body)', 'focusin', focusListener);
}

function init(): void {
	// Collapsed comments in PR conversations and files
	delegate('.repository-content', '.minimized-comment details summary', 'click', clickAll(minimizedCommentsSelector));

	// "Load diff" buttons in PR files
	delegate('.repository-content', '.js-file .js-diff-load', 'click', clickAll(allDiffsSelector));

	// Review comments in PR
	delegate('.repository-content', '.js-file .js-resolvable-thread-toggler', 'click', clickAll(resolvedCommentsSelector));
}

export function listenToCommentFields(callback: DelegateEventHandler): void {
	delegate('.js-comment-field, #commit-description-textarea', 'keydown', event => {
		const field = event.delegateTarget;

		// Don't do anything if the autocomplete helper is shown or if non-Roman input is being used
		if (select.exists('.suggester', field.form!) || event.isComposing) {
			return;
		}

		callback(event);
	}, {
		// Adds support for `esc` key; GitHub seems to use `stopPropagation` on it
		capture: true
	});
}

function init(): void {
	delegate('#files', '[action$="/review_comment/create"]', 'submit', handleReviewSubmission);
	delegate('#files', '.rgh-submit-single', 'click', handleSubmitSingle);
	updateUI();
}

function init(): void {
	delegate('#files', '.js-file-header-dropdown > summary', 'click', handleMenuOpening);
}

function init(): void {
	delegate('.form-actions button[value="approve"]', 'click', () => markAllFilesAsViewed());
}

async function init(): Promise {
	destroy();
	await onDomReady;

	if (pageDetect.isNotifications()) {
		const notifications = await getNotifications();
		if (notifications.length > 0) {
			await renderNotifications(notifications);
			addCustomAllReadButton();
			updateLocalNotificationsCount(notifications);
			updateLocalParticipatingCount(notifications);
			document.dispatchEvent(new CustomEvent('refined-github:mark-unread:notifications-added'));
		}

		listeners.push(
			delegate('.btn-link.delete-note', 'click', markNotificationRead),
			delegate('.js-mark-all-read', 'click', markAllNotificationsRead),
			delegate('.js-delete-notification button', 'click', updateUnreadIndicator),
			delegate('.js-mark-visible-as-read', 'submit', markVisibleNotificationsRead)
		);
	} else if (pageDetect.isPR() || pageDetect.isIssue()) {
		await markRead(location.href);

		if (pageDetect.isPRConversation() || pageDetect.isIssue()) {
			addMarkUnreadButton();
			onUpdatableContentUpdate(select('#partial-discussion-sidebar')!, addMarkUnreadButton);
		}
	} else if (pageDetect.isDiscussionList()) {
		for (const discussion of await getNotifications()) {
			const {pathname} = new URL(discussion.url);
			const listItem = select(`.read [href='${pathname}']`);
			if (listItem) {

function init(): void {
	addButtons();
	delegate('.rgh-upload-btn', 'click', triggerUploadUI);
}

function init(): void {
	listeners = [
		...delegate('#discussion_bucket', '#merge_title_field', 'input', maybeShowNote),
		...delegate('#discussion_bucket', 'form.js-merge-pull-request', 'submit', submitPRTitleUpdate),
		...onPrMergePanelOpen(onMergePanelOpen)
	];
}

<div>
					<button data-close-dialog="" aria-label="Close dialog" type="button">
						{xIcon()}
					</button>
					<h3>Are you sure?</h3>
				</div>

				<div>
					<p>Are you sure you want to mark all unread notifications as read?</p>
					<button id="clear-local-notification" type="button">Mark all notifications as read</button>
				</div>
			
		
	);

	delegate('#clear-local-notification', 'click', async () =&gt; {
		await setNotifications([]);
		location.reload();
	});
}