使用div创建后的事件 - Javascript

在Javascript中，我们可以使用document.createElement('div')函数来创建一个新的<div>元素，并将其添加到HTML文档中。创建后可以对该元素添加事件。

添加事件

要添加事件，我们可以通过addEventListener()函数指定事件类型和处理函数。

以下是一个例子，演示如何添加click事件：

let myDiv = document.createElement('div'); // 创建新的<div>元素
myDiv.addEventListener('click', myFunction); // 添加事件，点击时调用myFunction函数

function myFunction() {
  // 处理函数，在这里进行事件处理逻辑
}

删除事件

如果需要删除事件，我们可以使用removeEventListener()函数来指定要删除的事件类型和处理函数。

以下是一个例子，演示如何删除click事件：

let myDiv = document.createElement('div'); // 创建新的<div>元素
myDiv.addEventListener('click', myFunction); // 添加事件，点击时调用myFunction函数

function myFunction() {
  // 处理函数，在这里进行事件处理逻辑
}

myDiv.removeEventListener('click', myFunction); // 删除事件

事件类型

JavaScript支持多种类型的事件，我们可以通过指定类型来添加事件。以下是一些常见的事件类型：

• click：单击事件。
• mouseover：鼠标移动到元素上时触发的事件。
• mouseout：鼠标移出元素时触发的事件。
• keydown：按下键盘上的按键时触发的事件。
• keyup：松开键盘上的按键时触发的事件。
• submit：提交表单时触发的事件。

总结

使用Javascript创建并添加事件到一个新的<div>元素是一个常见需求。我们可以使用createElement()函数来完成创建操作，使用addEventListener()函数和处理函数来添加事件，并使用removeEventListener()函数来删除事件。常见的事件类型包括单击(click)、鼠标移动(mouseover)、鼠标移出(mouseout)、按键(keydown/keyup)以及提交表单(submit)等。