DAY24-js事件

btn.addeventlistener('click'，function（）{}作用：

这段代码使用addEventListener()方法给一个按钮添加了一个click事件监听器，并在监听函数中定义了一些要执行的操作。

当用户点击这个按钮时，点击事件就会被触发，并执行在监听器中定义的代码。

 <script type="text/javascript">

对于JavaScript代码，通常将 `type` 属性设置为 `"text/javascript"`，这是HTML的默认值，因此在HTML5中可以省略不写。

 

 

 DOM2级事件为什么比DOM0事件能处理更多事件？

DOM0级事件只能处理基本的事件处理函数，而DOM2级事件可以处理更多类型的事件，包括鼠标事件、键盘事件、页面加载事件等。这是因为DOM2级事件定义了一种新的事件处理机制——事件监听器（event listener），使用addEventListener()方法来实现。相比于DOM0级事件，DOM2级事件可以通过事件流来确定事件的目标和事件处理程序的执行顺序，从而更加灵活。此外，DOM2级事件还支持事件捕获和取消事件的默认行为，可以更好地控制事件的行为和访问事件对象。因此，DOM2级事件具有比DOM0级事件更大的能力和更好的控制性。

btn2.addeventlistener('click',function(){alert("DOM2事件绑定方式")；}，false）；

代码在ID为“btn2”的HTML元素上添加了一个单击事件的监听器。当用户点击此元素时，将触发这个监听器，并弹出一个对话框，显示消息“DOM2事件绑定方式”。在处理单击事件时，它将以冒泡方式传递，这意味着事件先由最具体的元素（按钮）处理，然后沿着DOM树向上传播，直到到达文档对象。 

使用addEventListener方法的好处是可以在一个元素上添加多个监听器，并且不会影响到已有的监听器，而第三个参数则指定事件是在捕获阶段触发还是在冒泡阶段触发。默认情况下，addEventListener方法中的第三个参数是false，表示事件处理程序在冒泡阶段触发。如果想要在事件捕获阶段处理事件，要将第三个参数设为true。

多事件绑定的例子：

```html
<button id="myBtn">点击我触发事件</button>
```

JavaScript代码：

```javascript
var btn = document.getElementById("myBtn");

function showMessage1() {
  console.log("我是第一个消息");
}

function showMessage2() {
  console.log("我是第二个消息");
}

btn.addEventListener("click", showMessage1);
btn.addEventListener("click", showMessage2);

此代码段是使用DOM2事件模型在按钮btn上绑定了两个单击事件监听器。当按钮被点击时，它将依次调用 showMessage1() 和 showMessage2() 函数，并在控制台上显示两个不同的消息。

通过给同一个元素绑定多个事件监听器，可以在处理事件时执行不同的操作，将程序的模块化程度更高，代码易于维护。

 

 事件解绑成功的主要原因：保持addeventlistener和remove...里面的参数一致。

 

 

 

 兼容：简而言之，IE8以下一套，其他的一套

addeventlistener和attachevent的各自的适用环境？二者有什么区别？

addEventListener()是HTML5引入的方法，用于给元素添加事件监听器，它适用于现代 Web 浏览器。而attachEvent()是IE浏览器的专有方法，仅仅适用于IE6、IE7和IE8等低版本IE浏览器。

二者之间的区别在于：

- 参数个数不同：addEventListener()可以接收三个参数：事件类型（必需）、事件处理程序（必需）和是否在捕获阶段处理事件（可选）。而attachEvent()接收两个参数：事件处理程序和事件类型。
- 触发顺序不同：addEventListener()是按照事件发生的顺序进行触发，即先捕获阶段后冒泡阶段；而attachEvent()是只支持冒泡阶段进行触发。
- 可以同时添加多个相同类型的事件处理程序： 在addEventListener()中可以为同一个元素的同一个事件类型添加多个事件处理程序，而在attachEvent()中，相同类型事件只能添加一个事件处理程序。
- 作用域不同： addEventListener()中事件处理函数内部的this指向触发事件的元素本身, 而attachEvent()中事件处理函数内部的this指向的是window对象。

总之，如果您需要添加一个事件监听器并希望您的代码能够兼容多种浏览器，请使用addEventListener()。但是，如果您不需要考虑老旧的IE浏览器，则可以使用addEventListener()来代替attachEvent()。

 DOM事件又什么特点？一般代码是什么样的 

DOM事件的特点有以下几点：

1. 事件是响应式的：当某个事件被触发时，代码就会自动执行，它是事件驱动编程的核心。

2. 事件可以被取消：通过调用事件对象上的 `preventDefault()` 方法，可以取消事件的默认行为。

3. 事件在DOM树中被传递：事件从最外层的文档节点一直向下传递到事件的目标节点，这个过程被称为事件捕获。从目标节点再向上冒泡直到文档最外层，这个过程被称为事件冒泡。

一般来说，在JavaScript中添加事件监听器的代码如下：

```javascript
// 获取需要添加事件监听器的元素
const element = document.getElementById('example');

// 添加事件监听器
element.addEventListener('click', event => {
  // 响应事件的代码
});
```
以上是使用addEventListener() 方法的代码示例。当元素被点击时，事件监听器内部的代码就会被执行。其中，第一个参数是要监听的事件类型，第二个参数是事件处理函数，它会在事件触发时被调用。在事件处理函数中，可以通过事件对象 event 包含的信息来获取触发事件的元素、事件类型、鼠标位置等信息。

 DOM是什么？

DOM（Document Object Model，文档对象模型）是一种Web编程 API ，它定义了HTML、XML（也包括SVG、MathML等其他XML类语言）文档的逻辑结构。 它将整个文档表示为一个树形结构，其中每个节点都是文档的一部分。通过DOM，开发者可以获取或者修改 HTML 或 XML 文档中的任何部分内容，还可以使用 HTML 或 XML 中定义的标准方法和属性来添加、删除和修改元素和节点，以改变在浏览器窗口中显示的内容和样式。 

document.getElementByid("child").addeventlistener("click",function(e){alert("child事件被触发."+this.id）}）

这段代码是用于给 id 为 child 的元素添加一个 `click` 事件监听器。当用户点击该元素时，就会执行给定的回调函数，弹出 "child 事件被触发。"的提示消息，其中 `this.id` 是用于记录当前元素的 `id` 属性值，以便在回调函数内部使用。

具体分析：

1. `document.getElementById("child")` 用于获取 `id` 为 `child` 的 HTML 元素。

2. `addEventListener(eventType, callback)` 用于给元素添加一个指定类型 (`eventType`) 的事件监听器。在这个例子中，`eventType` 是 `click`，即当元素被点击时触发回调函数。

3. 回调函数 `function(e){alert("child事件被触发."+this.id)}` 会在事件发生时被执行。当事件被触发时，会将一个包含事件相关信息的事件对象 `e` 传递给回调函数。在这个例子中，回调函数将首先弹出 "child事件被触发。" 的提示信息，随后将当前元素的id值添加在提示信息的后面，以明确哪个元素触发了该事件。

4. `this.id` 是回调函数中记录当前元素 `id` 属性的值。在这个例子中，`this` 指向的是事件的目标元素，即上面获取的 `id` 为 `child` 的 HTML 元素。所以，当事件被触发时，`this.id` 就表示当前元素的 `id` 属性值。

总之，这个例子展示了如何在 JavaScript 中给元素添加事件监听器，使用回调函数来响应事件，以及如何在回调函数内部使用 `this` 和事件相关的属性来访问触发事件的元素和事件信息。

 事件冒泡：直系亲属都会被触发事件（如果绑定了事件）

事件捕获：会从上往下执行（先执行parent，后执行child）

事件委托：

 JavaScript中的事件委托（Event Delegation）是一种常用的事件处理技术，它利用了事件的冒泡机制，将事件处理程序绑定到上级元素，从而实现对其所有下级元素的事件处理。

例如，如果有一个ul列表，我们需要为其中的每个li元素绑定click事件，通常的做法是遍历每个li元素，并分别绑定事件处理程序

使用事件委托可以将事件处理程序绑定到ul元素上，从而在事件冒泡到ul元素时处理事件

为什么事件委托绑定到上级元素就能处理下级元素？冒泡排序不是从下级到上级往上走的吗？

你提到的冒泡排序是指排序算法中的一种排序方式，当我们谈论 JavaScript 中的事件处理机制时，我们谈论的是事件流（Event Flow）机制，这两者是不同的概念。

当一个元素上发生某个事件（如Click），这个事件会按照特定的顺序从该元素传播到文档根节点。这个顺序就叫做事件流机制。有两种事件流机制：冒泡事件流和捕获事件流。

冒泡事件流就是：事件从最内层的元素开始向外层元素传播，直至传递到最外层的文档节点。在事件传递过程中，如果某个元素上的事件处理函数返回了false，则会停止事件传播。因此，如果我们把事件处理程序绑定到一个元素上，那么该元素下的所有子元素上的事件也会通过事件冒泡传递到该元素上，从而被处理。

所以，事件委托这种做法就是把事件处理程序绑定到某个元素的上级元素上，因为子元素的事件会通过事件冒泡机制传递到上级元素上，从而被上级元素的事件处理程序捕获并处理。

总结下来，事件委托之所以有效，是因为浏览器的事件处理机制是基于事件冒泡的，而事件委托就是利用了这种机制。

 

event.type：告诉我们现在的事件类型是什么（例：click）

 

 

 点击child，事件绑定在parent上

event.target 事件源（点击谁，谁就是target）

event.currenttarget(事件绑定谁，谁就是target）

event.preventdefault() （阻止默认行为）

```
<a href="#" id="myLink">点击我</a>
```

JavaScript 代码：

```
document.getElementById("myLink").addEventListener("click", function(event) {
  event.preventDefault();
  console.log("链接被阻止了！");
});
```

在这个示例中，当用户点击链接时，事件会触发，并阻止默认行为（即页面跳转），并打印一条消息到控制台显示链接被阻止了。

event.stoppropagation()取消事件捕获或者冒泡

event.stopPropagation() 是一个用于停止事件冒泡的方法。比如，我们可以使用这个方法来防止父元素接收到子元素的事件，避免在操作子元素时触发父元素的事件处理函数。

<div id="parent">
  <div id="child">
    点我！
  </div>
</div>
```

JavaScript 代码：

```
document.getElementById("child").addEventListener("click", function(event) {
  event.stopPropagation();
  console.log("子元素事件被阻止了！");
});

document.getElementById("parent").addEventListener("click", function(event) {
  console.log("父元素事件被触发了！");
});

在这个示例中，当用户点击子元素时，子元素会触发一个点击事件，并使用 event.stopPropagation() 方法来阻止事件冒泡。因此，父元素不会接收到该事件，控制台只会打印子元素事件被阻止了！

event.clientY、pageY、screenY分别的作用？

clientY：浏览器顶部底边到鼠标的位置

pageY：浏览器顶部底边到鼠标位置

screenY：屏幕顶部到鼠标的位置

load事件：

HTML代码：
```
<!DOCTYPE html>
<html>
   <head>
      <title>Load事件示例</title>
   </head>
   <body>
      <h1 id="pageTitle">这是一个页面标题</h1>
      <script src="main.js"></script>
   </body>
</html>
```

JavaScript代码：
```
window.addEventListener("load", function() {
  var pageTitle = document.getElementById("pageTitle");
  alert("页面标题为：" + pageTitle.innerText);
});

当页面加载完成后，弹出一个警告窗口，显示页面标题为"这是一个页面标题"。这个例子中，我们给`window`添加了一个`load`事件监听器，当页面完全加载完成后，我们执行所提供的回调函数。在函数中，我们获取了页面标题的元素并显示其内部文字。
 

如果load应用于img标签:

图片预加载

 

案例：

<!DOCTYPE html>
<html>
   <head>
      <title>图片预加载</title>
   </head>
   <body>
      <img id="myImage" src="loading.gif" data-src="myImage.jpg" alt="My Image">
      <script src="main.js"></script>
   </body>
</html>
```

JavaScript代码：
```
var img = document.getElementById("myImage");
img.addEventListener("load", function() {
  img.src = img.dataset.src;
});

img.src = img.dataset.src;
```

 在这个例子中，我们将图片的`src`属性设置为`loading.gif`，并将实际图片的URL保存在`data-src`自定义属性中。在JavaScript代码中，我们首先获取这个图片的元素，然后添加一个`load`事件监听器。当图片的`load`事件触发时，我们将图片的`src`属性设置为`data-src`自定义属性中实际的图片的URL，这样就让实际的图片被预加载了。最后，我们在JavaScript中将图片的`src`属性设置为`data-src`自定义属性中实际的图片的URL，这样当页面被加载时就会开始预加载实际的图片。

var image=document.createElement("img");
Eventutil.addHandler(image,"load",function(e){})
image.src="1.png"；

这段代码是用 JavaScript 动态创建一个 img 元素，绑定了 load 事件，在图片加载完成时会执行回调函数，并将图片地址设置为 "1.png"。

第一行代码创建了一个 img 元素。

第二行代码利用封装的 Eventutil 给图片绑定了 load 事件，当图片加载完成后会执行回调函数

第三行代码给图片的 src 属性设置为 "1.png"，这样图片就开始加载了。

js中Eventutil的作用？

`EventUtil` 是一个封装了处理事件的工具对象，它提供了一些跨浏览器处理事件的方法。

`EventUtil` 的主要作用是封装常用的事件处理方法，使得不同浏览器在处理事件时更加统一

举例来说，不同浏览器对于事件绑定的方式可能会有不同的实现方法。在不同的浏览器中，有的浏览器使用`addEventListener`方法来绑定事件；有的浏览器使用`attachEvent`方法来绑定事件。

而 EventUtil 就提供了一种更加通用的方式，它可以自动地检测当前浏览器使用的是哪种绑定事件的方式，并且以一种统一的方式来绑定事件。

这个方法的具体实现会先检测当前就能够使用`addEventListener()`方法进行事件绑定，如果浏览器支持，就使用该方法进行事件绑定；如果不支持，则检测是否支持`attachEvent()`方法，如果支持，则使用该方法进行事件绑定。

因为各种浏览器在事件绑定方面的实现方式可能不同，使用`EventUtil.addHandler()`方法可以隐藏这种细节差异性，使得我们的代码写起来更加简洁和方便，在不同的浏览器中都能够正常运行。

总而言之，绑定事件最好用通用的EventUtil.addHandler()

Eventutil.addHandler(image,"load",function(e){}) 括号里面的三个元素分别的作用是什么？
`EventUtil.addHandler()`方法括号中的三个参数分别指定要绑定事件的元素、要绑定的事件类型、以及事件处理程序的函数。

在这个例子中：

1. 第一个参数 `image` 指定要绑定事件的元素为 `<img>` 标签。
2. 第二个参数 `"load"` 指定要绑定的事件类型为 `load` 事件。
3. 第三个参数是事件处理程序，即当事件被触发时要执行的函数。在这个例子中，`function(e) {}` 指定了一个匿名函数，其中 `e` 表示事件对象。当事件被触发时，该函数会被自动执行。
 

resize，scroll...变动窗口时会触发，并且会重复执行（拉动1次窗口可能执行很多次）

 

 

 

 

if（event.ctrlkey){keys.push("ctrl");}

码首先检查事件对象中的ctrlKey属性是否为true。如果用户按下了Ctrl键，则ctrlKey属性将为true，代码将执行花括号中的内容。在这种情况下，它将通过将字符串 "ctrl" 添加到keys数组中来记录该按键。

`keys.push("ctrl")` 的意思是将字符串 `"ctrl"` 添加到名为 `keys` 的数组的末尾。因此，在执行完这段代码之后，`keys` 数组将包含一个字符串元素 `"ctrl"`。如果在事件中用户还按下了其他键，则可以像这样连续调用 `push()` 方法来向 `keys` 数组添加更多的元素。

 

 在 JavaScript 中，`keydown` 是一种事件，用于在用户按下一个键时触发。当用户在文档中的元素上按下一个键时，浏览器会创建一个 `keydown` 事件，并将其分配给该元素

```javascript
document.addEventListener("keydown", function(event) {
  console.log("Pressed key with code: " + event.keyCode);
});

`document.addEventListener()` 是用来向整个文档注册事件监听器的方法。当用户在文档上按下一个键时，该代码会将一个回调函数作为参数传递给事件监听器。当 `keydown` 事件触发时，浏览器将调用该回调函数，并传递一个包含有关事件细节的 `event` 对象。

在这个示例中，回调函数使用 `console.log()` 将按键的 keyCode 属性输出到控制台。`keyCode`是一个整数，它代表用户按下的键的编码。这个编码可以用于识别确切的键，例如观察用户是否按下了字母“a”或数字“3”。

keyup：

 keypress：与keydown唯一区别是keypress只支持字符键，而keydown支持任意的

 任意删除就会触发：

 

结果：