JS入门：JavaScript事件详解

郎哥
JavaScript
2024-07-18
215热度
0评论

什么是JavaScript事件？

JavaScript语言本身不会产生事件，产生事件的是网页文档和网页文档中的HTML元素。

什么是事件呢？事件就是网页文档或网页元素对外发出的通知。当HTML元素与用户发生交互行为时，该元素会触发相关的交互事件，例如：当用户用鼠标单击网页中的按钮时，按钮会触发鼠标单击事件（onclick）。元素自身也会触发事件，例如：当图片元素加载完成后，会触发加载完成事件（onload）。

HTML文档或元素触发事件是对JS发出的通知，通知JS程序，HTML文档或元素与用户发生了交互，或者内容发生了变化，JS可以处理这些事件。

HTML文档或元素也称为DOM对象，DOM是一套Web标准，它定义了访问HTML文档对象的一套属性、方法和事件。DOM实际上是建立网页与JavaScript语言沟通的桥梁。

JS如何监听事件？

如果JS需要对DOM对象触发的事件进行处理，就需要监听这些事件，浏览器会自动调用监听事件的JS函数。

JS有三种监听事件的方式：分别是内联属性监听、DOM属性绑定监听和使用事件监听函数。

内联属性监听

内联属性监听是在编写HTML元素代码时，直接写入元素的事件属性，事件属性值为JS函数或JS代码。

例如：

<html>
<head>
    <title>JavaScript开发案例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function add(){
   num1 = parseInt(document.getElementById("op1").value);
num2 = parseInt(document.getElementById("op2").value);
alert(sum(num1,num2));
    }
function sum(a,b){
return a+b;
    }


    </script>
</head>
<body>
       <h3>JavaScript开发案例</h3>
       <hr>
       <p> 加数：<input type="text" id="op1" name="op1" maxlength="20" value=""/></p>
       <p> 加数：<input type="text" id="op2" name="op2" maxlength="10" value=""/></p>
       <p><input type="button" value="加法" onclick="add()"/></p>
</boyd>
<html>

在上面的案例代码中，HTML元素button事件属性onclick的值为JS函数add()，add()函数在script标签内定义。事件属性onclick为用户使用鼠标单击元素触发的事件，button元素onclick属性的值为add()函数，当用户使用鼠标单击button元素时，浏览器会调用add()函数对该单击事件进行处理。

DOM属性绑定

DOM是网页编程接口，也称为文档对象模型，它可以被JS调用，用来动态操作或修改网页元素的内容。

DOM将HTML文档作为一个树形结构，网页文档中的元素都是树结构的节点，每个节点都是一个DOM对象，每个DOM对象都有事件属性，将JS函数赋值给DOM对象的事件属性，就将DOM触发的事件和JS函数绑定起来，当DOM事件触发后，浏览器会调用被绑定的JS函数。

例如：

<html>
<head>
    <title>JavaScript开发案例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
    
// 网页加载完成后，onload事件被触发
window.onload=function (){
    // 通过元素id属性获取元素对象
button_add = document.getElementById("id_add")
// 对象的onclick属性绑定add函数
    button_add.onclick = add 


button_mul = document.getElementById("id_mul")
// 可以直接定义函数绑定到对象的onclick
button_mul.onclick = function(event) {
num1 = parseInt(document.getElementById("op1").value);
num2 = parseInt(document.getElementById("op2").value);
alert(num1*num2);
}
}


function add(){
   num1 = parseInt(document.getElementById("op1").value);
num2 = parseInt(document.getElementById("op2").value);
alert(sum(num1,num2));
    }


function sum(a,b){
return a+b;
    }


    </script>
</head>
<body>
       <h3>JavaScript开发案例</h3>
       <hr>
       <p> 加数：<input type="text" id="op1" name="op1" maxlength="20" value=""/></p>
       <p> 加数：<input type="text" id="op2" name="op2" maxlength="10" value=""/></p>
       <p><input type="button" id="id_add" value="加法"/></p>
   <p><input type="button" id="id_mul" value="乘法"/></p>
</boyd>
<html>

案例代码中，onload是windows对象（windows是DOM的窗口对象，表示浏览器窗口）属性，该属性为网页加载完成事件，该属性绑定了处理事件的匿名JS函数。

在onload事件处理函数体内，应用document对象（DOM的文档对象）的getElementById()获取button对象，然后绑定button对象的onclick事件处理函数，其中button_add对象绑定了add()函数，button_mul对象绑定了匿名函数。

使用事件监听函数

该监听方式是HTML元素对象调用addEventListener()方法，来绑定事件的处理函数。具体使用方法如下：

addEventListener(event, function, useCapture)

参数event是要绑定的对象事件属性名称，event是字符串类型。注意：事件名称不使用"on"前缀，用"click"而不是"onclick"。

参数function是要绑定的函数，也称为回调函数，当对象事件触发时，该函数被调用，function可以是已定义的函数名称，也可以直接定义匿名函数。

参数useCapture是可选参数，类型是布尔类型，设置事件是否在捕获或冒泡阶段执行。该参数主要是设置事件的执行顺序，当多个对象元素叠加在窗口的同一区域，若鼠标单击多个对象的共同区域时，捕获阶段的事件执行顺序是从大到小，冒泡阶段的执行顺序是从小到大。

useCapture若设置为true，事件处理在捕获阶段执行；useCapture若设置为false，事件处理在冒泡阶段执行。默认为false。

例如：

<html>
<head>
    <title>JavaScript开发案例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
    
// 网页加载完成后，onload事件被触发
window.onload=function (){
    // 通过元素id属性获取元素对象
button_add = document.getElementById("id_add")
// 调用对象的addEventListener方法绑定事件处理函数
// 参数function为已定义的函数名称
    button_add.addEventListener("click",add)


button_mul = document.getElementById("id_mul")
// 调用对象的addEventListener方法绑定事件处理函数
// 参数function为直接定义的匿名函数
button_mul.addEventListener("click", function(){
num1 = parseInt(document.getElementById("op1").value);
num2 = parseInt(document.getElementById("op2").value);
alert(num1*num2);
})
}


function add(){
   num1 = parseInt(document.getElementById("op1").value);
num2 = parseInt(document.getElementById("op2").value);
alert(sum(num1,num2));
    }


function sum(a,b){
return a+b;
    }


    </script>
</head>
<body>
       <h3>JavaScript开发案例</h3>
       <hr>
       <p> 加数：<input type="text" id="op1" name="op1" maxlength="20" value=""/></p>
       <p> 加数：<input type="text" id="op2" name="op2" maxlength="10" value=""/></p>
       <p><input type="button" id="id_add" value="加法"/></p>
   <p><input type="button" id="id_mul" value="乘法"/></p>
</boyd>
<html>

JS支持的事件

JS可以处理的DOM对象触发的事件类型如下表所示：

事件类型	描述
窗口事件	由窗口或框架对象触发的事件
鼠标事件	由鼠标单击、双击、移出、移入DOM对象触发的事件
键盘事件	键盘按下、松开触发的事件
表单事件	表单提交、表单内DOM对象触发的事件
剪贴板事件	当用户在浏览器窗口操作剪贴板时触发的事件
媒体事件	由图片、音视频DOM对象触发的事件
打印事件	当用户开始打印操作时触发的事件
动画事件	播放CSS动画触发的事件