diff --git a/framework/h/renderer.go b/framework/h/renderer.go
index 45a3abd..ecd2635 100644
--- a/framework/h/renderer.go
+++ b/framework/h/renderer.go
@@ -14,7 +14,7 @@ type RenderContext struct {
func (ctx *RenderContext) AddScript(funcName string, body string) {
script := fmt.Sprintf(`
`, funcName, funcName, body)
@@ -145,7 +145,7 @@ func (l *LifeCycle) Render(context *RenderContext) {
m[event] += fmt.Sprintf("%s;", c.Command)
case ComplexJsCommand:
context.AddScript(c.TempFuncName, c.Command)
- m[event] += fmt.Sprintf("%s();", c.TempFuncName)
+ m[event] += fmt.Sprintf("%s(this);", c.TempFuncName)
case *AttributeMap:
for k, v := range c.ToMap() {
l.fromAttributeMap(event, k, v, context)
diff --git a/htmgo-site/md/docs/4_interactivity/2_events.md b/htmgo-site/md/docs/4_interactivity/2_events.md
new file mode 100644
index 0000000..809cf9e
--- /dev/null
+++ b/htmgo-site/md/docs/4_interactivity/2_events.md
@@ -0,0 +1,93 @@
+**Events**
+
+Sometimes you need to update elements client side without having to do a network call. For this you generally have to target an element with javascript and set an attribute, change the innerHTML, etc.
+
+To make this work while still keeping a pure go feel, we offer a few utility methods to execute various javascript on an element.
+
+**Example:** When the form is submitted, set the button text to submitting and disable it, and vise versa after submit is done.
+
+```go
+func MyForm() *h.Element {
+ return h.Form(
+ h.Button(
+ h.Text("Submit"),
+ h.HxBeforeRequest(
+ js.SetDisabled(true),
+ js.SetText("Submitting..."),
+ ),
+ h.HxAfterRequest(
+ js.SetDisabled(false),
+ js.SetText("Submit"),
+ ),
+ ),
+ )
+}
+```
+
+The structure of this comes down to:
+
+1. Add an event handler to the element
+2. Add commands (found in the **js** package) as children to that event handler
+
+
+
+**Event Handlers:**
+
+```go
+HxBeforeRequest(cmd ...Command) *LifeCycle
+HxAfterRequest(cmd ...Command) *LifeCycle
+HxOnMutationError(cmd ...Command) *LifeCycle
+OnEvent(event hx.Event, cmd ...Command) *LifeCycle
+OnClick(cmd ...Command) *LifeCycle
+HxOnAfterSwap(cmd ...Command) *LifeCycle
+HxOnLoad(cmd ...Command) *LifeCycle
+```
+
+If you use the OnEvent directly, event names may be any [HTML DOM](https://www.w3schools.com/jsref/dom_obj_event.asp) events, or any [HTMX events](https://htmx.org/events/).
+
+Commands:
+
+```go
+js.AddAttribute(string, value)
+js.RemoveAttribute(string)
+js.AddClass(string, value)
+js.SetText(string)
+js.Increment(count)
+js.SetInnerHtml(Ren)
+js.SetOuterHtml(Ren)
+js.SetDisabled(bool)
+js.RemoveClass(string)
+js.Alert(string)
+js.EvalJs(string) // eval arbitrary js, use 'self' to get the current element as a reference
+js.InjectScript(string)
+js.InjectScriptIfNotExist(string)
+js.GetPartial(PartialFunc)
+js.GetPartialWithQs(PartialFunc, Qs)
+js.PostPartial(PartialFunc)
+js.PostPartialWithQs(PartialFunc, Qs)
+js.GetWithQs(string, Qs)
+js.PostWithQs(string, Qs)
+js.ToggleClass(string)
+js.ToggleClassOnElement(string, string)
+```
+
+**Example:** Evaluating arbitrary JS
+
+```go
+func MyButton() *h.Element {
+ return h.Button(
+ h.Text("Submit"),
+ h.OnClick(
+ // make sure you use 'self' instead of 'this'
+ // for referencing the current element
+ h.EvalJs(`
+ if(Math.random() > 0.5) {
+ self.innerHTML = "Success!";
+ }
+ `,
+ ),
+ ),
+ )
+}
+```
+