ホームページ > 記事 > ウェブフロントエンド > JavaScriptのイベントハンドラ例を詳しく解説
JavaScriptのイベントハンドラ例を詳しく解説
- 黄舟オリジナル
- 2017-09-22 10:15:411107ブラウズ
この記事では主に JavaScript イベント ハンドラーの関連情報を詳しく紹介します。興味のある方は参考にしてください。
この記事の例では、ご参考までに、js イベント ハンドラーの具体的なコードを共有します。具体的な内容は以下の通りです
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM0级DOM2级</title>
</head>
<body>
<input id="btn1" type="button" value="click1" onclick="show()">
<input id="btn2" type="button" value="click2">
<input id="btn3" type="button" value="click3">
<script>
function show() {
alert("btn1");
}
//DOM0级
var btn2 = document.getElementById("btn2");
btn2.onclick = function () {
alert("DOM0级btn2");
};
//DOM2级
function show2() {
alert("DOM2级btn3");
}
var btn3 = document.getElementById("btn3");
// btn3.addEventListener("click",show2,false);
// btn3.removeEventListener("click",show2,false);
//ie事件处理程序
// btn3.attachEvent("onclick",show2);
// btn3.detachEvent("onclick",show2);
//跨浏览器事件处理程序
//能力检测
var eventUtil = {
//添加具柄；
addHandler:function (element,type,handler) {
if (element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else {
element["on"+type]=handler;
}
},
//删除具柄；
removeHandler:function (element,type,handler) {
if (element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else {
element["on"+type]=null;
}
}
};
eventUtil.addHandler(btn3,"click",show2);
eventUtil.removeHandler(btn3,"click",show2);
</script>
</body>
</html>以上がJavaScriptのイベントハンドラ例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：認証コードリフレッシュ機能次の記事：認証コードリフレッシュ機能