2018/9/25 HTML_QuickFormのバリデートのjavascript関数について、引数としてthisを渡す

pearのHTML_QuickFormを使っていて、addRuleメソッドで引数としてclientを指定するとjavascriptでバリデートを行う。そのソースコードを見たところ、


<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<meta http-equiv=”Content-Typecontent=”text/html; charset=UTF-8“>
<title>Testing PEAR HTML_QuickForm</title>
</head>
<body>
<script type=”text/javascript“>
//<![CDATA[
function validate_frmTest(frm) {
var value = ”;
var errFlag = new Array();
var _qfGroups = {};
_qfMsg = ”;
value = frm.elements[‘MyTextBox’].value;
if (value != ” && value.length > 7 && !errFlag[‘MyTextBox’]) {
errFlag[‘MyTextBox’] = true;
_qfMsg = _qfMsg + ‘\n – 便番号は最大7文字です。’;
}
if (_qfMsg != ”) {
_qfMsg = ‘Invalid information entered.’ + _qfMsg;
_qfMsg = _qfMsg + ‘\nPlease correct these fields.’;
alert(_qfMsg);
return false;
}
return true;
}
//]]>
</script>
<form action=”/testsmarty.phpmethod=”getname=”frmTestid=”frmTestonsubmit=”try { var myValidator = validate_frmTest; } catch(e) { return true; } return myValidator(this);“>
<div>
<table border=”0“>
<tr>
<td style=”white-space: nowrap; background-color: #CCCCCC;align=”leftvalign=”topcolspan=”2“><b>QuickFormのテスト</b></td>
</tr>
<tr>
<td align=”rightvalign=”top“><b>あなたのお名前は?</b></td>
<td valign=”topalign=”left“> <input name=”MyTextBoxtype=”text” /></td>
</tr>
<tr>
<td align=”rightvalign=”top“><b></b></td>
<td valign=”topalign=”left“> <input name=”btnClearvalue=”クリアtype=”reset” /></td>
</tr>
<tr>
<td align=”rightvalign=”top“><b></b></td>
<td valign=”topalign=”left“> <input name=”btnSubmitvalue=”送信type=”submit” /></td>
</tr>
</table>
</div>
</form></body>
</html>

 


formのonsubmitイベントハンドラとしてmyValidator関数の引数にthisを渡している。このやり方は見たことが無いのでよくわからない。調べたところ、

要素をクリックで処理開始! JavaScriptのonclickでイベントを指定

↑にこの使い方があった。まさにここに書いてあること。ただ「戻り値」と言っているが何のことかよくわからない。イベントハンドラの戻り値?

何度読んでもわからない(笑)戻り値あるか?return文ないのに。なんとなく意味はわかるけど。厳密には戻り値ではないような。

なんかDOMぽいことをしている気がするが、こんな簡単にできるのか、という感じ。getElementByIdみたいなものを使わなくて良いのだろうか。まあ出来ているので、使わなくていいんだろうけど。

結局この使い方をすればthisは、そのイベントの対象の要素を表すオブジェクトを指す

ということか。何その説明?という感じだが、こういうことらしい。


三章第五回 イベントオブジェクト

というかこのthisはイベントオブジェクトと関係ないのか?あるような感じだが。hyohyoの解説を見てみるとthisの部分をeventにするとイベントオブジェクトが利用できる、ということ。


<!doctype html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <p onclick="console.log(this);">test</p>
  </body>
</html>

試しにこれで動かしてみたら結果は↓

<p onclick=”console.log(this);”>test</p>

つまりイベント対象の要素ですね。だからやっぱりthisはイベント対象要素のオブジェクトを指すと。


それはそれとして、↑の侍エンジニア塾のページで

二つの関数をイベントハンドラとして指定したい場合、;で区切って指定すればいいですよ。

と書いてあるがそれでよかったか、それはできない(上書きしてしまう)のでaddEventListenerを使わないといけませんね、みたいな解説がuhyohyoにあったような気がするが、勘違いか?つかuhyohyo見にいくのもいいけど実際に動かしてみればわかるか。

上書きされるのはイベントプロパティを使った場合。

      var p = document.getElementById('abcd');
      p.onclick = aaa;
    p.onclick = bbb;

このようにすると上書きされるのでaaa()が実行されませんね、と。でもaddEventListenerなら複数の関数をイベントと結びつけることができる、と。

イベント属性の場合も上記のように;を使って複数の関数を結びつけることは可能、と。

 

コメントを残す

メールアドレスが公開されることはありません。