JavaScript HTML DOM 事件

Pinapayagan ng HTML DOM ang JavaScript na tumugon sa HTML event:

鼠标移上来！
点击我

Tumugon sa event

Maaaring magsagawa ang JavaScript kapag nangyayari ang event, tulad ng kapag inilagay ang click ng user sa anumang elemento ng HTML.

Para maipatnugot ang code kapag inilagay ang click sa elemento ng user, magdagdag ng JavaScript code sa HTML event attribute:

onclick=JavaScript

Halimbawa ng HTML event:

  • Kapag inilagay ang click sa mouse ng user
  • kapag ang pahina ay naka-load
  • kapag ang imaheng ito ay naka-load
  • kapag ang mouse ay napapunta sa elementong ito
  • kapag nabago ang nilalaman ng pagpasok na larawan
  • kapag isinasubmit ang HTML form
  • kapag pinindot ng tagapagmasid ang isang pindutan

Sa halimbawa, kapag pinindot ng tagapagmasid ang <h1> ay magbabago ng nilalaman nito:

halimbawa

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">Mag-click sa teksto na ito!</h1>
</body>
</html>

亲自试一试

Sa halimbawa, magsasagawa ng function kapag tinawag mula sa event handler:

halimbawa

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Mag-click sa teksto na ito!</h1>
<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>
</body>
</html>

亲自试一试

HTML kaganapan atributo

Kung gusto mong magbigay ng kaganapan sa HTML element, maaari mong gamitin ang atributo ng kaganapan.

halimbawa

Magbigay ng kaganapan sa button element onclick kaganapan:

<button onclick="displayDate()">Subukan</button>

亲自试一试

Sa halimbawa, ang function na pinangalanang displayDate ay magsasagawa kapag pinindot ang pindutan.

Gamitin ang HTML DOM upang magbigay ng kaganapan

HTML DOM ay nagbibigay ng kapangyarihan sa iyo na gamitin JavaScript upang magbigay ng kaganapan sa HTML element:

halimbawa

Tukuyin ang button element onclick kaganapan:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

亲自试一试

Sa halimbawa, ang function na pinangalanang displayDate ay inilagay sa HTML elementong may id na "myBtn".

ang function ay magsasagawa kapag pinindot ang pindutan.

onload at onunload kaganapan

kapag ang tagapagmasid ay papasok at lumabas sa pahina, ay magpapasok ng onload 和 onunload kaganapan.

onload ang kaganapan ay maaaring gamitin upang suriin ang uri at bersyon ng browser ng tagapagmasid, at pagkatapos ay mag-load ng tamang bersyon ng pahina batay sa impormasyon.

onload 和 onunload ang kaganapan ay maaaring gamitin upang pamahalaan ang cookie.

halimbawa

<body onload="checkCookies()">

亲自试一试

onchange kaganapan

onchange ang kaganapan ay kalimitang ginagamit kasama ang pagtsemo ng pagpasok na larawan.

Isa sa mga paraan kung paano gamitin ang onchange ang pagbabago ng nilalaman ng pagpasok na larawan ay magtawag sa function na upperCase().

halimbawa

<input type="text" id="fname" onchange="upperCase()">

亲自试一试

onmouseover at onmouseout kaganapan

onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数：

鼠标移上来！

亲自试一试

onmousedown, onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。

首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。

点击我

亲自试一试

更多实例

onmousedown 和 onmouseup
当用户按下鼠标按钮时改变图像。
onload
当页面已完成加载时显示报警框。
onfocus
当输入字段获得焦点时改变其背景色。
鼠标事件
当指针移动到元素上时改变其颜色。

HTML DOM Event 对象参考手册

如需所有 HTML DOM 事件的列表，请访问我们完整的 HTML DOM 事件对象参考手册。