YanoRyuichi.com/
Wiki
Blog
GitHub
Sandbox
開始行:
* イベント割り当て方法いろいろ [#y5aab031]
** onclick属性等にハンドラを割り当てる [#y7247a1a]
この方法は現在ではレガシーとされ、あまり推奨されていない...
<html>
<head>
<script type="text/javascript">
function func(evt) {
var evt = evt || window.event; // (注1)
var elm = evt.target || evt.srcElement; // (注2)
alert(evt.type + " " + elm.name + " " + elm.value);
}
window.onload = function () {
var elm = document.getElementById('btn');
elm.onclick = func;
}
</script>
</head>
<body>
<input id="btn" name="btn_name" type="button" value="btn...
</body>
</html>
*** (注1) ハンドラ関数内でのイベントオブジェクト [#z056d4...
- IE以外のブラウザではハンドラ関数の引数としてイベントオ...
- IEでは引数が渡らないので、グローバルのwindow.eventオブ...
- なお、下のようにハンドラをインラインで割り当てれば、IE...
<input id="btn" name="btn_name" type="button" value="btn...
*** (注2) ハンドラ関数内でのイベントのターゲット要素 [#kd...
- IE以外のブラウザでは、イベントオブジェクトのtargetプロ...
- IEでは、イベントオブジェクトのsrcElementプロパティを使...
** addEventListener()/attachEvent()でハンドラを割り当てる...
IE以外ではaddEventListener()、IEではattachEvent()を使うの...
<html>
<head>
<script type="text/javascript">
function attach(elm, type, handler) {
if (elm.addEventListener) {
elm.addEventListener(type, handler, false);
} else {
elm.attachEvent('on' + type, handler);
}
}
function func(evt) {
var evt = evt || window.event;
var elm = evt.target || evt.srcElement;
alert(evt.type + " " + elm.name + " " + elm.value);
}
window.onload = function () {
attach(document.getElementById('btn'),'click',func);
}
</script>
</head>
<body>
<input id="btn" name="btn_name" type="button" value="btn...
</body>
</html>
*** 複数のハンドラを割り当てる [#be4d91a9]
ハンドラ関数func1とfunc2を用意し、下のようにイベント割り...
window.onload = function () {
attach(document.getElementById('btn'),'click',func1);
attach(document.getElementById('btn'),'click',func2);
}
** attachEvent()で割り当てたハンドラ関数内でのthisをター...
ハンドラ関数内で、以下のようにthisを参照すると、
function func(evt) {
alert(this.type + " " + this.name + " " + this.value);
}
IE以外のブラウザではthisはターゲット要素（この場合INPUTタ...
elm.attachEvent('on' + type, function() { handler.call(e...
ハンドラ関数を直接渡さず、「ターゲット要素に対してcall()...
** ハンドラ関数が引数を取れるようにする [#c74ffec7]
- ハンドラ関数func()の仮引数にargsを加える。
- クロス関数attach()の仮引数にargsを加える。
- ハンドラを割り当てる時に、ハンドラ関数を直接渡さず、cal...
これまでの処理もまとめると、プログラム全文は次のようにな...
<html>
<head>
<script type="text/javascript">
function attach(elm, type, handler, args) {
if (elm.addEventListener) {
elm.addEventListener(type, function (evt) { handler....
} else {
elm.attachEvent('on' + type, function() { handler.ca...
}
}
function func(evt, args) {
alert(this.name + " " + args[0]);
}
window.onload = function () {
attach(document.getElementById('btn'), 'click', func, ...
}
</script>
</head>
<body>
<input id="btn" name="btn_name" type="button" value="btn...
</body>
</html>
これでクロスブラウザなイベント割り当ての処理が実現したが...
終了行:
* イベント割り当て方法いろいろ [#y5aab031]
** onclick属性等にハンドラを割り当てる [#y7247a1a]
この方法は現在ではレガシーとされ、あまり推奨されていない...
<html>
<head>
<script type="text/javascript">
function func(evt) {
var evt = evt || window.event; // (注1)
var elm = evt.target || evt.srcElement; // (注2)
alert(evt.type + " " + elm.name + " " + elm.value);
}
window.onload = function () {
var elm = document.getElementById('btn');
elm.onclick = func;
}
</script>
</head>
<body>
<input id="btn" name="btn_name" type="button" value="btn...
</body>
</html>
*** (注1) ハンドラ関数内でのイベントオブジェクト [#z056d4...
- IE以外のブラウザではハンドラ関数の引数としてイベントオ...
- IEでは引数が渡らないので、グローバルのwindow.eventオブ...
- なお、下のようにハンドラをインラインで割り当てれば、IE...
<input id="btn" name="btn_name" type="button" value="btn...
*** (注2) ハンドラ関数内でのイベントのターゲット要素 [#kd...
- IE以外のブラウザでは、イベントオブジェクトのtargetプロ...
- IEでは、イベントオブジェクトのsrcElementプロパティを使...
** addEventListener()/attachEvent()でハンドラを割り当てる...
IE以外ではaddEventListener()、IEではattachEvent()を使うの...
<html>
<head>
<script type="text/javascript">
function attach(elm, type, handler) {
if (elm.addEventListener) {
elm.addEventListener(type, handler, false);
} else {
elm.attachEvent('on' + type, handler);
}
}
function func(evt) {
var evt = evt || window.event;
var elm = evt.target || evt.srcElement;
alert(evt.type + " " + elm.name + " " + elm.value);
}
window.onload = function () {
attach(document.getElementById('btn'),'click',func);
}
</script>
</head>
<body>
<input id="btn" name="btn_name" type="button" value="btn...
</body>
</html>
*** 複数のハンドラを割り当てる [#be4d91a9]
ハンドラ関数func1とfunc2を用意し、下のようにイベント割り...
window.onload = function () {
attach(document.getElementById('btn'),'click',func1);
attach(document.getElementById('btn'),'click',func2);
}
** attachEvent()で割り当てたハンドラ関数内でのthisをター...
ハンドラ関数内で、以下のようにthisを参照すると、
function func(evt) {
alert(this.type + " " + this.name + " " + this.value);
}
IE以外のブラウザではthisはターゲット要素（この場合INPUTタ...
elm.attachEvent('on' + type, function() { handler.call(e...
ハンドラ関数を直接渡さず、「ターゲット要素に対してcall()...
** ハンドラ関数が引数を取れるようにする [#c74ffec7]
- ハンドラ関数func()の仮引数にargsを加える。
- クロス関数attach()の仮引数にargsを加える。
- ハンドラを割り当てる時に、ハンドラ関数を直接渡さず、cal...
これまでの処理もまとめると、プログラム全文は次のようにな...
<html>
<head>
<script type="text/javascript">
function attach(elm, type, handler, args) {
if (elm.addEventListener) {
elm.addEventListener(type, function (evt) { handler....
} else {
elm.attachEvent('on' + type, function() { handler.ca...
}
}
function func(evt, args) {
alert(this.name + " " + args[0]);
}
window.onload = function () {
attach(document.getElementById('btn'), 'click', func, ...
}
</script>
</head>
<body>
<input id="btn" name="btn_name" type="button" value="btn...
</body>
</html>
これでクロスブラウザなイベント割り当ての処理が実現したが...
ページ名:
