のaddEventListener

Question

私は、グリッド内の要素内の背景画像にいくつかのマウスの移動を追加しようとしている -

これが私のHTMLで、その繰り返し複数回：

<div class="pure-u-1-3 grid-item" > 
          <div class="bg-img" style="background:url('images/blog/network.png'"></div> 
          <div class="blogInner" > 
           <p>SOME TEXT</p> 
           <a href="" class="lnk-a">Read More</a> 
          </div> 

         </div> 

次のコード動作します - しかし、すべての要素に移動 - 次のようにそれだけでホバーアイテムで実行されていることを私は上記のコードRSOを作るしようとしてい

const bg = document.querySelector('.bg-img'); 
const bgIn = document.querySelector('.blogInner'); 
const windowWidth = window.innerWidth/5; 
const windowHeight = window.innerHeight/5 ; 

bgIn.addEventListener('mousemove', (e) => { 
    const mouseX = e.clientX/windowWidth; 
    const mouseY = e.clientY/windowHeight; 

    bg.style.transform = `translate3d(-${mouseX}%, -${mouseY}%, 0)`; 
}); 

を -

$('.grid-item').mouseover(function(event) { 

const thisitem = $(event.currentTarget); 
const bg = $(event.currentTarget).find('.bg-img'); 
const bgIn = $(event.currentTarget).find('.blogInner'); 


const windowWidth = window.innerWidth/5; 
const windowHeight = window.innerHeight/5 ; 

bgIn.addEventListener('mousemove', (e) => { 
    const mouseX = e.clientX/windowWidth; 
    const mouseY = e.clientY/windowHeight; 

    bg.style.transform = `translate3d(-${mouseX}%, -${mouseY}%, 0)`; 
}); 

}）;ホバー上

私はエラーを取得： bgIn.removeEventListenerがされていない機能 私は完全に困惑 - ホバー機能oustide同じコードが正常に動作として - 間違って下さい行くいただきました！誰も私を理解するのに役立ちますか？

Answer 1

jqueryイベントを使用している場合は、ネイティブjsとjqueryを混合するのではなく、機能するはずです。

bgIn.mousemove((e) => { 
    const mouseX = e.clientX/windowWidth; 
    const mouseY = e.clientY/windowHeight; 

    bg.css({transform: `translate3d(-${mouseX}%, -${mouseY}%, 0)`}); 
});