需event参数的事件处理函数调用及clipboardData报错解决

背景 #

• 需求场景：需要在文本粘贴到textarea元素时触发处理逻辑，遍历粘贴文本将Unicode编码为8217的Outlook格式右单引号替换为普通单引号，避免带特殊字符的内容无法保存
• 代码优化：该逻辑需要在项目8个不同页面使用，因此将处理函数抽离到所有页面全局引入的公共JS文件中，提升复用性，方便后续新场景快速调用

初始实现 #

页面事件绑定代码 #

<script>
    var instructions = document.getElementById("specialInstructions");
    instructions.addEventListener("paste", pasteToPlainText);
</script>

公共JS处理函数 #

function pasteToPlainText(event){
    var plainText;
    var replaceList;
    replaceList = new Array();
    
    // 将粘贴内容转为纯文本
    if (event.clipboardData && event.clipboardData.getData){
        plainText = event.currentTarget.clipboardData.getData('text/plain');
    }else if (window.clipboardData){
        plainText = event.currentTarget.clipboardData.getData('text/plain');
    }
    
    for (var index = 0; index < plainText.length; index++){
        var rightApostropheCheck = plainText.charCodeAt(index);
        // 右单引号Unicode为8217，常见于Outlook邮件内容
        // 不做转换的话页面会显示特殊右单引号，导致备注无法保存
        if (rightApostropheCheck == 8217){
            // 替换为普通单引号
            replaceList.push("'");
        }else{
            // 其余正常字符直接存入待插入列表
            replaceList.push(plainText[index]);
        }
    }
    event.preventDefault();

    if (event.clipboardData) {
        content = replaceList.join("");
        document.execCommand('insertText', false, content);
    }else if (window.clipboardData) {
        content = replaceList.join("");
        document.selection.createRange().pasteHTML(content);
    }   
}

报错现象 #

代码运行后在第一个if判断位置抛出错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'clipboardData')

问题原因 #

页面加载阶段函数被无参调用，没有传入事件对象event，导致读取event.clipboardData属性时触发undefined类型错误。

修复方法 #

绑定事件监听时使用bind语句绑定正确的上下文，避免函数提前触发，修正后的绑定代码如下：

<script>
    var terms = document.getElementById("Terms");    
    terms.addEventListener("paste", pasteToPlainText.bind(terms));
</script>

内容的提问来源于stack exchange，提问作者mefcis