mirror of https://github.com/sveltejs/svelte
parent
32ee6efa6c
commit
9c3ad71081
@ -1,7 +1,9 @@
|
|||||||
<script>
|
<script>
|
||||||
let empty = {};
|
let empty = {};
|
||||||
|
let nully = { handleEvent: null };
|
||||||
let wrong = { handleEvent: "bad" };
|
let wrong = { handleEvent: "bad" };
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button onclick={empty}>click</button>
|
<button onclick={empty}>click</button>
|
||||||
|
<button onclick={nully}>click</button>
|
||||||
<button onclick={wrong}>click</button>
|
<button onclick={wrong}>click</button>
|
||||||
|
|||||||
@ -1,39 +1,38 @@
|
|||||||
<script>
|
<script>
|
||||||
import { on } from 'svelte/events';
|
import { on } from 'svelte/events';
|
||||||
|
|
||||||
let count = $state(0);
|
|
||||||
|
|
||||||
let onclick = $state.raw({
|
let onclick = $state.raw({
|
||||||
handleEvent() {
|
handleEvent(ev) {
|
||||||
count += +this.dataset.step;
|
console.log(this === ev.currentTarget);
|
||||||
console.log(count);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function click2() {
|
function click2() {
|
||||||
count++;
|
console.log("mutated");
|
||||||
console.log(count);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function click3() {
|
function click3() {
|
||||||
count += 2;
|
console.log("assigned");
|
||||||
console.log(count);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let btn;
|
let btn;
|
||||||
|
let step = 1;
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
return on(btn, 'click', () => {
|
return on(btn, 'click', () => {
|
||||||
if (onclick.handleEvent !== click2) {
|
switch (step) {
|
||||||
onclick.handleEvent = click2;
|
case 1: {
|
||||||
} else {
|
onclick.handleEvent = click2;
|
||||||
onclick = { handleEvent: click3 };
|
step = 2;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 2: {
|
||||||
|
onclick = { handleEvent: click3 };
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button data-step="2" {onclick}>
|
<button {onclick}>a</button>
|
||||||
clicks: {count}
|
<button {...{onclick}}>b</button>
|
||||||
</button>
|
|
||||||
<button data-step="3" {...{onclick}}>inc</button>
|
|
||||||
<button bind:this={btn}>next</button>
|
<button bind:this={btn}>next</button>
|
||||||
|
|||||||
Loading…
Reference in new issue