Question

好的，所以我需要创建一个红色背景的div，然后注册＆＃34; Mouseleave＆＃34;然后将调用一个函数，该函数将显示以下文本＆＃34; MouseLeave事件已触发＆＃34;。我的目标是，当我将鼠标移动到我的div上然后将其移开时，我将收到一条警告，其中显示＆＃34; MouseLeave事件被触发＆＃34;。然后，当我再次单击我的div时，它将取消注册MouseLeave事件，当我将鼠标移到div上时，什么都不会发生。这是我到目前为止的代码：

＆＃13;

function attachEvent(myObject) {

     // to do - get state of listener 
     myObject.addEventListener("onmouseleave", function attachEvent(){}, false);
     alert("Mouse");

     // to do - if previously called addEventListener, then I now want to call removeEventListener
     myObject.removeEventListener("onmouseleave", function attachEvent(){}, false);
      
     // to do - if previously called removeEventListener, then I now want to call addEventListener 
     myObject.addEventListener("onmouseleave", function attachEvent(){}, false);
}

＆＃13;

div {background-color:red;padding:100px;max-width:25%;margin:auto}

＆＃13;

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>practice</title>
		<script src="scripts.js"></script>
	</head>
	<body>
		<script>
     		alert("Page loaded event fired");
		</script>
		<div id="cycle"; onclick="attachEvent(this)">
        <h2 style="text-align:center">Click to cycle event listener</h2>
		</div>
	</body>
</html>

＆＃13;

当我将鼠标移出div时，警报会弹出，但事实并非如此。我究竟做错了什么？请暂时保留这样的代码，因为我还不熟悉getelementbyid。

Answer 1

您没有正确传递var myID = collection.id，this在您的案例中是全局背景。
this工作，回调函数不能是匿名函数。
保留一个标志，以检查是否应添加事件或删除事件。该标志将在每次点击时切换其值。
使用removeEventListener代替mouseleave，稍后当您附加的事件与元素内联时使用。

＆＃13;

onmouseleave

＆＃13;

var eventExists = false;

function mouseLeft() {
  console.log("Mouse left!");
}

function attachEvent() {
  if (!eventExists) {
    this.addEventListener("mouseleave", mouseLeft);
  } else {
    this.removeEventListener("mouseleave", mouseLeft);
  }
  eventExists = !eventExists;
}

＆＃13;

Answer 2

事件的正确名称为mouseleave。通过HTML属性设置事件时使用onmouseleave（就像使用onclick一样）。

我建议您在下面的代码中定义一个函数（onMouseLeave）并将其用作addEventListener和removeEventListener的参数。

最后，您无需将useCapture参数设置为false（addEventListener和removeEventListener），因为false是默认值

var eventAttached = false;

function attachEvent(myObject) {

    if(eventAttached === false){
      myObject.addEventListener("mouseleave", onMouseLeave);
    } else {
      myObject.removeEventListener("mouseleave", onMouseLeave);
    } 
    
    eventAttached = !eventAttached;
}

function onMouseLeave(){
  alert("Mouse leave");
}

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>practice</title>
		<script src="scripts.js"></script>
	</head>
	<body>
		<script>
     		alert("Page loaded event fired");
		</script>
		<div style="background-color:red;padding:100px"; id="cycle"; onclick="attachEvent(this)">
        <h2 style="text-align:center">Click to cycle event listener</h2>
		</div>
	</body>
</html>

Answer 3

EventTarget.addEventListener()的第一个参数是要收听的type of the event。

没有onmouseenter事件。 onmouseevent是存储您安装的事件处理程序的属性的内部名称。活动名称为mouseenter。

您的代码应为：

myObject.addEventListener("mouseleave", function attachEvent(){}, false);

但是使用此代码安装的事件处理程序不会执行任何操作;你将无法知道何时被调用。对于测试，您应该在处理程序中添加对console.log()的调用：

myObject.addEventListener("mouseleave", function(){ console.log('Mouse is out of the house.'); }, false);

Answer 4

使用jquery更容易：

$(myObject).mouseleave(function(){alert('MouseLeave event fired')});

如何在我的代码中正确使用mouseleave函数？

4 个答案: