2017-08-11 6 views
-1

は、ここで私が試したものだと、何らかの理由でイベントリスナーが呼び出され取得されていません。私はevtパラメータの種類は、addEventListenerをに渡すことを疑っていラムダとjavascript forEachループを結合するにはどうすればいいですか?

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body>Some sample text inside body 
    <div id="log"></div> 
    <script> 
     var clipboardEventsHandler = ['beforecut', 'cut', 'beforecopy', 'copy', 'paste'].forEach((evt) => { 
      document.addEventListener(evt, (e) => { 
       log.innerHTML += ("-" + e.type + "-"); 
       log.innerHTML += (document.queryCommandSupported(e.type) ? "-" + e.type + " supported-" : "-" + e.type + " **not** supported-"); 
       log.innerHTML += (document.queryCommandEnabled(e.type) ? "-" + e.type + " enabled-" : "-" + e.type + " **not** enabled-"); 
       log.innerHTML += (document.queryCommandState(e.type) ? "-" + e.type " state:true-" : "-" + e.type + " state:false/null-"); 
       log.innerHTML += "<br>" 
      }) 
     }); 
    </script> 
</body> 
</html> 

。私はその文字列をaddEventListenerに渡す前にtypeof evtを記録して確認しました。そしてそれはそのstringと言います。しかし、テキストの一部をbodyの中にコピーしても、イベントリスナーは呼び出されません。誰かが私が間違っていることを教えてもらえますか?

+3

あなたはそれを認識しています'e.type 'の状態:true-" ' – adeneo

+0

それ以外の場合、それはうまくいくようです - > https://jsfiddle.net/xc9rovk4/ .....これはタイプミスです! – adeneo

+0

イベントは、その構文の問題が修正されたときに発生します。コンソールでエラーがないか常にチェックしてください:) – jackarms

答えて

1

初段あなたは構文エラーだった - ここ+を逃す:

e.type) ? "-" + e.type " state:true-" 
         ^---- 

セカンドを - それは彼らのIDで直接document.getElementByIdを使用していないのより良いアクセス要素です:

document.getElementById('log') 

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body>Some sample text inside body 
 
    <div id="log"></div> 
 
    <script> 
 
     var log = document.getElementById('log'); 
 
     var clipboardEventsHandler = ['beforecut', 'cut', 'beforecopy', 'copy', 'paste'].forEach((evt) => { 
 
      document.addEventListener(evt, (e) => { 
 
       log.innerHTML += ("-" + e.type + "-"); 
 
       log.innerHTML += (document.queryCommandSupported(e.type) ? "-" + e.type + " supported-" : "-" + e.type + " **not** supported-"); 
 
       log.innerHTML += (document.queryCommandEnabled(e.type) ? "-" + e.type + " enabled-" : "-" + e.type + " **not** enabled-"); 
 
       log.innerHTML += (document.queryCommandState(e.type) ? "-" + e.type + " state:true-" : "-" + e.type + " state:false/null-"); 
 
       log.innerHTML += "<br>" 
 
      }) 
 
     }); 
 
    </script> 
 
</body> 
 
</html>

関連する問題