ការបង្កើត objcet ចេញពី HTML ឧទាហរណ៍យើងមាន <div id="myID">Text</div> ជា HTML ហើយយើងដាក់ ID ឲ្យវាថា myID ។ បន្ទាបមកនៅក្នុង javascript បង្កើត object គឺ document.getElementById("myID") នេះគឺយើងបានបង្កើត object ថ្មីមួយហើយ ។ ឬមួយយើងធ្វើមួយបែបទៀតគឺ document.querySelector(...) បើតាមនេះក៏អាចដាក់បានទាំង ID (#) និង class (.)
ជាធម្មតាយើងប្រើប្រាស់ event ដើម្បីហៅ funtion នៃ javascript មកប្រើនៅក្នុង html <input type="button" value="click" id="btn" onclick="calu()">។ ប៉ុន្តែមកប្រើបែបនេះវិញដោយប្រើនៅក្នុង javascript តែម្តង។
document.getElementById().addEventListener()
នៅក្នុង addEventListener("type", function)
ចំពោះ type វាមានដូចជា click, mouseover និង mouseout ហើយមានច្រើនទៀត យើងចូលទៅមើលនៅក្នុង w3school
<body>
<div id="txt">
Demo
</div>
<input type="button" value="BTN1" id="btn">
<script>
function showText(){
document.getElementById("txt").innerHTML = "I'm study JavaScript!"
}
document.getElementById("btn").addEventListener("click", function(){
showText()
})
</script>
</body>
document.getElementById(...).onclick = function()
ចំពោះកូដនេះវាស្រដៀងទៅនឹងខាងលើដែរទេ
<body>
<div id="txt">
Demo
</div>
<input type="button" value="BTN1" id="btn">
<script>
function showText(){
document.getElementById("txt").innerHTML = "I'm study JavaScript!"
}
document.getElementById("btn").onclick = function (){
showText()
}
</script>
</body>
document.querySelector(...).addEventListener("type", function(){})
<body>
<div id="txt">
Demo
</div>
<input type="button" value="BTN1" id="btn">
<script>
function showText(){
document.getElementById("txt").innerHTML = "I'm study JavaScript!"
}
document.querySelector("#btn").addEventListener("click", function(){
showText()
})
</script>
</body>
ការប្រើ querySelectorAll()
យើងមាន HTML element បីដែលមានឈ្មោះ class ដូចគ្នា ហើយយើងចង់ប្តូរអក្សរណាមួយនៃបីយើងចាប់ class ទាំងបីដោយប្រើ querySelector ប៉ុន្តែគឺចាប់បានតែ HTML element មួយមុនគេ។
<body>
<div class="demo"> Hello Text 1 </div>
<div class="demo"> Hello Text 2 </div>
<div class="demo"> Hello Text 2 </div>
<input type="button" value="BTN1" id="btn">
<script>
function showText(){
document.querySelector(".demo").innerHTML = "I'm study Javascript!"
}
document.getElementById("btn").addEventListener("click", function(){
showText()
})
</script>
</body>
ដូចនេះយើងត្រូវប្រើ querySelectorAll ទើបយើងចាប់បាន index នីមួយបាន។ ហើយនៅពេលយើងប្រើត្រូវដាក់ index វា [index]
<body>
<div class="demo"> Hello Text 1 </div>
<div class="demo"> Hello Text 2 </div>
<div class="demo"> Hello Text 2 </div>
<input type="button" value="BTN1" id="btn">
<script>
document.getElementById("btn").addEventListener("click", function(){
document.querySelectorAll(".demo")[0].innerHTML = "I'm study Javascript!"
})
</script>
</body>
<body>
<div class="demo"> Hello Text 1 </div>
<div class="demo"> Hello Text 2 </div>
<div class="demo"> Hello Text 2 </div>
<input type="button" value="BTN1" id="btn">
<script>
document.querySelector("#btn").addEventListener("click", function(){
document.querySelectorAll(".demo")[1].innerHTML = "I'm study Javascript!"
})
</script>
</body>
<body>
<div id="txt">Demo</div>
<input type="button" value="click BTN1" class="btn">
<input type="button" value="click BTN2" class="btn">
<input type="button" value="click BTN3" class="btn">
</body>
<script>
var button = document.querySelectorAll(".btn")
button.forEach(function(e,i){
e.addEventListener("click", function(){
document.getElementById("txt").innerHTML = button[i].value
})
})
</script>
</html>
0 Comments