Question

我正在使用找到的代码，其中使用了“事件”。它可以工作，但是我想知道应该用什么代替。

我是一名新手程序员，但我缺少一些概念。在这种情况下，我使用的是我在网上找到的代码，该代码可以在下一个链接中找到： https://codepen.io/galulex/pen/eNZRVq

PhpStorm向我显示不赞成onmousemove =“ zoom（event）”上的“事件”。我曾尝试删除它，但这种方式无法正常工作。我想知道应该使用什么代替事件。

<figure class="zoom" onmousemove="zoom(event)" style="background-image: url(//res.cloudinary.com/active-bridge/image/upload/slide1.jpg)">
  <img src="//res.cloudinary.com/active-bridge/image/upload/slide1.jpg" />
</figure>

function zoom(e){
  var zoomer = e.currentTarget;
  e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX
  e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX
  x = offsetX/zoomer.offsetWidth*100
  y = offsetY/zoomer.offsetHeight*100
  zoomer.style.backgroundPosition = x + '% ' + y + '%';
}

Answer 1

是的，“全局” event变量从未得到广泛的标准化，而是由Microsoft发明，然后被许多流行的用户代理所采用。 It is described by WHATWG to be to the event currently being processed，并附带注释：

强烈建议Web开发人员改而依赖传递给事件侦听器的Event对象，因为这将导致更多的可移植代码。此属性在worker或worklet中不可用，并且对于shadow trees中分派的事件不正确。

您的用例所属的大类问题的惯用解决方案是在元素（或其上升点，可能更好）上使用addEventListener函数来附加事件侦听器。事件侦听器将收到正确的事件作为唯一的参数。

您需要一种方法来标识您的figure元素，因为它没有id。例如，我将使用document.querySelector("figure")：

document.querySelector("figure").addEventListener("mousemove", zoom);

基本上就是这些，因为您的zoom函数已经定义为可以使用单个参数作为实际的鼠标移动事件，因此将事件侦听器传递给addEventListener时，它就很好了。

Answer 2

我有同样的问题。我发现这个code就像过去的事件一样对我有用。

function hide(e){
  e.currentTarget.style.visibility = 'hidden';
  console.log(e.currentTarget);
  // When this function is used as an event handler: this === e.currentTarget
}

var ps = document.getElementsByTagName('p');

for(var i = 0; i < ps.length; i++){    
  // Console: print the clicked <p> element 
  ps[i].addEventListener('click', hide, false);
}
// Console: print <body>
document.body.addEventListener('click', hide, false);

// Click around and make paragraphs disappear

不赞成使用“事件”，应该使用什么代替？

2 个答案: