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动画触发的事件 |