真实和生成的Enter键在可编辑div上的行为不同

Question

我需要使用Enter键将新行替换为Ctrl + Enter来更改可编辑div行为。我尝试通过在用户按下Ctrl + Enter时模拟Enter Keyboard事件来做到这一点。它没有用，我也不明白为什么，这个“为什么”是我的主要问题。

示例：https://jsfiddle.net/ParadoxMaster/nxjcr7gL/

let editDiv = document.getElementById("edit_div");
let ctrlEnter = false;
editDiv.addEventListener("keydown", function(e) {

  if (e.keyCode == 13 && e.ctrlKey) {

    console.log("Ctrl + Enter");
    ctrlEnter = true;
    let simulatedEnterDown = new KeyboardEvent("keydown", {
      "charCode": e.charCode,
      "bubbles": e.bubbles,
      "cancelable": e.cancelable,
      "composed": e.composed,
      "code": e.code,
      "key": e.key,
      "keyCode": e.keyCode,
      "location": e.location,
      "which": e.which,
      "sourceCapabilities": e.sourceCapabilities,
      "view": e.view
    });
    this.dispatchEvent(simulatedEnterDown);

  } else if (e.keyCode == 13) {

    if (!ctrlEnter) {

      console.log("Just enter down");
      e.preventDefault();

    } else {

      console.log("Fake enter down");
      ctrlEnter = false;

    }

  }
});

div#edit_div {
  background-color: lightskyblue;
  width: 100px;
  height: 30px;
}

<div id="edit_div" contenteditable="true"></div>

如果使用PreventDefault调用删除该行，则实际事件和生成的事件将相同，但是行为不同。为什么会发生这种情况以及需要做什么才能使该方法起作用？

P.S。我看到了有人建议为新行手动添加包装器的答案，但是我对带有事件的此选项很感兴趣。