Fix statement about order of bind: and on:

site/content/docs/02-template-syntax.md

@@ -627,20 +627,31 @@ On `<input>` elements with `type="file"`, you can use `bind:files` to get the [`
 
 ---
 
-`bind:` can be used together with `on:` directives. The order that they are defined in determines the value of the bound variable when the event handler is called.
+Bindings use event handlers internally to sync the values. The event that is listened for will differ based on the element and the type of binding used. Therefore, the order of `bind:` and `on:` directives can have consequences.
 
 ```sv
 <script>
-	let value = 'Hello World';
+	let value = 50;
+	
+	$: console.log("2nd", value)
 </script>
 
-<input
+
-	on:input="{() => console.log('Old value:', value)}"
+<div on:input="{() => console.log('4th', value)}">
-	bind:value
+	<!--bind:value on range inputs listens to the 'input' event-->
-	on:input="{() => console.log('New value:', value)}"
+	<input
-/>
+		type="range"
+
+		on:change="{() => console.log('5th', value)}"
+		
+		on:input="{() => console.log('1st', value)}"
+		bind:value
+		on:input="{() => console.log('3rd', value)}"
+	/>
+</div>
 ```
 
+The `1st` input handler will be called before the binding updates the value, so it'll log the old value, whereas `3rd` will log the new value. However, the `change` event only fires when you let go of the slider, so even though the change handler is declared before the input handlers, it'll always be triggered last.
 
 ##### Binding `<select>` value