Question

我有一个div：

<div id="test" style="width:auto; height:auto;">
</div>

一个功能：

 $(function() {
            $("#test").attr("contentEditable", "true");
            $("#test")
            .attr("tabindex", "0")
            .keydown(function(){ alert(1); return false; })
            .mousemove(function(){ alert(2); return false; });
    });

如何在不包含JQuery库的情况下在JavaScript中实现此代码？

Answer 1

你可以在javascript中这样做而不使用jquery，这里有Demo JsFiddle 你可以把它放在body的onload方法然后它会调用onload of body或者只是把它放在所有控件下面的脚本部分而不把它放在函数中然后它会在文件准备好时调用，如jquery方法$（）。ready（）;

var test = document.getElementById('test');
test.setAttribute("contentEditable", "true");
test.setAttribute("tabindex", "0");
test.onkeydown = function(event) { alert("KeyDown");}    
test.onmousemove = function(event) { alert("MouseMove");}

Answer 2

function runme() {
  var elm = document.getElementById("test");
  elm.contentEditable = "true";
  elm.tabIndex = 0;
  elm.onkeydown = function() { alert(1); return false; };
  elm.onmousemove = function() { alert(2); return false; };
}

if(window.addEventListener)
  window.addEventListener("load", runme, false);
else
  window.attachEvent("onload", runme);

Answer 3

Adil有正确的想法，但要稍微改进一下，你可以将元素存储在一个变量中，这样你就不必每次都调用它来获取元素。所以我会改变它看起来像这样：

var t = document.getElementById('test');

t.setAttribute("contentEditable", "true");
t.setAttribute("tabindex", "0");
t.onkeydown = function(event) { alert("KeyDown");}    
t.onmousemove = function(event) { alert("MouseMove");}

Upvoted Adil击败我并提供jsfiddle链接：）

更新：没关系，因为您刚刚更新了帖子

像在JQuery中一样在JavaScript中调用函数

3 个答案: