Gemeinschaft
Lernen
Tools-Bibliothek
KI-Tools
Freizeit
suchen
Deutsch
首页 > 课程 > Javascript-Spaßkurs > Events

Events

目录列表

Events

Events

您可以编写事件触发执行的Javascript代码，例如用户单击HTML元素，移动鼠标或提交表单时。

当目标元素发生事件时，执行处理函数。

常见的HTML事件包括：


提示: 相应的事件可以添加到HTML元素作为属性。

例如:

1

<p onclick="someFunc()">一些文字</p>


事件发生时执行的函数的类型：

处理事件

处理事件

当用户单击指定的按钮时，我们将显示一个提醒弹出窗口：

1

2

3

4

5

6

<button onclick="show()">点击我</button>

<script>

function show() {

  alert("你好,我在这里!");

}

</script>

可以给元素绑定事件监听:

1

2

3

4

var x = document.getElementById("demo");

x.onclick = function () {

  document.body.innerHTML = Date();

}


填空,以在点击按钮时调用func()。

<button="()"> 点击 </button>

Event

Event

当用户进入或离开页面时，触发 onload 和 onunload 事件。在页面加载后执行操作时，这些操作非常有用。

1

<body onload="doSomething()">

类似地，window.onload 事件可以用于在整个页面加载之后运行代码。

1

2

3

window.onload = function() {

   //这里写代码

}

onchange 事件主要用于文本框。当文本框内的文本发生变化并且焦点从元素中丢失时，调用事件处理程序。

例如:

1

2

3

4

5

6

7

<input type="text" id="name" onchange="change()">

<script>

function change() {

 var x = document.getElementById("name");

 x.value= x.value.toUpperCase();

}

</script>

以上程序在用户名发生改变时,将其值转成大写.

完成填空，在body加载后调用 clear() 函数。

<body  ="">

</body>

事件监听

事件监听

addEventListener() 方法将事件处理程序附加到元素，而不会覆盖现有的事件处理程序。您可以向一个元素添加许多事件处理程序。

您还可以将许多同一类型的事件处理程序添加到一个元素，即两个“点击”事件。

1

element.addEventListener(event, function [, useCapture]);

第一个参数是事件的类型（如“点击”或“鼠标按下”）。

第二个参数是事件发生时要调用的函数。

第三个参数是一个布尔值，指定是否使用事件冒泡或事件捕获。此参数是可选的，将在下一课中进行说明。

提示:在添加事件类型的时候没有on 如:click 而不是 onclick

1

2

3

4

5

element.addEventListener("click", myFunction);

element.addEventListener("mouseover", myFunction);

function myFunction() {

  alert("Hello W3Cschool");

}

这会向元素添加两个事件侦听器。

我们可以删除其中一个监听器：

1

element.removeEventListener("mouseover", myFunction);

我们创建一个事件处理程序，在执行后会自动删除：

1

2

3

4

5

6

7

8

9

<button id="demo">开始</button>

<script>

var btn = document.getElementById("demo");

btn.addEventListener("click", myFunction);

function myFunction() {

  alert(Math.random());

  btn.removeEventListener("click", myFunction);

}

</script>

单击按钮后，将显示带有随机数的警报，并删除事件侦听器。

提示: Internet Explorer版本8及更低版本不支持 addEventListener() 和 removeEventListener() 方法。但是，您可以使用 document.attachEvent() 方法在Internet Explorer中附加事件处理程序。


多个事件处理程序可以添加到单个元素。

1/8
继续