Events

事件

JavaScript使我们有能力创建动态页面,网页中的每一个元素都可以产生某些触发JavaScript函数的事件。

我们可以认为事件是可以被JavaScript侦测到的一种行为。
您可以编写事件触发执行的Javascript代码,例如用户单击HTML元素,移动鼠标或提交表单时。

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

常见的HTML事件包括:

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
<style>

#tip {
   color: red; 
}

div {
    border:1px solid #999;
    width:200px;
    height:200px

}
</style>
</head>
<body>
<h2 id="tip">这边显示提示</h2>
<hr>
<p onclick="clickfn()">点击我看看</p>
<br>
<input type="text" onfocus="focusfn()" onblur="blurfn()"  value="获得焦点" />
<br><br>
<div onmouseover="moverfn()" onmouseout="moutfn()" style="">
    鼠标移动进来看看
</div>

<script>
function clickfn(){
    document.getElementById('tip').innerHTML = '触发了点击事件';
}

function blurfn(){
    document.getElementById('tip').innerHTML = '元素失去焦点';
}

function focusfn(){
    document.getElementById('tip').innerHTML = '元素获得焦点';
}


function moverfn(){
    document.getElementById('tip').innerHTML = '鼠标移动进来了';
}

function moutfn(){
    document.getElementById('tip').innerHTML = '鼠标移开了';
}

</script>
</body>
</html>


处理事件

处理事件
当用户单击指定的按钮时,我们将显示一个提醒弹出窗口:

<button onclick="show()">点击我</button>
<script>
function show() {
  alert("你好,我在这里!");
}
</script>

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

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

x.onclick = function () {

  document.getElementById("date").innerHTML = new Date();

}

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

<body onload="doSomething()">

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

window.onload = function() {
   alert("整个页面已经加载完成");
}

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

例如:

<input type="text" id="name" onchange="change()">
<script>
function change() {
 var x = document.getElementById("name");
 x.value= x.value.toUpperCase(); // 转成大写
}
</script>

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


事件监听

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

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

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

第一个参数是事件的类型(如“click”或“mouseover”)。

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

第三个参数是一个布尔值,指定是否使用事件冒泡或事件捕获。此参数是可选的。

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

element.addEventListener("click", myFunction);
element.addEventListener("mouseover", myFunction);

function myFunction() {
  alert("Hello W3Cschool");
}

删除事件监听
我们可以使用 removeEventListener 删除事件监听:

element.removeEventListener("mouseover", myFunction);

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

<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中附加事件处理程序。


表格验证

HTML5添加了一些允许表单验证的属性。例如,require 属性可以添加到输入字段,以使其强制填写。

更复杂的表单验证可以使用JavaScript来完成。

表单元素具有可以处理以执行验证的 onsubmit 事件。

例如,我们创建一个带有两个输入框和一个按钮的窗体。两个字段中的文本应该相同,不能为空,才可通过验证。

<form onsubmit="return validate()" method="post">
  Number: <input type="text" name="num1" id="num1" />
  <br />
  Repeat: <input type="text" name="num2" id="num2" />
  <br />
  <input type="submit" value="Submit" />
</form>

现在我们需要定义 validate() 函数:

function validate() {
  var n1 = document.getElementById("num1");
  var n2 = document.getElementById("num2");
  if(n1.value != "" && n2.value != "") {
    if(n1.value == n2.value) {
      return true;
    }
  }
  alert("输入两个值不相等,请重新输入!");
  return false;
}

只有当值不为空且相等时才返回 true 。

提示: 如果其 onsubmit 事件返回 false,表单将不会被提交。

最后修改:2022 年 12 月 05 日
如果觉得我的文章对你有用,请随意赞赏