event | web

# event

# e.target e.currentTarget

e.target：一个触发事件的对象的引用，当事件处理程序在事件的冒泡或捕获阶段被调用时。指向触发事件监听的对象。
e.currentTarget：它指的是当事件遍历DOM时，标识事件的当前目标,它总是引用事件处理程序附加到的元素.

<!DOCTYPE html>
<html>
	<body>
		<div id='k1'>22
			<div id='b1'>11111</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	let b1 =document.getElementById('k1')
	b1.onclick =function (e){
		console.log(e.target)
		// 当点击在22上指向k1，点击11111上指向b1
		console.warn(e.currentTarget)
		// 一直都执行id=k1的div
	}
</script>

# event.nativeEvent.isComposing

在Web开发中，特别是在处理React或原生JavaScript事件时，event.nativeEvent.isComposing 是一个属性，它用于指示当前是否正在进行文本组合（比如，在移动设备上的中文、日文或其他需要复杂输入法的语言输入时）。

文本组合（composing）通常发生在用户通过输入法（IME，Input Method Editor）输入字符时，这些输入法可能需要多个按键操作才能完成一个字符的输入。例如，在中文拼音输入法中，用户可能需要输入一串拼音，然后从候选词中选择一个汉字，这个过程中isComposing属性会被设置为true，直到用户完成选择并确认输入。

在React事件处理函数中，当你监听输入框（如<input>、<textarea>或内容可编辑的<div>等）的onChange、onInput或onCompositionStart/onCompositionEnd等事件时，可以通过event.nativeEvent.isComposing来判断当前是否处于文本组合状态。

onCompositionStart 事件在文本组合开始时触发。 onCompositionEnd 事件在文本组合结束时触发。在这两个事件之间，event.nativeEvent.isComposing 会是 true。了解这个属性对于优化用户体验非常重要，因为它可以帮助开发者避免在用户还在组合文本时就进行不必要的处理（如发送请求、更新状态等），从而避免可能的性能问题和用户输入的中断。

例如，你可能会在用户完成文本输入后才更新UI或发送数据，而不是在用户还在通过输入法选择字符时就进行这些操作。这可以通过监听onCompositionEnd事件或在每次处理输入事件时检查event.nativeEvent.isComposing属性来实现。

import React, { useState } from 'react';

function ComposingTextInput() {
  const [text, setText] = useState('');
  const [isComposing, setIsComposing] = useState(false);

  const handleChange = (event) => {
    const { nativeEvent } = event;
    const composing = nativeEvent.isComposing;

    if (!composing) {
      // 如果不是在组合文本，则更新输入框的文本
      setText(event.target.value);
    }

    // 打印当前是否正在组合文本和输入框的文本
    console.log(`isComposing: ${composing}, text: ${event.target.value}`);
  };

  const handleCompositionStart = () => {
    setIsComposing(true);
    console.log('Composition started');
  };

  const handleCompositionEnd = () => {
    setIsComposing(false);
    console.log('Composition ended');
  };

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={handleChange}
        onCompositionStart={handleCompositionStart}
        onCompositionEnd={handleCompositionEnd}
        placeholder="Type something..."
      />
      <p>Current text: {text}</p>
      <p>Is composing: {isComposing ? 'Yes' : 'No'}</p>
    </div>
  );
}

export default ComposingTextInput;

# event.clipbooardData.setData

在Web开发中，event.clipboardData.setData 是一个常用于处理剪贴板操作的方法。这个方法允许你向剪贴板写入数据，通常是在用户执行复制（copy）或剪切（cut）操作时触发的事件处理程序中使用的。

基本用法 event.clipboardData.setData(format, data) 方法接受两个参数：

format：一个字符串，指定要写入剪贴板的数据的格式。常见的格式包括 'text/plain'（纯文本）、'text/html'（HTML文本）等。 data：一个字符串，包含要写入剪贴板的数据。

document.addEventListener('copy', function(event) {
  // 阻止默认的复制行为
  event.preventDefault();

  // 设置要复制到剪贴板的文本
  const textToCopy = '这是要复制的文本';

  // 将文本写入剪贴板
  event.clipboardData.setData('text/plain', textToCopy);

  // 你可以在这里添加额外的逻辑，比如更新UI来反映复制操作的成功
  console.log('文本已复制到剪贴板');
});

← 性能优化总结函数 →