- Reaktibong modelo batay sa mga kaganapan, tagapakinig at controller
- Sinusuportahan ang mga graphical na interface, asynchronous na networking at IoT sa totoong oras
- Cross-platform na suporta para sa JS, Node.js, Python/Tkinter, at mga visual na tool
- Pinakamahuhusay na kagawian: delegasyon, paglilinis ng tagapakinig, at pamamahala ng object ng event
La programming nakatuon sa kaganapan (POE) ay ang diskarte kung saan ang isang application ay hindi sumusulong sa isang linear na paraan, ngunit sa halip ay tumutugon sa mga kaganapan habang nangyayari ang mga ito. Sa halip na magpataw ng matibay na daloy, naghihintay ang system at, kapag na-trigger ang isang kaganapan (isang pag-click, isang susi, isang mensahe sa network, isang timer), nagsasagawa ng nauugnay na code upang mahawakan ito.
Ang istilong ito ay nasa lahat ng dako: mga graphic interface (web, desktop at mobile), mga server na may hindi nakaharang na I/O, app Mga dashboard ng IoT o real-time na pagsubaybay. Kung naisip mo na kung paano "alam" ng isang app na pinindot mo ang isang pindutan o may dumating na tugon sa HTTP, ang susi ay nasa mga tagapakinig, controller, at isang event loop.
Ano nga ba ang event-driven na programming?
Sa isang arkitektura na hinimok ng kaganapan, Ang pagpapatupad ay na-trigger ng mga nakikitang kaganapan sa system o nabuo ng user. Ang isang kaganapan ay isang senyas na nagpapahiwatig na may nangyari: paggalaw ng mouse, pag-type sa isang field, pagkumpleto ng pag-download, pagtanggap ng isang packet sa isang socket, o iyon nagbabago ang estado ng isang sensor.
Upang tumugon sa mga kaganapang ito, ang mga ito ay naitala mga tagapakinig na nakikinig sa mga tiyak na uri ng mga kaganapan at nakikisama sa kanila mga humahawak naglalaman ng mga aksyon na isasagawa. Ang lahat ng ito ay pinag-ugnay sa loop ng kaganapan, na nangongolekta, pumila at nagpapadala ng mga kaganapan sa mga controllers nito.
Mga pangunahing konsepto na dapat mong malaman
Ito ay maginhawa upang makilala ang mga pangunahing bahagi ng paradigm na ito, dahil linawin ang mga responsibilidad sa loob ng system at maiwasan ang pagkalito kapag nagdidisenyo.
kaganapan
Ang isang kaganapan ay isang abiso na may makabuluhang nangyari. Maaaring may kasama itong naka-attach na data (hal., pinindot ang key, ang posisyon ng mouse o ang payload mula sa isang tugon sa network) para sa controller na gumawa ng mga desisyon.
Mga transmiter at receiver
Un transmiter ay ang isa na bumubuo ng kaganapan (isang pindutan, isang socket, isang timer). A receptor o nakikinig ang subscriber sa uri ng kaganapan at nagsasagawa ng isang function kapag nangyari ito; pinapayagan ng decoupling na ito sukat at muling pagsamahin ang mga pag-uugali nang madali
loop ng kaganapan
Ito ang puso ng sistema: nagpapanatili ng pila ng mga kaganapan, pinangangasiwaan ang mga ito sa pagkakasunud-sunod, at tinatawag ang kaukulang mga humahawak. Lumilikha ito ng mga reaktibong app na tumutugon sa maraming magkakasabay na kaganapan nang hindi hinaharangan ang pangunahing thread.
Mga tagapakinig at tagakontrol
Ang tagapakinig ay ang "tainga" na nagrerehistro sa isang elemento o channel, habang ang controller ay ang "utak" na nagpapasya kung ano ang gagawin kapag na-activateAng paghihiwalay sa mga ito ay nagpapabuti sa pagpapanatili at naghihikayat ng muling paggamit.

Ang pinakakaraniwang uri ng mga kaganapan
Mayroong dose-dosenang, ngunit ang mga pangkat na ito ay sumasaklaw sa karamihan ng mga kaso; Ang pag-unawa sa mga ito ay nakakatipid sa iyo ng mga oras pag-debug.
Mouse at pointer
| pangyayari | Kapag nangyari ito |
|---|---|
| mag-click | Pinindot ng user gamit ang mouse o daliri sa isang elemento. |
| mouseover / mouseout | Ang pointer ay pumapasok o umalis sa isang elemento (o isang bata). |
| contextmenu | I-right click upang buksan ang menu ng konteksto. |
| galaw ng mouse | Ang pointer ay gumagalaw sa ibabaw ng elemento. |
| mousedown / mouseup | Pinindot o binitawan ang mouse button. |
Bintana at dokumento
| pangyayari | Kapag nangyari ito |
|---|---|
| magkarga | Ang browser ay may tapos na magload ang pahina. |
| mali | Nabigong mag-load ng mapagkukunan (CSS, script, larawan) o iba pang operasyon. |
| mag-scroll | Ang view o isang lalagyan na may overflow ay ini-scroll. |
| pageshow / pagehide | Mga pagbabago sa visibility ng tab o bfcache navigation. |
| baguhin ang sukat | Ang browser window ay nagbabago ng laki. |
mga form
| pangyayari | Kapag nangyari ito |
|---|---|
| ibigay | Subukang magsumite ng isang form (bago mag-navigate). |
| focusin / focusout | Ang isang elemento (o ang anak nito) ay nakakakuha o nawalan ng focus. |
| input | Ang gumagamit magpasok ng data sa isang kontrol (sa real time). |
| baguhin | Baguhin ang halaga at mawawalan ng focus ang kontrol (checkbox, piliin, input). |
Keyboard
| pangyayari | Kapag nangyari ito |
|---|---|
| keydown | Pinindot ang isang susi. |
| susi pataas | Isang susi ang inilabas. |
| pagpindot ng key | Ang isang character na key ay pinindot at pinakawalan (hindi lahat ng mga key). |
Ang object ng kaganapan at mga kapaki-pakinabang na katangian
Kapag ang isang tagapakinig ay na-trigger, ang controller ay tumatanggap ng isang bagay na may mga detalye ng kaganapan. Matutong pisilin ito iwasan ang pagsulat ng marupok na lohika.
Mga pangkalahatang katangian at pamamaraan:
- target: elementong nagmula sa kaganapan.
- uri: uri (hal. 'click', 'input').
- maaaring kanselahin: Isinasaad kung maaaring kanselahin ang default na pagkilos.
- preventDefault(): kinansela ang default na aksyon (kung maaari).
- stopPropagation(): huminto sa pagpapalaganap (bubbling/capturing).
Mga madalas na extra ayon sa uri: clientX/pageX y kliyenteY/pahinaY sa mouse; alin o butones para sa pinindot na pindutan; susi y code sa mga susi; at sa gulong/scroll, deltaX / deltaY y deltaMode.
Pakikinig at pangangasiwa ng mga kaganapan sa JavaScript
Sa web, maaari kang magparehistro ng mga tagapakinig sa HTML o sa pamamagitan ng code. Ito ay inirerekomenda hiwalay na istraktura at pag-uugali, gamit ang addEventListener.
Opsyon 1: inline na katangian
Bagaman hindi ito ang pinakamalinis na kasanayan, kung minsan ay makakakita ka ng ganito, kung saan ang function ay invoke kapag nangyari ang kaganapan:
<!-- myClickHandler es la función que manejará el clic -->
<button onclick='myClickHandler()'>Click</button>
<script>
function myClickHandler(){
alert('hola');
}
</script>
Opsyon 2: addEventListener (inirerekomenda)
Gamit ang diskarteng ito irehistro mo ang tagapakinig sa runtime; hindi mo tinatawag ang function, ipapasa mo lang ang reference:
// index.html: <button id='b'>Borrar</button>
const btn = document.querySelector('#b');
const onClick = (e) => {
console.log('Pulsado', e.target);
};
btn.addEventListener('click', onClick);
// Eliminar el listener más tarde (mismos parámetros)
btn.removeEventListener('click', onClick);
Basahin ang value na ipinasok ng user
Kapag humawak ka ng mga form, e.target.value ay ang iyong matalik na kaibigan para sa pagkuha ng input:
<input type='text' id='nombre' />
<script>
const input = document.querySelector('#nombre');
const onChange = (e) => {
console.log('Valor:', e.target.value);
};
input.addEventListener('change', onChange);
</script>
Node.js: EventEmitter sa pagkilos
Sa kapaligiran ng server, inilalantad ng Node.js ang isang pattern sa pag-publish/pag-subscribe gamit EventEmitter, mainam para sa pag-coordinate ng asynchronous na logic, halimbawa kapag Pamahalaan ang mga log at kaganapan sa Hyper-V, nang walang mga module ng pagkabit.
// Ejemplo mínimo de emisor y receptor en Node.js
const { EventEmitter } = require('events');
class BusEventos extends EventEmitter {}
const bus = new BusEventos();
// Suscribimos un receptor al evento 'saludo'
bus.on('saludo', (nombre) => {
console.log(`¡Hola, ${nombre}!`);
});
// Disparamos el evento con datos asociados
bus.emit('saludo', 'mundo');
Ang pattern ay nagbibigay-daan sa maramihang mga receiver tumugon sa parehong kaganapan o na hindi alam ng isang issuer ang mga partikular na subscriber, na pinapaboran ang decoupling at mga diskarte para sa I-filter ang mga kritikal na kaganapan gamit ang Get-WinEvent.
Python: Mula sa Simple Transmitter hanggang Tkinter
En Sawa Maaari kang lumikha ng isang micro event bus na may listahan ng mga diksyunaryo, o gumamit ng mga aklatan/GUI tulad ng tkinter na bahagi na ng isang window event loop.
Pangunahing transmitter sa Python
Ang balangkas na ito ay nagpapakita kung paano magrehistro ng mga callback at ilunsad ang mga ito sa pamamagitan ng pagpapalabas ng isang kaganapan:
class Emisor:
def __init__(self):
self._suscriptores = {}
def on(self, evento, fn):
self._suscriptores.setdefault(evento, []).append(fn)
def emit(self, evento, *args, **kwargs):
for fn in self._suscriptores.get(evento, []):
fn(*args, **kwargs)
# Uso
bus = Emisor()
bus.on('saludo', lambda: print('¡Hola, mundo!'))
bus.emit('saludo')
Tkinter: Nagbubuklod ng mga kaganapan sa mouse at keyboard
Ang mga desktop GUI ay batay sa isang loop ng kaganapan. Sa Tkinter, magtali iniuugnay ang isang textual na kaganapan sa isang function na tumatanggap ng event object:
from tkinter import Tk, Frame
def on_key(evt):
print('Tecla:', repr(evt.char))
def on_click(evt):
frame.focus_set()
print('Click en', evt.x, evt.y)
root = Tk()
frame = Frame(root, width=200, height=120)
frame.bind('<Key>', on_key)
frame.bind('<Button-1>', on_click)
frame.pack()
root.mainloop()
Tandaan na ang mga kaganapan sa mouse ay gumagana sa widget sa ilalim ng cursor, habang ang mga keyboard shortcut ay nakakaapekto sa widget na may focus.
MIT App Inventor: Mga Kaganapan, Mga Katangian, at Paraan
Gumagamit ang App Inventor ng visual na diskarte sa mga bloke na kumakatawan sa mga kaganapan, na ginagawang mas madali para sa mga nagsisimula bumuo ng mga mobile app na walang text code.
pangyayari: block na na-trigger ng isang kaganapan (pagpindot sa pindutan, pagbubukas ng screen, pagtabingi ng device). Katangian: mga katangian ng bahagi (laki ng font, kulay, pagkakahanay) na maaari mong itakda sa disenyo o runtime. Pamamaraan: mga pre-programmed na aksyon na isinasagawa ng isang component (hal., SetFocus, AddItem), available lang sa runtime.
Kaya, ang isang app ay hindi sumusunod sa mga nakapirming tagubilin; tumutugon sa mga block ng kaganapan paggamit ng mga pamamaraan o pagbabago ng mga katangian kung naaangkop.
Mga awtomatikong kaganapan kumpara sa mga kaganapang pinasimulan ng user
May mga kaganapang na-trigger ng system (hal., kapag nagbubukas ng bintana, pagtatapos ng isang pag-download, timer tick, o mga kaganapan ng hardware bilang I-detect ang mga USB na kaganapan sa Linux) at iba pang dulot ng user (click, type, drag, gestures). Sa parehong mga kaso ang lohika ay nakaayos sa paligid ng kaugnay na mga driver.
Mga praktikal na aplikasyon ng modelong hinimok ng kaganapan
- Mga interactive na interface ng gumagamit: Ang bawat pakikipag-ugnayan (pag-click, uri, piliin) ay nagpapalitaw ng mga pagkilos na nag-a-update sa estado o DOM, na nagbibigay ng tuluy-tuloy na karanasan.
- Asynchronous na komunikasyon: Sa mga web server at microservice, pinapayagan ang mga kaganapan sa network (pagdating ng isang kahilingan, mensahe sa isang broker). proseso nang walang pagharang at umakyat.
- Real-time na pagproseso ng data: Ang Telemetry, IoT at pagsubaybay ay nakadepende sa mga sensor event na nagti-trigger agarang tugon (mga alerto, pagsasama-sama, dashboard), at maaaring dagdagan ng mga tool gaya ng Windows Event Viewer para sa pagsusuri.
- Mga Operating System at tumutok: Ang OS ay nagruruta ng mga kaganapan sa app na may focus (tingnan manager ng kaganapan sa windows). Pinapanatili ng bawat app ang loop ng kaganapan nito na kumikilos sa aktibong window, na nagcoordinate ng maraming app tumatakbo sa parallel.
Mga kalamangan at disadvantages
Kabilang sa mga malakas na puntos ay ang agarang interaktibidad, mahusay na paggamit ng mga mapagkukunan (isinasagawa lamang ang code kapag may nangyari), at ang kakayahang umangkop upang pagsamahin ang mga nagpadala at tagatanggap.
Sa kabilang banda, ang isang sistema na may maraming mga kaganapan at mga humahawak ay maaaring humantong sa hindi sinasadyang pagiging kumplikado, mahirap i-debug kung hindi ito mahusay na dokumentado o kung walang malinaw na pattern ng organisasyon.
Magandang kasanayan para sa pagtatrabaho sa mga kaganapan
- Delegasyon ng kaganapan: Sa halip na irehistro ang mga tagapakinig sa maraming node, magdagdag ng isa sa isang lalagyan at magpasya kung ano ang gagawin batay doon. kaganapan.target; ito binabawasan ang memorya at pagkabit.
- Naglilinis ng mga tagapakinig: tanggalin gamit ang alisin angEventListener yung hindi mo na kailangan o kapag nag-disassembling ng mga bahagi (kritikal sa SPA at dynamic na view) para maiwasan ang mga leaks.
- Istraktura ng code: naghihiwalay sa subscription (mga tagapakinig) mula sa lohika (mga handler), at muling ginagamit ang mga purong function para sa mapadali ang mga pagsusulit. Mga uri ng kaganapan ng dokumento at ang kanilang kargamento.
- maling paghawak: Mahuli ang mga pagbubukod sa mga humahawak at magtala ng konteksto (uri ng kaganapan, target, data) para sa pabilisin ang mga diagnosis sa produksyon.
Mabilis na paghahambing sa sequential programming
Habang ang tradisyonal na programming ay nagbibigay ng daloy na kinokontrol ng programmer, ang POE ay nagbibigay ng kontrol sa user at sa system: ang tunay na kaayusan ay minarkahan ng mga pangyayariNangangailangan ito ng pag-iisip sa mga tuntunin ng mga estado at reaksyon sa halip na mga linear na hakbang.
Maikling kumpletong halimbawa sa web: mula sa kaganapan hanggang sa pagkilos
Tingnan natin ang isang maliit na daloy na may default na pag-iwas sa pagkilos at pagbabasa ng data, pagsasama-sama ng ilang ideya sa isa form na may pagpapatunay:
<form id='f'>
<input id='email' type='email' required />
<button type='submit'>Enviar</button>
</form>
<script>
const f = document.querySelector('#f');
f.addEventListener('submit', (e) => {
e.preventDefault(); // Evita envío si hay problemas
const valor = document.querySelector('#email').value;
if (!valor.includes('@')) {
console.error('Email no válido');
return;
}
// Aquí podrías emitir un evento de aplicación o hacer fetch
console.log('Form OK. Enviando...');
});
</script>
Dito tayo pinagsama preventDefault upang kontrolin ang daloy, pagbabasa ng e.target/halaga at isang handler na magpapasya sa susunod na aksyon.
Nagbibigay-daan sa iyo ang programming na hinimok ng kaganapan na bumuo ng maliksi at reaktibong software, mula sa mga modernong UI hanggang sa mga real-time na pipeline. Kung isinasaloob mo ang mga haligi nito—mga kaganapan, tagapakinig, tagapangasiwa, at loop ng kaganapan—at ilalapat mo ang mga mahuhusay na kagawian (delegasyon, kalinisan, at kakayahang masubaybayan), magkakaroon ka ng matibay na pundasyon para sa paglikha ng matatag, nasusukat, at nakakatuwang gamitin na mga application.
Masigasig na manunulat tungkol sa mundo ng mga byte at teknolohiya sa pangkalahatan. Gustung-gusto kong ibahagi ang aking kaalaman sa pamamagitan ng pagsusulat, at iyon ang gagawin ko sa blog na ito, ipakita sa iyo ang lahat ng mga pinaka-kagiliw-giliw na bagay tungkol sa mga gadget, software, hardware, teknolohikal na uso, at higit pa. Ang layunin ko ay tulungan kang mag-navigate sa digital na mundo sa simple at nakakaaliw na paraan.

