Add .document event modifier

README.md

@@ -226,6 +226,8 @@ Adding `.stop` to an event listener will call `stopPropagation` on the triggered
 
 Adding `.window` to an event listener will install the listener on the global window object instead of the DOM node on which it is declared. This is useful for when you want to modify component state when something changes with the window, like the resize event. In this example, when the window grows larger than 768 pixels wide, we will close the modal/dropdown, otherwise maintain the same state.
 
+>Note: You can also use the `.document` modifier to attach listeners to `document` instead of `window`
+
 **`.once` modifier**
 **Example:** `<button x-on:mouseenter.once="fetchSomething()"></button>`
 

src/component.js

@@ -232,13 +232,11 @@ export default class Component {
             document.addEventListener(event, handler)
         } else {
             const listenerTarget = modifiers.includes('window')
-                ? window
-                : modifiers.includes('document')
-                ? document
-                : el
+                ? window : (modifiers.includes('document') ? document : el)
 
             const handler = e => {
-                const modifiersWithoutWindow = modifiers.filter(i => i !== 'window')
+                const modifiersWithoutWindowOrDocument = modifiers
+                    .filter(i => i !== 'window').filter(i => i !== 'document')
 
                 if (event === 'keydown' && modifiersWithoutWindow.length > 0 && ! modifiersWithoutWindow.includes(kebabCase(e.key))) return
 

test/on.spec.js

@@ -97,6 +97,24 @@ test('.window modifier', async () => {
     await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('baz') })
 })
 
+test('.document modifier', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ foo: 'bar' }">
+            <div x-on:click.document="foo = 'baz'"></div>
+
+            <span x-bind:foo="foo"></span>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('span').getAttribute('foo')).toEqual('bar')
+
+    document.body.click()
+
+    await wait(() => { expect(document.querySelector('span').getAttribute('foo')).toEqual('baz') })
+})
+
 test('.once modifier', async () => {
     document.body.innerHTML = `
         <div x-data="{ count: 0 }">