相同的JavaScript addeventlistener用于多个元素

Question

I am working with addeventlistener to create events and dynamically adding removing class name too. 我正在与addeventlistener一起创建事件并动态添加删除类名。 This is my code. 这是我的代码。 Am getting expected result for first text box but not the next where i am wrong. 我正在获得第一个文本框的预期结果，但不是我错误的下一个文本框。

<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

You need to access the event object inside your event handler to access the affected element: 您需要访问事件处理程序中的事件对象以访问受影响的元素：

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);
}

Also by using event delegation you don't need to assign the event handler to all inputs, but just to a common ancestor (eg the document or a surrounding div): 同样，通过使用事件委托，您无需将事件处理程序分配给所有输入，而只需分配给共同的祖先（例如文档或周围的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

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

Also: if you just want to change the style of an input element on focus, there is no need to use JavaScript. 另外：如果只想更改焦点上的输入元素的样式，则无需使用JavaScript。 Just use CSS: 只需使用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

First suggestion: please use jquery; 第一条建议：请使用jquery；

Second, before you do somenthing you must wait the page load event; 其次，在执行某些操作之前，您必须等待页面加载事件；

Third, do not put code inside body ... !; 第三，不要将代码放在体内。

If I understand what you whant this is the code: 如果我了解您的要求，则代码如下：

<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>

That's all folks! 那是所有人！

相同的JavaScript addeventlistener用于多个元素

问题描述

3 个解决方案

解决方案1
0 2013-05-13 13:18:25

解决方案2
-1 已采纳 2013-05-13 12:59:33

解决方案3
-3 2013-05-13 13:07:55

相同的JavaScript addeventlistener用于多个元素

问题描述

3 个解决方案

解决方案1 0 2013-05-13 13:18:25

解决方案2 -1 已采纳 2013-05-13 12:59:33

解决方案3 -3 2013-05-13 13:07:55

解决方案1
0 2013-05-13 13:18:25

解决方案2
-1 已采纳 2013-05-13 12:59:33

解决方案3
-3 2013-05-13 13:07:55