Events

"Hook up the HTML to Python"

Event Handling in HTML

Event Executor

Event Executor

HTML Attribute is py-[event]

Value is the string of executable code

						
							def say_hi():
								print("Hi there!")
						
					

						Hello!
					

Event Executor

						
							def say_hi():
								print("Hi there!")
						
					

						Hello!
					

Event Executor

script type="text/template">
o several things
/button>
				

Event Handling in Python

Event Handling in Python

Event Objects

Event Types

Event Objects

Common Event Attributes:

Event Objects

KeyboardEvent Attributes

Event Handling in Python

add_event_listener

Import from pyodide.ffi.wrappers

add_event_listener

https://tinyurl.com/addeventlistener

					Click Me!
					

						
					
						import js
						from pyodide.ffi.wrappers import add_event_listener

						def say_hi(event):
							print(f"Triggered by {event}")

						btn = js.document.getElementById("my-btn")
						add_event_listener(btn, 'click', say_hi)
					
				

https://tinyurl.com/addeventlistener

					
						import js
						from pyodide.ffi.wrappers import add_event_listener

						def say_hi(event):
							print(f"Triggered by {event}")

						btn = js.document.getElementById("my-btn")
						add_event_listener(btn, 'click', say_hi)
					
				

https://tinyurl.com/pyconvalidate

						
							import js
							from pyodide.ffi.wrappers import add_event_listener

							def validate(event):
								if 'py' in event.target.value: event.target.style.color = 'green'
								else: event.target.style.color = 'red'

							my_input = js.document.getElementById("my-input")
							add_event_listener(my_input, 'input', validate')'
								
						
				

Import from pyodide.ffi.wrappers

What's Next

				
					def foo(event):
						...
						
					import js
					div = js.document.getElementById("btn")
					add_event_listener(div, 'focus', foo)
				
				

						@when('my-div', 'focus')
						def foo():
							...
						

@when decorator

						Hello!
					

						@when('click', 'hello-btn')
						def say_hi():
							print("Hi there!")
						

What's Next

Event Listener

Code Runner