mirror of https://github.com/sveltejs/svelte
feat: add svelte/events package and export on function (#11912)
* feat: add svelete/events package and export attach function * feat: add svelete/events package and export attach function * docs * docs * docs * feedback * feedback * add more info * lint * rename * add package to autocomplete * rename args * fix * update inline docs * tweak docs --------- Co-authored-by: Rich Harris <rich.harris@vercel.com>pull/11944/head
parent
fdecad6cdd
commit
aadf629580
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
feat: add svelte/events package and export `on` function
|
@ -0,0 +1 @@
|
||||
export { on } from '../internal/client/dom/elements/events.js';
|
@ -0,0 +1,17 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
|
||||
test({ assert, target, logs }) {
|
||||
const [b1] = target.querySelectorAll('button');
|
||||
|
||||
b1?.click();
|
||||
b1?.click();
|
||||
b1?.click();
|
||||
flushSync();
|
||||
assert.htmlEqual(target.innerHTML, '<section><button>clicks: 3</button></section>');
|
||||
assert.deepEqual(logs, []);
|
||||
}
|
||||
});
|
@ -0,0 +1,23 @@
|
||||
<script>
|
||||
import { on } from 'svelte/events';
|
||||
|
||||
let count = $state(0);
|
||||
|
||||
function increment(e) {
|
||||
e.stopPropagation();
|
||||
count += 1;
|
||||
}
|
||||
|
||||
let sectionEl
|
||||
$effect(() => {
|
||||
return on(sectionEl, 'click', () => {
|
||||
console.log('logged from addEventListener');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<section bind:this={sectionEl} onclick={() => console.log('logged from onclick')}>
|
||||
<button onclick={increment}>
|
||||
clicks: {count}
|
||||
</button>
|
||||
</section>
|
Loading…
Reference in new issue