事件

小驼峰格式书写
onClick, onChange, onSubmit ...

1. 受控组件事件属性

      <input name="your-input" value={inputVal} onChange={(e)=>{console.log('your-input-event-keys', e)}}>

      // log 

      ![受控组件事件](./controlled-event.png)

2. 非受控组件事件属性(ref.current)

3. Event
   

    //log

      [
        ...childrens,
        "__reactInternalInstance$yztxbii4px",
        "__reactEventHandlers$yztxbii4px",
        "_wrapperState"
      ]
      + 原生HTMLElement

事件类型

• 鼠标事件 (DragEvent)
  
  • 事件对象 e extends UIEvent , 以及以下属性

-- 其他属性

• • relatedTarget
    

 // html
<div> 
    <div id="r" style="background-color: lightcoral ; width:200px ; height: 200px;">  </div>  
    <div id="b" style="background-color: lightblue ; width:200px ; height: 200px">  </div>  
</div>

// js
const re = document.querySelector('#r')
const be = document.querySelector('#b')
re.addEventListener('mouseover', (e)=>{
    console.log('re-mouseover', e.relatedTarget )
})
be.addEventListener('mouseover', (e)=>{
    console.log('be-mouseover', e.relatedTarget )
})

• onClick
  

<button onClick={(e)=>{...}}></button>

• onDoubleClick
  

<button onDoubleClick={(e)=>{...}}></button>

• 键盘事件
  

  -- 事件对象 e extends UIEvent , 以及以下属性

-- 其他属性

// location
<a id="location"></a>

// windows系统

<textarea onKeyDown={onKeyDown}></textarea>

...
const onKeyDown = (e)=>{
console.log( e.location )
// 按下键盘左半部分的上侧的 x等1等键 => 0  按下键盘左半部分的最左侧ctrl等 键 => 1  按下键盘左半部分的最右侧 ctrl 等键 => 2  按下键盘右边的数字小键盘 => 3
}

• 焦点事件 (FocusEvent)
  

  -- 事件对象 e extends UIEvent , 以及以下属性

 -- 其他属性

-- 滚轮事件 (WheelEvent)

-- 事件对象 e extends UIEvent , 以及以下属性

-- 事件对象 e extends MouseEvent , 以及以下属性

-- 其他属性

• 指针事件(PointerEvent)
  

  -- 事件对象 e extends UIEvent , 以及以下属性

-- 事件对象 e extends MouseEvent , 以及以下属性

-- 其他属性

• 触摸事件(TouchEvent)
  

  -- 事件对象 e extends UIEvent , 以及以下属性

-- 其他属性

• 过渡事件(TransitionEvent)
  

  -- 事件对象 e extends UIEvent , 以及以下属性

  -- 其他属性

• 动画事件(AnimationsEvent)
  

  -- 其他属性

• onAnimationStart
  

            //css
            {
              .ball {
                border-radius: 25px;
                width: 50px;
                height: 50px;
                background: #c00;
                position: absolute;
                top: 0;
                left: 0;
                transition: transform 0.5s;
              }
              @keyframes mymove {
                from {top: 0px;}
                to {top: 200px;}
              }
            }
  
            // component
            ...
            const YourComponent = ()=>{
  
              let ballRef = useRef()
  
              const onMoveBall=(ev)=>{
                ballRef.current.style.animation += 'mymove 3s 3';
              }
  
              const onAnimationStart=(ev)=>{
                console.log('onAnimationStart', ev)
              }
              ...
              
  
                
  
              
              ...
            }
  

  • 剪贴板相关事件(ClipboardEvent)
    

  Clipboard Api

  -- 其他属性

-- clipboardData:DataTransfer

• 输入事件(InputEvent)
  

  • 其他属性

• 输入法编辑器事件(CompositionEvent)
  

  • 其他属性

    ```javascript
             // // log
             react事件属性

            // bubbles:true
            // cancelable:true
            // currentTarget:null
            // data:"" //输入的内容
            // defaultPrevented:false
            // dispatchConfig: Object
            // eventPhase:0
            // isDefaultPrevented:functionThatReturnsFalse()
            // isPropagationStopped:functionThatReturnsFalse()
            // isTrusted:true
            // nativeEvent:原生 Event 类型
            // target:input#test-q
            // timeStamp:540212.0999999999
            // type:"compositionstart"
            // _dispatchInstances: FiberNode 
            // _dispatchListeners: function
            // _targetInst: FiberNode 
            // preventDefault:function
            // stopPropagation:function
            // ...
            原生属性 
            // isTrusted:true
            // bubbles:true
            // cancelBubble:false
            // cancelable:true
            // composed:true
            // currentTarget:null
            // data:"" //输入的内容
            // defaultPrevented:false
            // detail:0
            // eventPhase:0
            // returnValue:true
            // sourceCapabilities:InputDeviceCapabilities {firesTouchEvents: false}
            // srcElement:input#test-q
            // target:input#test-q
            // timeStamp:540212.0999999999
            // type:"compositionstart"
            // view:Window{...}
            // which:0
            // ...

    ```

- onCompositionStart
 
    ```html
            <input type="text" placeholder="疯" onCompositionStart={onCompositionStart} />
            const onCompositionStart =  (e)=>{
              console.log('composition-1', e)
            }
    ```

• DOM事件 (表单、对话框、详细信息展示、图片等、媒体元素)

  • DOM表单事件
    

    • onReset
      

    extends Event

    ...
    const onFormReset =(ev)=>{
        console.log('onFormReset', ev)
        // log : EV entends Event
    }
    ...
    <form onReset={onFormReset}>
        ...
        <button type="reset" >重置表单</button>
    </form>
    

    --- onSubmit
    
    extends Event

        //js
     const onFormSubmit =(e)=>{
         console.log('onFormSubmit', e)
         // log : EV entends Event
         e.preventDefault() // 阻止冒泡，组件更新重新渲染
         const formdata = new FormData(e.target)
         // 打印formdata  多选时: 打印多条 ['t-select', '1225'],  ['t-select', '1224']
         for(const d of formdata.entries()){
             console.log('formdata', d)
         }
     }

    ... 
        <form onSubmit={onFormSubmit}>
        ...
            <button type="submit" >提交表单</button>
        </form>
    

  • DOM对话框事件
    

    -- onCancel
    
    extends Event

    -- onClose
    
    extends Event

    <dialog ref={dialogRef} open={isOpenDialog} 
        onclose={(ev)=>{
        console.log('dialog-closed', ev)
    }}
    >
        <button onClick={()=>{
            dialogRef.current.close()
            isOpenDialogSet(false)
            ...
        }}><strong>关闭对话框</strong></button>
    
    </dialog>
    

  • DOM详细信息元素事件
    
    原生details元素

    • onToggle
      

    <details onToggle={(ev)=>{console.log('onToggle-details', ev)}}>
        <summary>历史概论</summary>
        历史概论：详细解析宋朝历史，宋徽宗的笔下历史，详细解析宋朝历史，宋徽宗的笔下历史详细解析宋朝历史，宋徽宗的笔下历史详细解析宋朝历史，宋徽宗的笔下历史
    </details>

  • DOM的部分元素事件 (img、svg image 、ifame 、object 、embed、link)
    

    • onLoad
      

    ...
    <img src="./img.png" alt="t-img" onLoad={(ev)=>{
        console.log('t-img-onLoad', ev, ev.timeStamp)
    }} />
    

  • DOM元素加载失败事件 (img、svg image 、ifame 、object 、embed、link、audio 、video)
    

    • onError
      

    ...
    <img src="https://path/to/open.jpg" alt="t-img" onError={(ev)=>{
        console.log('t-img-onError', ev, ev.timeStamp)
    }} />
    

  • DOM媒体元素事件 (audio 、video)
    

        <video controls src="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4" onLoadStart={(ev)=>{console.log('t-media-onLoadStart',  ev.timeStamp)}} onProgress={(ev)=>{console.log('t-media-onProgress',  ev.timeStamp)}} onCanPlay={(ev)=>{console.log('t-media-onCanPlay',  ev.timeStamp)}} onCanPlayThrough={(ev)=>{console.log('t-media-onCanPlayThrough', ev.timeStamp)}} onEnded={(ev)=>{console.log('t-media-onEnded', ev.timeStamp)}} />

    • onCanPlay
      

              ...
              <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" onCanPlay={(ev)=>{
                console.log('t-media-onCanPlay', ev, ev.timeStamp)
              }} />
    

    • HTMLMediaElement.duration
      

    . 以秒(s)为单位的媒体长度
    . 没有媒体数据 HTMLMediaElement.duration = 0
    . 有媒体数据，但长度未知 HTMLMediaElement.duration = NaN
    . 媒体流式传输并没有预定义长度 HTMLMediaElement.duration = Inf

           ...
              <video ref={videoRef}>...</video>
    
              ...
              console.log('videoRef-duration', videoRef.current.duration)

• 其他事件

• 触摸事件

• AnimationEvent

• 指定元素的事件 (

  ..