జావాస్క్రిప్ట్ హెచ్టిఎంఎల్ డొమ్ ఇవెంట్

హెచ్టిఎంఎల్ డామ్ హెచ్టిఎంఎల్ ఇవెంట్స్కు జావాస్క్రిప్ట్ ప్రతిస్పందించడానికి అనుమతిస్తుంది:

鼠标移上来！
点击我

ఇవెంట్స్ ప్రతిస్పందించడం

జావాస్క్రిప్ట్ ఇవెంట్స్ జరగినప్పుడు అమలు చేయగలదు, ఉదాహరణకు వినియోగదారుడు కొన్ని హెచ్టిఎంఎల్ ఎలిమెంట్ని క్లిక్ చేసినప్పుడు.

వినియోగదారుడు క్లిక్ చేసిన ఎలిమెంట్ని వద్ద కోడ్ అమలు చేయడానికి, హెచ్టిఎంఎల్ ఇవెంట్ అట్రిబ్యూట్స్కు జావాస్క్రిప్ట్ కోడ్ జోడించండి:

onclick=జావాస్క్రిప్ట్

హెచ్టిఎంఎల్ ఇవెంట్స్ ఉదాహరణలు:

  • వినియోగదారుడు మౌసును క్లిక్ చేసినప్పుడు
  • 当网页加载后
  • చిత్రం లోడ్ అయినప్పుడు
  • మౌస్ పైన ఎలిమెంట్ను పెట్టినప్పుడు
  • వినియోగదారుడు ఇన్పుట్ ఫీల్డ్ ను మార్చినప్పుడు
  • వినియోగదారుడు HTML ఫారమ్ ను సమర్పించినప్పుడు
  • వినియోగదారుడు కీబోర్డ్ ను క్లిక్ చేసినప్పుడు

ఈ ఉదాహరణలో, వినియోగదారుడు ఈ బటన్ ను క్లిక్ చేసినప్పుడు <h1> నడుపబడినప్పుడు, దాని సమాచారం మారుతుంది:

ఉదాహరణ

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">ఈ టెక్స్ట్ ను క్లిక్ చేయండి!</h1>
</body>
</html>

亲自试一试

ఈ ఉదాహరణలో, ఇవెంట్ హాండ్లర్ ఫంక్షన్ ను ఫంక్షన్ కల్లు చేసి ఉపయోగిస్తారు:

ఉదాహరణ

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">ఈ టెక్స్ట్ ను క్లిక్ చేయండి!</h1>
<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>
</body>
</html>

亲自试一试

HTML ఇవెంట్ అట్రిబ్యూట్స్

మీరు HTML ఎలిమెంట్కు ఇవెంట్ అప్పగించడానికి ఇవెంట్ అట్రిబ్యూట్స్ ఉపయోగించవచ్చు.

ఉదాహరణ

బటన్ ఎలిమెంట్కు అప్పగించండి onclick ఇవెంట్:

<button onclick="displayDate()">ప్రయత్నించండి</button>

亲自试一试

ఈ ఉదాహరణలో, displayDate అనే నామం కలిగిన ఫంక్షన్ బటన్ ను క్లిక్ చేసినప్పుడు నడుపబడుతుంది.

ఇవెంట్స్ అప్పగించడానికి HTML DOM ఉపయోగించండి

HTML DOM మీదికి JavaScript ద్వారా HTML ఎలిమెంట్స్కు ఇవెంట్స్ అప్పగించడానికి అనుమతిస్తుంది:

ఉదాహరణ

బటన్ ఎలిమెంట్కు ప్రత్యేకంగా పేర్కొనుట onclick ఇవెంట్:

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

亲自试一试

ఈ ఉదాహరణలో, displayDate అనే నామం కలిగిన ఫంక్షన్ id="myBtn" యొక్క HTML ఎలిమెంట్ కు అప్పగించబడింది.

బటన్ ను క్లిక్ చేసినప్పుడు ఫంక్షన్ నడుపబడుతుంది.

onload మరియు onunload ఇవెంట్స్

వినియోగదారుడు పేజీని ఎంటర్ చేసినప్పుడు మరియు లేచినప్పుడు, ఈ ఇవెంట్స్ ప్రేరేయబడతాయి. onload 和 onunload ఇవెంట్

onload ఇవెంట్స్ యాక్సెస్ చేసిన వినియోగదారు బ్రౌజర్ రకం మరియు సంస్కరణను తనిఖీ చేసి, ఆ సమాచారం ఆధారంగా పేజీ యొక్క సరిపోయే వెర్షన్ను లోడ్ చేయడానికి ఉపయోగపడతాయి.

onload 和 onunload ఇవెంట్స్ కుకీలను నిర్వహించడానికి ఉపయోగపడతాయి.

ఉదాహరణ

<body onload="checkCookies()">

亲自试一试

onchange ఇవెంట్

onchange ఇవెంట్స్ తరచుగా ఇన్పుట్ ఫీల్డ్ వెరిఫికేషన్ తో కలిసి ఉపయోగిస్తారు.

ఈ ఇవెంట్ ను ఉపయోగించడానికి ఒక ఉదాహరణ onchange ఉదాహరణ. వినియోగదారుడు ఇన్పుట్ ఫీల్డ్ సమాచారాన్ని మార్చినప్పుడు, upperCase() ఫంక్షన్ నడుపబడుతుంది.

ఉదాహరణ

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

亲自试一试

onmouseover మరియు onmouseout ఇంటర్నెట్ ఇవెంట్స్

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

鼠标移上来！

亲自试一试

onmousedown, onmouseup 以及 onclick 事件

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

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

点击我

亲自试一试

మరిన్ని ఇన్స్టాన్స్లు

onmousedown మరియు onmouseup
యూజర్ మౌస్ బటన్ నొక్కినప్పుడు చిత్రం మార్చండి.
onload
పేజీ పూర్తిగా లోడ్ అయినప్పుడు అలర్ట్ బాక్స్ చూపించండి.
onfocus
ఇన్పుట్ ఫీల్డ్ ఫోకస్ పొందినప్పుడు బ్యాక్గ్రౌండ్ కలర్ మార్చండి.
మౌస్ ఇవెంట్స్
పాయింటర్ ఎలిమెంట్లపై కలిగిన రంగు మార్చండి.

హెచ్ఎంఎల్ డామ్ ఇవెంట్ ఆబ్జెక్ట్ రిఫరెన్స్ మ్యాన్యువల్

అన్ని హెచ్ఎంఎల్ డామ్ ఇవెంట్ల జాబితా కొరకు మా పూర్తి సైట్ సందర్శించండి హెచ్ఎంఎల్ డామ్ ఇవెంట్ ఆబ్జెక్ట్ రిఫరెన్స్ మ్యాన్యువల్.