onclickの登録に関して。

前提・実現したいこと

こちらのサイトを参考に、
HTMLタグにonclick属性を付与するようなクリックイベントの登録処理を行いたいのですが、
試してみると、タグにonclick属性が付与されず、クリックイベントも反応せず、実装方法がわかりません。
ご教示お願いします。

試したこと

HTML
1<body>
2    <ul>
3        <li id="list1">リスト1</li>
4        <li id="list2">リスト2</li>
5        <li id="list3">リスト3</li>
6    </ul>
7</body>

JavaScript
1$(function() {
2	$("#list1").onclick = something();
3
4	function something(){
5		console.log("test");		
6	}
7});

実行すると、なぜかロード時に「test」の出力がされました。
リスト1を何度クリックしても、出力がされませんでした。
HTMLを見てみると、当該listタグにonclick属性も付与されていませんでした。

ちなみに、クリックイベントの登録で下記の書き方は知っています。
質問冒頭に提示した参考サイトのように、
タグにonclick属性を付与するようなonclickでの書き方を教えていただきたいです。

JavaScript
1	$("#list1").on('click', function() {
2		console.log("test");
3	});

補足情報（FW/ツールのバージョンなど）

Google Chrome,
jquery 1.11.2

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

回答3件

onclickプロパティにメソッドを渡してもonclickイベントの登録にはなりません。
この記事の趣旨は既に登録されているonlickプロパティを変数に代入しておけば、
再登録する時に再度onclickプロパティに設定することでそのまま使えるということだと思います。

試しにいくらか作ってみましたが別なidにコピーすることはできますね。

html
1<body>
2    <ul>
3        <li id="list1" onclick="something()">リスト1</li>
4        <li id="list2">リスト2</li>
5        <li id="list3">リスト3</li>
6        <button onclick="eventdelete()">削除</button>
7        <button onclick="reregistration()">再登録</button>
8        <button onclick="copy()">コピー</button>
9    </ul>
10</body>

javascript
1function something(){
2    console.log("test");        
3}
4
5var event;
6function eventdelete(){
7    event = $("#list1").get(0).onclick;
8    $("#list1").get(0).onclick = "";
9}
10
11function reregistration(){
12    $("#list1").get(0).onclick = event;
13}
14
15function copy(){
16    $("#list2").get(0).onclick = event;
17}

投稿2020/01/20 12:16

yureighost

総合スコア2183

tkshp

2020/01/21 04:34

ご回答ありがとうございます。勉強になりました。ありがとうございます。

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

タグにonclick属性を付与するようなonclickでの書き方を教えていただきたい

なんの役にもたたないので覚えないほうがよいでしょう。

javascript
1$(function(){
2  $('#list1').attr('onclick',"console.log('test')");
3});
4

投稿2020/01/21 00:35

yambejp

総合スコア114779

yambejp

2020/01/21 00:37

clickの属性への書き出しはは競合するので一つしか登録できません

tkshp

2020/01/21 04:33

ご回答ありがとうございます。なるほど、attr属性が使えるのですね。しかし、非推奨ということを教えていただきありがとうございます。ありがとうございます。

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

ベストアンサー

実行すると、なぜかロード時に「test」の出力がされました。

リスト1を何度クリックしても、出力がされませんでした。
HTMLを見てみると、当該listタグにonclick属性も付与されていませんでした。

jQuery オブジェクトの プロパティ や メソッド（返り値）を考慮してください。

jQuery では {HTML*Element} オブジェクトを参照するために get(0) の結果を使っている。
関数に () を付けると実行構文。代入するのは結果なのか、関数そのものなのかを考える。

ご質問の $("#list1").onclick = something(); は
リンク先に倣うなら、$("#list1").get(0).onclick = something; と書かれているはずです。

#追記）
コメント欄の質問より

$("#list1")と$("#list1").get(0)で取得されるものの違い（中略）下記の認識で合っていますか？

その認識で合っています。

手っ取り早くjQueryの実装を確認する方法：

console.log($("#list1"))
console.log($("#list1").get(0))

引数付きで関数を呼び出すような処理を付与する

HTMLでの属性記述とは異なり、JavaScriptでは DOM を介することになります。
全ての DOM要素の基底オブジェクトとなる EventTarget の実装に従います。
（イベントハンドラの第一引数に渡されるのが event オブジェクト）

javascript
1$(function() {
2
3  // 1. イベント伝搬するので 要素に引数に変わる値を設定しておく例
4  $("#list1").get(0).onclick = something;
5  let elm1 = $("#list1").get(0);
6  elm1.setAttribute("my-arg","hogehoge");
7  function something( event ) {
8    console.log("test", event )
9    console.log( event.target === elm1 ); // true
10    console.log( event.target.getAttribute("my-arg") ); // "hogehoge"
11  }
12/* イベントハンドラから参照できるスコープ内で引数に変わる値を保持する方法も
13  let params = { "list1": "hogehoge" }
14  $("#list1").get(0).onclick = something;
15  function something( event ) {
16    let elmId = event.target.id;
17    console.log("test", params[elmId] ); // "test", "hogehoge"
18  }
19 */
20
21  // enclosure で引数を受け、 closure をイベントハンドラとして返却する
22  $("#list2").get(0).onclick = enclosure("hogehoge", 1, true);
23  function enclosure( ...args ){
24    return function closure(event) {
25      console.log( event );
26      console.log("test", args); // "test",["hogehoge", 1, true]
27    }
28  }
29
30  // jQuery の data API を使う
31  let argData = { hoge:"HOGE",num:123 };
32  $("#list3")
33    .data( "myArg", argData ) // 伝搬する要素に値を設定
34    .on("click", function(){
35      // クリック時に取り出して確認
36      console.log( $(this).data("myArg") ); // { hoge:"HOGE",num:123 }
37    });
38
39});

jQuery では、JavaScript オブジェクトを渡せる data API が最もスマートと言えます。

投稿2020/01/20 12:00

編集2020/01/20 21:31

AkitoshiManabe

総合スコア5432

tkshp

2020/01/20 13:21

ご回答ありがとうございます。すみません、2点質問があります。・質問1。　まず、$("#list1")と$("#list1").get(0)で取得されるものの違いを理解していなかったので調べました。　下記の認識で合っていますか？　$("#list1")：jQueryオブジェクト。　$("#list1").get(0)：DOMオブジェクト。　DOMオブジェクトを掴むと、　「DOMオブジェクト.属性名」の書式で、指定した属性にアクセスできる。・質問2。　下記のように引数付きで関数を呼び出すような処理を付与するには、どういった書き方をすればよいですか？　<li onclick="Gmap.setCenter('21.3','-158.1');">リスト</li> 　ご回答いただいた内容について考えると、関数そのものというより、結果になるのでしょうか。　ただ、()を付けた時点で関数呼び出しされてしまうので、　意図としては、クリック時に引数を指定して読み込むようにしたい形です。　ちなみに引数は動的に埋め込みます。　イメージ的には、下記のようなことをしたいです(下記では意図した処理にならないですが)。 var latitude = "21.3"; //動的に生成。 var longitude = "-158.1"; //動的に生成。 $("#list1").get(0).onclick = INTLDP_Gmap.setCenter(latitude, longitude);

tkshp

2020/01/20 15:49

すみません、質問2に関しては、だいぶまだ自分が理解していない点が多いので、質問1だけでも教えていただけたらと思います。

AkitoshiManabe

2020/01/20 21:14 編集

追記しました。 2. については「引数でなくとも、引数に与えたい内容をイベントハンドラ内で使えればいい。」という考えで実装します。

tkshp

2020/01/21 04:34

ご回答ありがとうございます。質問1,2のご回答ありがとうございます。 data APIを使う方法があるのですね。とても勉強になりました。ありがとうございました。

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

あなたの回答