为何绑定到sentid1的JavaScript onkeypress事件无法正常工作？

嘿，我来帮你拆解这个问题～

首先，你当前写的$('#sentid1').onkeypress = function(...)其实是个“巧合生效”的写法——因为$('#sentid1')返回的是jQuery包装后的对象，而onkeypress是原生DOM元素的专属属性，直接给jQuery对象赋值这个属性理论上是不会生效的。你之所以能看到效果，大概率是你在实际代码里不小心取到了jQuery对象对应的原生DOM元素（比如写成了$('#sentid1')[0].onkeypress），或者浏览器的某种兼容行为帮你“补全”了这一步。

正确的两种实现方式 #

1. 原生JS写法（你当前生效的本质）

直接获取原生DOM元素，赋值onkeypress属性：

if (1 === 1) {
  document.getElementById('sentid1').onkeypress = function(event) {
    alert("theid: " + this.id);
  };
}

2. 标准jQuery写法

如果你想用jQuery的方式绑定事件，应该用.on()方法，这是jQuery推荐的事件绑定方式：

if (1 === 1) {
  $('#sentid1').on('keypress', function(event) {
    alert("theid: " + $(this).attr('id'));
  });
}

额外注意点：contenteditable的事件特性 #

因为你的输入容器是contenteditable="true"的div，里面的span是可编辑的子元素，有时候光标切换到其他span时，事件不会触发到sentid1，这是正常的——如果你想监听整个div内的输入事件，也可以把事件绑定到父容器#textarea上，通过事件委托来处理：

$('#textarea').on('keypress', '.sentence', function(event) {
  alert("theid: " + this.id);
});

这样不管你在哪个.sentence类的span里输入，都会触发对应的alert，还能避免给每个span单独绑定事件的麻烦。

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