event.preventDefault();について

event.preventDefault() ;は調べると規定の動作をキャンセルするという意味はわかったのですが、
このコードの中では、event.preventDefault() ;が２回でてきますが、
それぞれ何の動作をキャンセルしているのでしょうか？
このevent.preventDefault()をどういうときに書く必要があるのかわからない状態です。

js
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5div#hoge, div#fuga {
6	width: 250px ;
7	text-align: center ;
8	padding: 24px 12px ;
9	background-color: blue ;
10	color: #fff ;
11}
12
13div#fuga { background-color: red ; }
14textarea { width: 250px ; height: 60px ; font-size: 16px ; }
15div#result { white-space: pre-wrap ; }
16</style>
17</head>
18<body>
19<p><textarea>SYNCER</textarea></p>
20<p><img src="./image.png" draggable="true" width="120" height="120"></p>
21<hr>
22<div id="hoge">drop here!</div>
23<hr>
24<div id="result"></div>
25<script>
26var element = document.getElementById( "hoge" ) ;
27
28var callbackFn1 =  function ( event ) {
29	event.preventDefault() ;
30} ;
31
32var callbackFn2 =  function ( event ) {
33	event.preventDefault() ;
34
35	var dataTransfer = event.dataTransfer ;
36	var types = dataTransfer.types ;
37	console.log( types ) ;
38
39	resultElement.innerHTML = "" ;
40
41	for ( var i=0,l=types.length; l>i; i++ ) {
42		var value = dataTransfer.getData( types[i] ) ;
43		console.log( types[i], value ) ;
44		resultElement.appendChild( document.createTextNode( "type: " + types[i] + "\n" ) ) ;
45		resultElement.appendChild( document.createTextNode( "return value: " + value + "\n\n" ) ) ;
46	}
47} ;
48
49element.ondragover = callbackFn1 ;
50element.ondrop = callbackFn2 ;
51
52var resultElement = document.getElementById( "result" ) ;
53</script>
54
55</body>
56</html>

m.ts10806

2021/01/07 04:48

出典は何でしょうか。また、自身が理解してること調べたこと試したことを記載してください

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

回答1件

ベストアンサー

event.preventDefault() という関数はデフォルトのイベントをキャンセルしたい場合に使われます。このコードの例ですと ondragover と ondrop のコールバック関数でそれぞれ呼び出されていますが、前者はドラッグしているものが通り過ぎた時、後者はドラッグしているものをドロップしたときのイベントをそれぞれキャンセルしています。

なぜこのようなことをしなければいけないかというと、ブラウザにはドラッグ・アンド・ドロップしたファイルを表示するというデフォルトの機能があるため、その機能が働かないようそれぞれに伝える必要があるのです。

投稿2021/01/07 04:48

A_kirisaki

総合スコア2853

lemonediscream

2021/01/07 05:23

ご回答ありがとうございます。このコードではコールバック関数というのは、callbackFn1とcallbackFn2 であってますでしょうか？ var callbackFn1とあったので、変数かと思ったのですが…

A_kirisaki

2021/01/07 05:52

JavaScript において関数と普通の値の間に違いはありません。呼び出せるか出せないかくらいです。変数へ値を代入するように、関数も代入することが出来ます。関数を呼び出す際に値を渡すことができるように関数を渡すことも出来ます。

lemonediscream

2021/01/07 06:14

勉強不足でした。ありがとうございます。また、 element.ondragover = callbackFn1 ; element.ondrop = callbackFn2 ; の部分がわからないのですが、代入しているようにみえるのですが、 callbackFn1,callbackFn2の関数を代入して、callbackFn1,callbackFn2の関数を呼び出してるのでしょうか？以下は試しました。 element.ondragover = callbackFn1 ;をコメントアウト⇒画像をドラッグするとドロップできるところが×の表示。 element.ondrop = callbackFn2 ;をコメントアウト⇒画像をドラッグするとドロップできるところが×の表示はでないが、ドロップしても変化なし

A_kirisaki

2021/01/07 06:28

element.ondragover、element.ondrop というのは「イベントハンドラー」と呼ばれるプロパティで、そこに代入されている関数がイベント発生時に実行されます。ですが例のように直接代入してしまうと一つの関数しか呼び出すことができなくなってしまうので最近は addEventListener という関数を使って関数を「登録」することが多いです。詳しくはこちらをご覧ください。イベントへの入門 - ウェブ開発を学ぶ | MDN https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events

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