Question

由于某种原因，我需要使用本机JS而不是jQuery。我需要为动态添加元素添加一个事件。我用jQuery做了，但不能用原生JS。

这是我的jQuery代码

$('body').on('mouseenter', '.password_link', function(){
...
});

这是我尝试使用JS

document.querySelector('body').addEventListener('mouseenter', function(){
   var forgotPasslink = document.getElementsByClassname('password_link');
   if( e.target == forgotPasslink[0] ){
      ...
   }
});

但它不起作用。我试图谷歌但没有成功。

Answer 1

你必须使用mouseover，这应该可行

document.addEventListener('mouseover', function (e) {
    if (hasClass(e.target, 'password_link')) {

        //your code
    } else  {

        // your code
    }
}, false);

Answer 2

例如使用mouseover： -

＆＃13;

document.addEventListener('mouseover', function (e) {
    if ((e.target.className =='test')) {
      console.log("Got here");
    } else  {
      // do nothing.
    }
}, false);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="test">
  Sample Test 
  </div>

＆＃13;

Answer 3

这样做，

var item = document.getElementsByTagName("BODY")[0];
    item.addEventListener("mouseover", func, false);
    item.addEventListener("mouseout", func1, false);

    //mouse enter
    function func()
    {   var forgotPasslink = document.getElementsByClassname('password_link');
       if( e.target == forgotPasslink[0] ){
          //your code
       }
    }

    //mouse leave

    function func1()
    {  
    //your code
    }

Answer 4

好吧，如果你在静态内容上使用它，我的意思是，不是通过ajax加载的内容你可以使用这个：

    var elements = var x = document.getElementsByClassName("password_link");
    if(elements.length>0){
        for(var i =0; i< elements.length; i++){
            elements[i].addEventListener('mouseover', function(element){
                //And Here is where you magic Code goes!
            });
        }
    }

享受!!!

如何使用本机JS为动态添加的元素添加mouseenter事件

4 个答案: