Question

我想访问函数中的调用元素，例如：

// Script
<script type="text/javascript">

window.onload = function() {
   var field = document.getElementById("myfield");
   field.onkeyup = change(field);
   function change(x) {
      if (x.value == "") {
          x.value = "No value";
      }
   }
}

</script>


// Body
<input id="myfield" type="text">

这不起作用。而且我不想为每个元素提供onkeyup方法，我想以编程方式注册它们。任何解决方案？

Answer 1

问题是你要将函数返回值赋给field.onkeyup，而它需要是一个函数：

field.onkeyup = function(){
    change(field);
}

var field = document.getElementById("myfield");
field.onkeyup = function(){
  change(field);
}
function change(x) {
  if (x.value == "") {
    x.value = "No value";
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input id="myfield" type="text">

但是，对于相同的功能（虽然我知道你想学习如何在JS中绑定事件），我建议只使用这样的占位符属性：

<input id="myfield" type="text" placeholder="No value" />

<input id="myfield" type="text" placeholder="No value" />

就是这样，不需要JS，它的表现要好得多。

Answer 2

要访问触发事件的元素，您可以执行此操作

element.onkeyup = function(e){
  var targetElement = e.target;
}

Answer 3

值仅用于输入。

＆＃13;

var diva = document.getElementById("mydiva");
diva.onkeyup = change(diva);
function change(x) {
   if (x.value === "") {
       x.value = "No value";
   }
}

//different
var element = document.getElementById('element');
element.onkeyup = function(){
  if(element.value==="") element.value='sfdfgfd';
};

var divb = document.getElementById("mydivb");
if(divb.innerHTML===''){
    divb.innerHTML='No content';
}

var divc = document.getElementById("mydivc");
divc.onkeyup = dchange(divc);
function dchange(y) {
  if(y.innerHTML===''){
    y.innerHTML='No contenible';
  }
}

＆＃13;

<input id="element" type="text"><hr>
<input id="mydiva" type="text">
<div id="mydivb"></div>
<div id="mydivc" contentEditable="true"></div>

＆＃13;

在JavaScript中引用调用者元素

3 个答案: