input要素のonclickなどのイベントハンドラからグローバルな関数`list`にアクセスできない件

###前提・実現したいこと
https://jsfiddle.net/rhjfjqj8/
↑上記サンプルなんですが、input要素のイベントハンドラからはlist関数を参照できません。test関数にはアクセスができます。何故なんでしょうか。

###発生している問題・エラーメッセージ
TypeError: list is not a function

###該当のソースコード

HTML
1<a href="#" onclick="list()">list</a>
2<a href="#" onclick="test()">test</a>
3<br>
4<input type="text" onchange="list()" value="list">
5<input type="text" onchange="test()" value="test">
6<br>
7<input type="button" onclick="list()" value="list">
8<input type="button" onclick="test()" value="test">
9<br>
10<label><input type="checkbox" onclick="list()">list</label>
11<label><input type="checkbox" onclick="test()">test</label>
12<br>

javascript
1function list(){alert('list');}
2function test(){alert('test');}

###試したこと
予約語関連かと思い検索してみましたが、それらしき情報にあたりませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
OSはWin7です。Chrome、Firefox、IE11で同様の現象が起きることを確認しました。

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

回答1件

ベストアンサー

原因は、<input onclick="list()"> がinput要素の list属性を参照してしまうためです。
HTML Standard / MDN ←（input要素にはlist属性が存在する）
つまり解決方法は

<input>が持つプロパティ名と被らないようにonclick="～"を指定する（姑息的）

（ただし後述するようにdocument（場合によっては<form>も）が持つプロパティとも被らないにする必要があります。）

[追記] onclick="window.list()"のようにグローバルオブジェクトを経由する（コメントで教えて頂きました）
addEventListenerを使ってイベントハンドラを追加する（一番オススメ）

です。

<input>が持つプロパティは山ほどありますから（alt, checked, list, max, min, name, readonly, size, src, type, value, width...などなど）、被らないようにするというのは意外と難しいです。
これはaddEventListenerをおすすめする理由の一つでもあります。

なぜ<input onclick="list()"> がinput要素の list属性を参照するのかというと、
HTMLに直接書いたonclickなどのイベントハンドラは、下のような環境で実行されることになっているためです。

javascript
1with(document){
2	with(this.form){ // <form> 内の要素であれば
3		with(this){ // this とは onclick を記述した要素自身
4			/*
5			* この環境でコードが実行されます。
6			*/
7		}
8	}
9}

ですので、
<input onclick="value">と書いたら<input>のvalue属性が参照されますし、
<input onclick="submit">と書いたら<form>のsubmitメソッドが参照されますし、
<input onclick="write">と書いたらdocument.writeが参照されます。

参考：Qiita HTMLのイベント属性(onclickなど)のスコープについて
（参考ページではwith(document){}について触れられていませんが、上の例のようにdocumentのプロパティも確かに拾うので注意です。）

投稿2017/02/18 08:15

編集2017/02/20 09:51