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

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方法中，然后它将调用body的onload或仅将其放在所有控件下面的脚本部分中，而无需将其放在函数中，文档准备就绪时调用，例如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");}

赞扬Adil击败我并提供jsfiddle链接:)

更新：没关系，因为您刚刚更新了自己的信息