diff --git a/README.md b/README.md index e0046efe5..a51507bba 100644 --- a/README.md +++ b/README.md @@ -152,6 +152,8 @@ average(1, 2, 3); * [`hasClass`](#hasclass) * [`hide`](#hide) * [`httpsRedirect`](#httpsredirect) +* [`off`](#off) +* [`on`](#on) * [`onUserInputChange`](#onuserinputchange-) * [`redirect`](#redirect) * [`runAsync`](#runasync-) @@ -1978,6 +1980,62 @@ httpsRedirect(); // If you are on http://mydomain.com, you are redirected to htt
[⬆ Back to top](#table-of-contents) +### off + +Removes an event listener from an element. + +Use `EventTarget.removeEventListener()` to remove an event listener from an element. +Omit the fourth argument `opts` to use `false` or specify it based on the options used when the event listener was added. + +```js +const off = (el, evt, fn, opts = false) => el.removeEventListener(evt, fn, opts); +``` + +
+Examples + +```js +const fn = () => console.log('!'); +document.body.addEventListener('click', fn); +off(document.body, 'click', fn); // no longer logs '!' upon clicking on the page +``` + +
+ +
[⬆ Back to top](#table-of-contents) + + +### on + +Adds an event listener to an element with the ability to use event delegation. + +Use `EventTarget.addEventListener()` to add an event listener to an element. If there is a `target` property supplied to the options object, ensure the event target matches the target specified and then invoke the callback by supplying the correct `this` context. +Returns a reference to the custom delegator function, in order to be possible to use with [`off`](#off). +Omit `opts` to default to non-delegation behavior and event bubbling. + +```js +const on = (el, evt, fn, opts = {}) => { + const delegatorFn = e => e.target.matches(opts.target) && fn.call(e.target, e); + el.addEventListener(evt, opts.target ? delegatorFn : fn, opts.options || false); + if (opts.target) return delegatorFn; +}; +``` + +
+Examples + +```js +const fn = () => console.log('!'); +on(document.body, 'click', fn); // logs '!' upon clicking the body +on(document.body, 'click', fn, { target: 'p' }); // logs '!' upon clicking a `p` element child of the body +on(document.body, 'click', fn, { options: true }); // use capturing instead of bubbling +``` + +
+ +
[⬆ Back to top](#table-of-contents) + + ### onUserInputChange ![advanced](/advanced.svg) Run the callback whenever the user input type changes (`mouse` or `touch`). Useful for enabling/disabling code depending on the input device. This process is dynamic and works with hybrid devices (e.g. touchscreen laptops). @@ -4123,6 +4181,7 @@ Combine characters to get a string using `String.join('')`. + const reverseString = str => [..str] .reverse() diff --git a/docs/index.html b/docs/index.html index b24a19120..0c345e92a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -40,7 +40,7 @@ },1700); } }, false); - }

logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.

 

Adapter

call

Given a key and a set of arguments, call them when given a context. Primarily useful in composition.

Use a closure to call a stored key with stored arguments.

const call = (key, ...args) => context => context[key](...args);
+      }
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
 
Adapter
call
Given a key and a set of arguments, call them when given a context. Primarily useful in composition.
Use a closure to call a stored key with stored arguments.
const call = (key, ...args) => context => context[key](...args);
 
Promise.resolve([1, 2, 3])
   .then(call('map', x => 2 * x))
   .then(console.log); //[ 2, 4, 6 ]
@@ -362,6 +362,19 @@ Object.assig
   if (location.protocol !== 'https:') location.replace('https://' + location.href.split('//')[1]);
 };
 
httpsRedirect(); // If you are on http://mydomain.com, you are redirected to https://mydomain.com
+
off
Removes an event listener from an element.
Use EventTarget.removeEventListener() to remove an event listener from an element. Omit the fourth argument opts to use false or specify it based on the options used when the event listener was added.
const off = (el, evt, fn, opts = false) => el.removeEventListener(evt, fn, opts);
+
const fn = () => console.log('!');
+document.body.addEventListener('click', fn);
+off(document.body, 'click', fn); // no longer logs '!' upon clicking on the page
+
on
Adds an event listener to an element with the ability to use event delegation.
Use EventTarget.addEventListener() to add an event listener to an element. If there is a target property supplied to the options object, ensure the event target matches the target specified and then invoke the callback by supplying the correct this context. Returns a reference to the custom delegator function, in order to be possible to use with off. Omit opts to default to non-delegation behavior and event bubbling.
const on = (el, evt, fn, opts = {}) => {
+  const delegatorFn = e => e.target.matches(opts.target) && fn.call(e.target, e);
+  el.addEventListener(evt, opts.target ? delegatorFn : fn, opts.options || false);
+  if (opts.target) return delegatorFn;
+};
+
const fn = () => console.log('!');
+on(document.body, 'click', fn); // logs '!' upon clicking the body
+on(document.body, 'click', fn, { target: 'p' }); // logs '!' upon clicking a `p` element child of the body
+on(document.body, 'click', fn, { options: true }); // use capturing instead of bubbling
 
onUserInputChangeadvanced
Run the callback whenever the user input type changes (mouse or touch). Useful for enabling/disabling code depending on the input device. This process is dynamic and works with hybrid devices (e.g. touchscreen laptops).
Use two event listeners. Assume mouse input initially and bind a touchstart event listener to the document. On touchstart, add a mousemove event listener to listen for two consecutive mousemove events firing within 20ms, using performance.now(). Run the callback with the input type as an argument in either of these situations.
const onUserInputChange = callback => {
   let type = 'mouse',
     lastTime = 0;
@@ -875,6 +888,7 @@ console.log<
 
reverseString
Reverses a string.
Use the spread operator (...) and Array.reverse() to reverse the order of the characters in the string. Combine characters to get a string using String.join('').
 
 
+
 const reverseString = str =>
   [..str]
     .reverse()
diff --git a/snippets/reverseString.md b/snippets/reverseString.md
index befdd8bf5..ab48b45e4 100644
--- a/snippets/reverseString.md
+++ b/snippets/reverseString.md
@@ -9,6 +9,7 @@ Combine characters to get a string using `String.join('')`.
 
 
 
+
 const reverseString = str =>
   [..str]
     .reverse()