Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JSDoc documenting event listeners properly

Ive been learning how to use JSDoc with my projects, I mostly understand how to use it with the exception of 1 or two things. One of these things being documenting event listeners.

Ive seen the documentation on the @listens, but the explanation/example they give is not making sense to me. Heres a link to the page: https://jsdoc.app/tags-listens.html

I was wondering if anyone has a better way of explaining it to me, or maybe show me an example of how you document a basic event listener. (Ill provide one below)

document.getElementById('some_element').addEventListener('mousedown', function () {
  // Some code
});

Thanks

like image 260
Finchy Finchy Avatar asked Jun 25 '20 13:06

Finchy Finchy


People also ask

What is JSDoc comment?

JSDoc comments are used for documentation lookup with Ctrl+Q in JavaScript and TypeScript, see JavaScript documentation look-up and TypeScript documentation look-up, as well as for type annotations and method return type hints in chained methods.

What are JSDoc tags?

JSDoc tagsSpecifies the type of the object to which the keyword this refers within a function.

Why is JSDoc important?

The main idea behind JSDocs is to generate documentation for functions, classes, and methods. The benefit of using JSDocs for your code is how easy it is to export to HTML. Moreover, it integrates well with IDE's and code editors such as VS Code which has an extension for it.

What is Eventlistener in JavaScript?

An event listener is a procedure in JavaScript that waits for an event to occur. The simple example of an event is a user clicking the mouse or pressing a key on the keyboard.


1 Answers

Extending on my comment above, I figure that the following would be an acceptable way to document that line of code, in which document is the namespace, followed by the event name mousedown:

/**
 * Listen to mousedown event
 *
 * @type {HTMLElement} - the target of the event
 * @listens document#mousedown - the namespace and name of the event
 */

document.getElementById('some_element').addEventListener('mousedown', function () {
  // Some code
});
like image 161
nunop Avatar answered Sep 19 '22 12:09

nunop