Question

我正在使用addeventlistener创建事件并动态添加删除类名。这是我的代码。我得到了第一个文本框的预期结果，但没有得到我错的下一个。

<html>  
  <style>
    .test5 {
      border: 1px solid #000;
      outline: none;
    }
  </style>  
  <body>
    <form id="form">
      <input type="text" id="ids" class="test1" value="test1">
      <div class="test7" id="test">test</div>
      <input type="text" id="ids" class="test1" value="test2">
    </form>      
    <script>
      function gettext() {
        var val = this.className += " test5";
        console.log(val);
      }
      function gettexts() {
        var val1 = document.getElementById('ids').classList.remove('test5');
      }
      var get = document.getElementsByClassName('test1');
      //for (i = 0; i < get.length; i++) {
        //get[i].addEventListener('focus', gettext, false);
        //get[i].addEventListener('blur', gettexts, false);
        get[0].addEventListener('focus', gettext, false);
        get[0].addEventListener('blur', gettexts, false);
      //}
    </script>
  </body>
<html>

Answer 1

您需要访问事件处理程序中的事件对象才能访问受影响的元素：

function gettext(event) {
  event.target.className += 'test5';
  console.log(event.target);
}

var get = document.getElementsByClassName('test1');
for (i = 0; i < get.length; i++) {
  get[i].addEventListener('focus', gettext, false);
}

同样通过使用事件委托，您不需要将事件处理程序分配给所有输入，而只需分配给共同的祖先（例如文档或周围的div）：

function gettext(event) {
  if (event.target && event.target.nodeName == 'INPUT') {
    event.target.className += 'test5';
    console.log(event.target);
  }
}

document.addEventListener('focus', gettext, true); // EDIT: Oops, the third parameter needs to true for this to work

编辑：工作示例：http://jsfiddle.net/88DnZ/

另外：如果您只想更改焦点上输入元素的样式，则无需使用JavaScript。只需使用CSS：

input:focus {
  border-color: red;
}

Answer 2

<script>
        function focus() {

            var val = this.className = "test5";
            console.log(val);
        }

        function blur() {
            this.className = "test1";
        }
        var get = document.getElementsByTagName('input');
        for (i = 0; i < get.length; i++) {
            get[i].addEventListener('focus', focus, false);
            get[i].addEventListener('blur', blur, false);

        }

    </script>
    <style>
    .test5
    {
        color:Red;
        }
    </style>

Answer 3

第一个建议：请使用jquery;

其次，在你进行somenthing之前，你必须等待页面加载事件;

第三，不要把代码放在体内......！;

如果我理解你的意思，那就是代码：

<html>
    <style>
      .test5{
        border: 1px solid #000;
        outline: none;
      }
    </style>
    <script>
     function gettext() {
        var val = this.className += " test5";
        console.log(val);
    }

    function gettexts() {
        var val1 = document.getElementById('ids').classList.remove('test5');
    }


    window.onload = function(){
            var get = document.getElementsByClassName('test1');
        //for (i = 0; i < get.length; i++) {
            //get[i].addEventListener('focus', gettext, false);
            //get[i].addEventListener('blur', gettexts, false);
            get[0].addEventListener('focus', gettext, false);
            get[0].addEventListener('blur', gettexts, false);
        //}
    }

    </script>
    <body>
    <form id="form">
      <input type="text" id="ids" class="test1" value="test1">
      <div class="test7" id="test">test</div>
      <input type="text" id="ids" class="test1" value="test2">
    </form>

    <script>


    </script>
    </body>
    <html>

这就是所有人！

Javascript与addeventlistener相同，适用于多个元素

3 个答案: