JavaScriptのすごく基本的な疑問なのですが。。タグに囲まれていないのに

JavaScriptの超初心者なのですが、すごく疑問に思うことがあります。
全角の入力を制限するためにsampleのコードがとあるサイトに載っていたのですが
生のphpの書き方に慣れてる自分にはどうしても１つ理解ができないことがあります。

行動規範の内容に同意します

回答2件

※Fromタグはformタグの誤記だと仮定して回答します。
HTMLの属性には、イベント属性という特定のイベントが発生したときにjavascriptの実行がおこなえる属性が存在し、その属性は先頭にonがついています(例: onclick, oninput, など)。
現在はイベント属性を使うことはHTMLの可読性を下げるなど、色々と不都合な点が出てきたため推奨されていません。

(追記)

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width">
6</head>
7<body>
8<form>
9    <label>
10        テキストボックス
11        <input type="text" id="textbox1">
12    </label>
13
14    <label>
15        テキストエリア
16        <textarea rows="2" id="textarea1"></textarea>
17    </label>
18</form>
19
20<script type="text/javascript">
21    <!--
22    document.getElementById("textbox1").addEventListener("input", function () {
23        checkForm(document.getElementById("textbox1"));
24    }, false);
25
26    document.getElementById("textarea1").addEventListener("input", function () {
27        checkForm(document.getElementById("textarea1"));
28    }, false);
29
30    function checkForm($this) {
31        var str = $this.value;
32        while (str.match(/[^A-Z^a-z\d\-]/)) {
33            str = str.replace(/[^A-Z^a-z\d\-]/, "");
34        }
35        $this.value = str;
36    }
37    //-->
38</script>
39</body>
40</html>

投稿2017/02/12 16:03

編集2017/02/12 16:17

s8_chu

総合スコア14731

pegy

2017/02/12 16:09

ご返信ありがとうございます。なるほど、そのような方法があるのですが、理解いたしました。もしおっしゃる通り推奨されない場合には、例えば上記のような例において functionを実行させることになるのでしょうか？おそらくscriptタグを埋め込んでも実行させるon〜のようなトリガーがないため、少し悩ましいです。

s8_chu

2017/02/12 16:24 編集

addEventListener(http://www.pori2.net/js/event/2.html)を利用する方法が良いと思います。通常、idやclassといった属性は特定の要素に対してスタイルを設定することによく使用しますが、javascriptで要素を特定するときにも使用されます。

pegy

2017/02/12 16:21

ありがとうございます。学ばせていただきます。

行動規範の内容に同意します

ベストアンサー

あまり使われなくなっているので、その書き方は覚えなくても大丈夫です。

【Event 属性 - ウェブデベロッパーガイド | MDN】
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Event_attributes

警告: これらの属性を使うことは避けるべきです。これは HTML を巨大化し可読性を下げます。情報と振る舞いの関心事が正しく分離されておらず、発見が困難なバグを生み出します。その上に、Event 属性の使い方はほとんどの場合、Window オブジェクト上のグローバル関数にスクリプトを晒す原因になります。これはグローバルの名前空間を汚染します。

投稿2017/02/12 15:51