JavaScript中的节点

我正在学习JavaScript，我有一个问题要问你们。问题是，我正试图将我的头脑集中在一些事件处理程序上，但在这样做的同时，我逐渐意识到，关于节点，有一些东西我并不了解

当我使用jQuery时，我有一个很好的解决方案：

var canvas = $('#cvs');

canvas.mousemove(function(e){
     var pageCrds = '('+ e.pageX +', ' + e.pageY +')';

     var b = document.getElementById("first");
     b.firstChild.nodeValue = "(e.pageX, e.pageY) - "+ pageCrds;   
});

但不起作用：

var canvas = document.getElementById('cvs');

canvas.mousemove(function(e){
    var pageCrds = '('+ e.pageX +', ' + e.pageY +')';

    var b = document.getElementById("first");
    b.firstChild.nodeValue = "(e.pageX, e.pageY) - "+ pageCrds;   
});

我在这两种情况下使用的HTML是相同的：

 <canvas id="cvs" width="150" height="150"></canvas>
    <div id="first">Move mouse over canvas.</div>
       <p id="one"></p>    
       <p id="two"></p>

将鼠标移到画布上。

---

有人能解释一下为什么jQuery版本有效而不是纯JavaScript版本吗？显然，我希望能够在纯JavaScript和jQuery中完成我的任务。

如果不使用jQuery，您需要使用

onmousemove

canvas.onmousemove = function(e){
    var pageCrds = '('+ e.pageX +', ' + e.pageY +')';

    var b = document.getElementById("first");
    b.firstChild.nodeValue = "(e.pageX, e.pageY) - "+ pageCrds;   
};

---

不使用jQuery时，需要使用onmousemove

canvas.onmousemove = function(e){
    var pageCrds = '('+ e.pageX +', ' + e.pageY +')';

    var b = document.getElementById("first");
    b.firstChild.nodeValue = "(e.pageX, e.pageY) - "+ pageCrds;   
};

---

函数

canvas.mousemove（）

是jquery，必须使用非jquery等价的

canvas.onmousemove=function（e）{}

或

canvas.addEventListener（“mousemove”，function（e）{}，useCapture）。
useCapture
值替换处理程序的返回值并确定事件是否继续“冒泡”。
函数
canvas.mousemove（）
是jquery，必须使用非jquery等价的
canvas.onmousemove=function（e）{}
或
canvas.addEventListener（“move”，function（e）{}，使用捕获）。
useCapture
值替换处理程序的返回值，并确定事件是否继续“冒泡”。
或者更好的
addEventListener（）
。是的
addEventListener（）
将是推荐的方法。我刚刚发布了一个最小更改修复程序。jQuery选择器返回实际文档对象的外观，因此document.getElementById和$（…）不是相同的内容，或者更好的方法是
addEventListener（）
。是的
addEventListener（）
将是推荐的方法。我刚刚发布了一个最小更改修复程序。jQuery选择器返回实际文档对象的外观，因此document.getElementById和$（…）不是我所理解的相同内容。非常感谢。我理解。非常感谢。