【JavaScript教程】イベント——フォームイベント

7386 ワード

webフロントエンド開発先端 js。

1、フォームイベントの種類

1.1、input事件inputイベント、

</code>         。     （<code><input type="checkbox"/></code>）    （<code><input type="radio"/></code>），       ，        。  ，    <code>contenteditable</code>     ，       ，    <code>input</code>  。</p> 
  <p><code>input</code>       ，       ，           ，      <code>input</code>  。</p> 
  <p><code>input</code>       <code>InputEvent</code>  。</p> 
  <p>    <code>change</code>    ，      <code>input</code>                ， <code>change</code>          ，             。    ，       ，<code>input</code>       ， <code>change</code>             。</p> 
  <p>   <code><select/></code>     。</p> 
  <pre><code>/* HTML     
<select id="mySelect">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
*/
function inputHandler(e) {
  console.log(e.target.value)
}
var mySelect = document.querySelector('#mySelect');
mySelect.addEventListener('input', inputHandler);</code>
</code></pre> 
  <p>     ，        ，   <code>input</code>  ，        <code>inputHandler</code>。</p> 
  <h3><strong>1.2、select   </strong></h3> 
  <p><code>select</code>    <code><input/></code>、<code><textarea/></code>         。</p> 
  <pre><code>// HTML     
// <input id="test" type="text" value="Select me!"/>

var elem = document.getElementById('test');
elem.addEventListener('select', function (e) {
  console.log(e.type); // "select"
}, false);</code>
</code></pre> 
  <p>         <code>event.target</code>   <code>selectionDirection</code>、<code>selectionEnd</code>、<code>selectionStart</code> <code>value</code>    。</p> 
  <h3><strong>1.3、change   </strong></h3> 
  <p><code>change</code>   <code><input/></code>、<code><select/></code>、<code><textarea/></code>         。  <code>input</code>       ，        ，              ，    <code>input</code>      <code>change</code>  。    ，        。</p> 
  <ul> 
   <li> <p>     （radio）    （checkbox）   。</p> </li> 
   <li> <p>       。  ，     （select）    ，             。</p> </li> 
   <li> <p>     <code><textarea/></code>        ，         。          web       ：659  479   860        。</p> </li> 
  </ul> 
  <p>       。</p> 
  <pre><code>// HTML     
// <select size="1" onchange="changeEventHandler(event);">
//   <option>chocolate</option>
//   <option>strawberry</option>
//   <option>vanilla</option>
// </select>

function changeEventHandler(event) {
  console.log(event.target.value);
}</code>
</code></pre> 
  <p>        <code>input</code>     ，      <code><select/></code>    ，<code>input</code> <code>change</code>        。</p> 
  <h3><strong>1.4、invalid   </strong></h3> 
  <p>       ，               ，    <code>invalid</code>  。</p> 
  <pre><code><form>
  <input type="text" required="" oninvalid="console.log('invalid input')"/>
  <button type="submit">  </button>
</form></code>
</code></pre> 
  <p>     ，       。    ，         ，        <code>invalid</code>  ，       。</p> 
  <h3><strong>1.5、reset   ，submit   </strong></h3> 
  <p>            <code><form/></code> ，            。</p> 
  <p><code>reset</code>       （           ）   。</p> 
  <p><code>submit</code>                。  ，<code>submit</code>        <code><form/></code>  ，   <code><button/></code>  ，        ，     。</p> 
  <h2><strong>2、InputEvent   </strong></h2> 
  <p><code>InputEvent</code>        <code>input</code>     。      <code>Event</code>  ，                  。</p> 
  <p>       <code>InputEvent()</code>    ，        。</p> 
  <pre><code>new InputEvent(type, options)</code>
</code></pre> 
  <p><code>InputEvent</code>            。         ，      ，       。            ，           ，       。         <code>Event</code>         ，          ，         。</p> 
  <ul> 
   <li> <p><code>inputType</code>：   ，         （    ）。</p> </li> 
   <li> <p><code>data</code>：   ，        。          （      ），   <code>null</code>     。</p> </li> 
   <li> <p><code>dataTransfer</code>：     DataTransfer     ，                    。</p> </li> 
  </ul> 
  <p><code>InputEvent</code>               ，            。</p> 
  <p>（1）InputEvent.data</p> 
  <p><code>InputEvent.data</code>         ，       。</p> 
  <pre><code>// HTML     
// <input type="text" id="myInput"/>
var input = document.getElementById('myInput');
input.addEventListener('input', myFunction, false);

function myFunction(e) {
  console.log(e.data);
}</code>
</code></pre> 
  <p>     ，            <code>abc</code>，       <code>a</code>，       <code>b</code>，       <code>c</code>。    <code>abc</code>，        ，      <code>null</code>       。</p> 
  <p>（2）InputEvent.inputType</p> 
  <p><code>InputEvent.inputType</code>         ，            。</p> 
  <p>      ，Chrome          。          。</p> 
  <ul> 
   <li> <p>      ：<code>insertText</code></p> </li> 
   <li> <p>      ：<code>insertFromPaste</code></p> </li> 
   <li> <p>    ：<code>deleteContentBackward</code></p> </li> 
   <li> <p>    ：<code>deleteContentForward</code></p> </li> 
  </ul> 
  <p>（3）InputEvent.dataTransfer</p> 
  <p><code>InputEvent.dataTransfer</code>       DataTransfer   。              （insertFromPaste）     （<code>insertFromDrop</code>）    。</p> 
 </div> 
</div>
                            </div>
                        </div>

JavaScriptオブジェクトおよび操作