HTML DOM addEventListener() နည်း
- အဆင်းကြမ်း အရင် accessKey
- နောက်ပိုင်း စာရင်း appendChild()
- အဆင်းကြမ်း ပြန်လည် HTML DOM Elements အမှုသိမ်း
ဒါ နှင့် အသုံးပြုခြင်း
addEventListener() အခြေခံ အင်တာဗက် အသုံးပြုသည်။
实例
例子 1
向
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
例子 2
更紧凑的代码：
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});
您可以在页面下方找到更多实例。
语法
element.addEventListener(type, function, useCapture)
参数
| 参数 | 描述 |
|---|---|
| type |
必需。事件的名称。 请不要使用 "on" 前缀。 请使用 "click" 而不是 "onclick"。 |
| function | 必需。事件发生时运行的函数。 |
| useCapture |
可选（default = false）。
|
返回值
无。
技术细节
该方法将把指定的事件监听器函数添加到当前节点的监听器集合中，以处理指定类型 type 的事件。如果 useCapture 为 true，则监听器被注册为捕捉事件监听器。如果 useCapture 为 false，它被注册为普通事件监听器。
addEventListener() 可能被调用多次，在同一个节点上为同一种类型的事件注册多个事件句柄。但要注意，DOM 不能确定多个事件句柄被调用的顺序。
အဆိုပါ ဖြစ်ပေါ်မှု အစုအဝေး ကို ပြန်လည်တည်ဆောက်ခြင်း မပြုပါ။ type နှင့် useCapture သဘောတူ အစိုးရ အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် အစိုးရ အဆိုပါ အချက်အလက် စသည့် ဖြစ်ပေါ်မှု ကို ပြန်လည်တည်ဆောက်ခြင်း မပြုပါ။
အဆိုပါ Node.cloneNode() မည်သည့် Document.importNode() Document.importNode() မစ်မစ်ပုံစံ တွင် အရာတွင် အသုံးပြုခဲ့သော ဖြစ်ပေါ်မှု အစုအဝေး ကို ပြန်လည်တည်ဆောက်ခြင်း မပြုပါ။
အမည်သတ်မှတ်ထားပြီး လုပ်ကိုင်ပုံမှာ တူညီပါသည်。 Document နှင့် Window အရာတွင် အသုံးပြုခဲ့ကာ လုပ်ကိုင်ပုံမှာ တူညီပါသည်。
အခြား အမျိုးမျိုးသော အကျိုးသမားများ
အမှတ် 3
အသုံးပြုသူ ကား တစ်ခုတည်းသော အရာတွင် မည်သည့် ဖြစ်ပေါ်မှုများကို ထပ်ပေါင်းနိုင်ပါသည်:
element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);
အမှတ် 4
အသုံးပြုသူ ကား တစ်ခုတည်းသော အရာတွင် မည်သည့် ဖြစ်ပေါ်မှုကို ထပ်ပေါင်းနိုင်ပါသည်:
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);
အမှတ် 5
ပြင်းပြီး သတ္တုပန်း အသုံးပြုရန်:
element.addEventListener("click", function() {
myFunction(p1, p2);
});
အမှတ် 6
ပြန်လည် <button> အခြေအနေ ပြုလုပ်ရန်:
element.addEventListener("click", function() {
this.style.backgroundColor = "red";
});
အမှတ် 7
ပေါ်ထွက်ခြင်း နှင့် ခံစားခြင်း အခြေအနေ
element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);
အမှတ် 8
အချက်အလက် ဖျက်သိမ်းရန်:
element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);
ဘရာဇီး ထောက်ပံ့
element.addEventListener() ဖြစ်သည််အတွက် DOM Level 2 (2001) အကျိုးဆက်ဖြစ်သည်။
အားလုံး ဘရာဇီး သို့ အပြည့်အဝင် ထောက်ပံ့ကြသည်:
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| ထောက်ပံ့ | 9-11 | ထောက်ပံ့ | ထောက်ပံ့ | ထောက်ပံ့ | ထောက်ပံ့ |
ပါဝင်သော စာရင်း
အကိရိယာ နည်းလမ်း
removeEventListener() နည်းလမ်း
ဆောက်လုပ် နည်းလမ်း
removeEventListener() နည်းလမ်း
ပညာရှင်များအတွက်:
- အဆင်းကြမ်း အရင် accessKey
- နောက်ပိုင်း စာရင်း appendChild()
- အဆင်းကြမ်း ပြန်လည် HTML DOM Elements အမှုသိမ်း
