From 7681ed0a4596192b5b55839e6920223316a88d73 Mon Sep 17 00:00:00 2001
From: gtmnayan <50981692+gtm-nayan@users.noreply.github.com>
Date: Mon, 8 Nov 2021 12:19:04 +0545
Subject: [PATCH] [docs] Document the effect of the order of bind: and on:
 (#6887)

---
 site/content/docs/02-template-syntax.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index 373e0879af..f57eb675ec 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -602,6 +602,22 @@ 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.
+
+```sv
+<script>
+	let value = 'Hello World';
+</script>
+
+<input
+	on:input="{() => console.log('Old value:', value)}"
+	bind:value
+	on:input="{() => console.log('New value:', value)}"
+/>
+```
+
 
 ##### Binding `<select>` value