JavaScript中的節點

我正在學習JavaScript，我有一個問題給你們。問題在於，我試圖圍繞一些事件處理程序進行討論，但是在這樣做的時候，我意識到有些事情我不瞭解節點。JavaScript中的節點

我有this code當我使用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; 
});

但this code不工作：

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中完成我的任務。

來源

2014-10-27 ljnissen

當不使用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; 
};

來源

2014-10-27 17:27:25 techfoobar

或更好的'addEventListener（）'。 – Sirko 2014-10-27 17:28:34

是'addEventListener（）'是推薦的方法。我剛剛發佈了一個最小改變修復。 – techfoobar 2014-10-27 17:29:17

真的那麼簡單嗎？無論如何，謝謝你們！ – ljnissen 2014-10-27 17:30:49

功能canvas.mousemove()是jQuery的，你必須使用非jQuery的等價canvas.onmousemove = function(e){}或canvas.addEventListener("mousemove", function(e){}, useCapture);。 useCapture值將替換處理程序的返回值，並確定事件是否繼續「冒泡」。

來源

2014-10-27 17:30:22 Lochemage

。謝謝！ – ljnissen 2014-10-27 17:34:31

JavaScript中的節點

回答

相關問題