JavaScript中这个jQuery,如果用JavaScript写,怎么写?

不要建议我问这个简单的问题哈,我自己在网上学的,也没人问,也没经验什么的,你帮我解答了,我对着自己慢慢查,我就了解了,谢谢了!
我会做一个div 元素的 mouseover 事件,这种整个页面的,我就不会了.

<script>
    $(document).ready(function() {
        $(document).mousemove(function(event) { 
            $("span").text("X: " + event.pageX + ", Y: " + event.pageY); 
        });
    });
</script>
<body>

    <p>The mouse pointer position is at: <span></span></p>

</body>

帮题主调了一下缩进，不然看着好蛋疼。。。
题主说的用 JavaScript 写应该意思是原生 JS 吧，其中用到的几个方法:

获取节点 - getElementById getElementsByClassName getElementsByTagName querySelector 等
监听事件 - addEventListener
dom 加载完毕 - readystatechange 或者 DOMContentLoaded
获取坐标 - 鼠标事件的事件对象
修改节点文本 - textContent

题主可以先自己尝试一下。

<script>
    window.onload = function() {
        document.onmousemove = function(event) {
            var spa = document.getElementsByTagName('span')[0];
            var text = "X: " + event.pageX + ", Y: " + event.pageY;
            spa.innerHTML = text;
        }
    }
<script>

<script>
    var ready = (function () {
            var readyState = false;
            return function (callback) {
                if (readyState) {
                    callback();
                }
                if (window.addEventListener) {
                    window.addEventListener('DOMContentLoaded', function () {
                        readyState = true;
                        callback();
                    }, false);
                } else {
                    var complete = function () {
                        if (document.readystate == 'interactive' || document.readystate == 'complete') {
                            readyState = true;
                            callback();
                            clearInterval(timer)
                        }
                    };
                    var timer = setInterval(function () {
                        try {
                            document.documentElement.doScroll('left');
                            clearInterval(timer);
                            readyState = true;
                            document.detach('readystatechange', complete);
                            callback();
                        }
                        catch (ex) {
                        }
                    }, 50);
                    document.attachEvent('readystatechange', complete);
                }
            }
        })();
        ready(function () {
            // 获取span没有必要放到onmousemove里面.如果放到里面每次触发鼠标事件都会获取元素,完全没有那个必要,只获取一次即可.
            var spa = document.getElementsByTagName('span')[0];
            document.onmousemove = function(event) {
                spa.innerHTML = "X: " + event.pageX + ", Y: " + event.pageY;
            }
        })
<script>

<script>
    window.onload = function() {
        document.onmousemove = function(event) {
            var spanEl = document.getElementsByTagName('span')[0];
            var text = "X: " + event.pageX + ", Y: " + event.pageY;
            spanEl.innerHTML = text;
        }
    }
<script>

【热门文章】