事件 (Event)

事件概述

事件是 JavaScript 应用跳动的心脏，实现用户与网页的交互。

事件的作用：

  • 验证用户输入的数据

  • 增加页面的动感效果

  • 增强用户的体验度

事件中的名词

  • 事件源：谁触发的事件

  • 事件名：触发了什么事件

  • 事件监听：谁监视这个事件

  • 事件处理：发生了怎么办

常用事件类型

事件名称 描述
onload 当页面或图像加载完后立即触发
onblur 元素失去焦点
onfocus 元素获得焦点
onclick 鼠标点击某个对象
onchange 用户改变域的内容
onmouseover 鼠标移动到某个元素上
onmouseout 鼠标从某个元素上离开
onkeyup 某个键盘的键被松开
onkeydown 某个键盘的键被按下

事件流和事件模型

事件冒泡（从小到大）

事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（文档）

<div> → <body> → <html> → document
事件捕获（从大到小）

事件开始时由 document 对象接受，然后逐级向下传播到具体的节点

document → <html> → <body> → <div>
DOM 事件流三个阶段

  1. 事件捕获阶段

  2. 处于目标阶段

  3. 事件冒泡阶段

事件处理程序

HTML 事件处理程序
<button type="button" onclick="alert('Hello')">按钮</button>
DOM 0级事件处理程序
var btn = document.getElementById("btn");
btn.onclick = function(){
    console.log("DOM 0级事件处理程序...");
}//最好写在定义的id后面（程序是从上到下执行的），或者写在window.onload=function(){  }中  //（加载事件：当页面上的标签和引入的资源加载完毕后，才会执行的方法）

特点：

  • 只能为同一个元素的同一个事件设定一个事件程序（会覆盖）

  • 通过 btn.onclick = null 移除事件

DOM 2级事件处理程序
var btn2 = document.getElementById("btn2");
btn2.addEventListener('click', function(){
    console.log("DOM 2级事件...");
});
btn2.addEventListener('click', fn);
​
function fn(){
    console.log("按钮被点击了...");
}
​
// 移除事件
btn2.removeEventListener("click", fn);

特点：

  • 可以为同一个元素的同一个事件设定多个事件程序

  • 三个参数：事件名、处理函数、useCapture（true-捕获/false-冒泡）

  • 移除事件不能移除匿名事件

BOM (Browser Object Model)

Window 对象

系统对话框

消息框 alert：

function testAlert(){
    window.alert("Hello");
}

输入框 prompt：

function testPrompt(){
    var uname = window.prompt("请输入用户名：","");
    console.log(uname);
}

确认框 confirm：

function testConfirm() {
    var flag = confirm("您确认要删除该记录吗？");
    if (flag) {
        alert("删除成功！");
    }
}
打开和关闭窗口

打开窗口：

document.getElementById("btn1").onclick = function(){
    // 打开空白窗口
    window.open();
    // 打开指定页面
    window.open("01-系统对话框.html");
    // 指定方式打开页面
    window.open("http://www.baidu.com","_self");
}

关闭窗口：

function test(){
    window.close();
}
时间函数

setTimeout()：在指定的毫秒数后调用函数或计算表达式。返回一个唯一的标识;也可以通过返回的标识cliearTimeout(id):来清除指定函数的执行。

// 在指定的毫秒数后调用函数
function toBaidu(){
    setTimeout(test, 3000);
}
function test(){
    window.open("http://www.baidu.com");
}

// 清除定时器
var id = setTimeout(function, times);
clearTimeout(id);


<!-- 创建一个一直显示当前时间的定时器 -->
<body>
    <button type="button" onclick="init()">开始</button>
    <button type="button" onclick="stop()">暂停</button>
    <h2 id="time"></h2>
</body>
<script type="text/javascript">
    //console.log(new Date().toLocaleTimeString());
    var id;
    function init(){
        var time=new Date().toLocaleTimeString();
        document.getElementById("time").innerHTML=time;
        id=setTimeout(init,1000);
    }
    function stop(){
        clearTimeout(id);
    }
</script>

setInterval()：可按照指定的周期(以毫秒计)来调用函数或计算表达式，也可根据返回的标识用来结束。该方法会不停地调用函数，直到 clearInterval()被调用或窗口被关闭。

// 按照指定的周期调用函数
function hello() {
    setInterval(function(){
        console.log("你好...");
    }, 1000);
}

// 清除定时器
var id = setInterval(function, times);
clearInterval(id);


<!-- 创建一个一直显示当前时间的定时器 -->
<body>
    <button type="button" onclick="init()">开始</button>
    <button type="button" onclick="stop()">暂停</button>
    <h2 id="time"></h2>
</body>
<script type="text/javascript">
    //console.log(new Date().toLocaleTimeString());
    var id;
	function init(){
		id = setInterval(function(){document.getElementById("time").innerHTML=new Date().toLocaleTimeString()},1000);
	}
    function stop(){
        clearTimeout(id);
    }
</script>

History 对象

属性：

  • length：返回浏览器历史列表中的 URL 数量

方法：

  • back()：加载 history 列表中的前一个 URL

  • forward()：加载历史列表中的下一个 URL

  • go(number|URL)：跳转到指定位置

console.log(window.history.length);
window.history.back();
window.history.forward();
window.history.go(-1); // 到上一个页面

Location 对象

属性：

  • href：设置或返回完整的 URL

方法：

  • reload()：重新加载当前文档

  • replace()：用新的文档替换当前文档（不能后退）

// 获取当前URL
var url = window.location.href;

// 页面跳转
function test(){
    window.location.href = "http://www.baidu.com";
}

// 替换当前文档
function test1(){
    window.location.replace("01-系统对话框.html");
}

// 重新加载
function test2(){
    window.location.reload();
}

DOM (Document Object Model)

节点类型

节点类型 HTML内容 示例
文档节点 文档本身 整个文档 document
元素节点 所有的HTML元素 <a>、<div>、<p>
属性节点 HTML元素内的属性 id、href、name、class
文本节点 元素内的文本 hello
注释节点 HTML中的注释 <!-- 注释 -->

获取节点

注意： 操作 DOM 必须等节点初始化完毕后才能执行

处理方式：

  1. 把 script 调用标签移到 html 末尾

  2. 使用 onload 事件

window.onload = function () {
    // 预加载 html 后执行
};

获取节点的方法：

方法 描述
getElementById() 根据id获取dom对象，如果id重复，以第一个为准
getElementsByTagName() 根据标签名获取dom对象数组
getElementsByClassName() 根据样式名获取dom对象数组
getElementsByName() 根据name属性值获取dom对象数组，常用于多选获取值

示例：

// 按照id获取
function testById(){
    var p = document.getElementById("p1");
    console.log(p);
}

// 按照name获取
function testByName(){
    var hobbys = document.getElementsByName("hobby");
    console.log(hobbys[0]);
}

// 按照标签名获取
function testByTagName() {
    var inputs = document.getElementsByTagName("input");
    console.log(inputs);
}

// 按照class获取
function testByClass(){
    var clas = document.getElementsByClassName("para");
    console.log(clas.length);
}

说明： href="javascript:void(0)"：伪协议，表示不执行跳转，而执行指定的点击事件

创建节点和插入节点

创建节点
方法 描述
createElement() 创建一个新的节点，需要传入节点的标签名称
createTextNode() 创建一个文本节点，可以传入文本内容
innerHTML 也能达到创建节点的效果，直接添加到指定位置
插入节点
方法 描述
write() 将任意的字符串插入到文档中
appendChild() 向元素中添加新的子节点，作为最后一个子节点
insertBefore() 向指定的已有的节点之前插入新的节点

示例：

// 添加段落
function addPara(){
    var div = document.getElementById("container");
    
    // 方式一
    var p = document.createElement("p");
    var txt = document.createTextNode("这是一段文本");
    p.appendChild(txt);
    div.appendChild(p);
    
    // 方式二
    var p = document.createElement("p");
    p.innerHTML = "这是一段文本";
    div.appendChild(p);
    
    // 方式三
    var p = "<p>这是文本</p>";
    div.innerHTML += p;
}

// 添加图片
function addImg(){
    var div = document.getElementById("container");
    
    // 方式一
    var img = document.createElement("img");
    img.src = "img/img1.jpg";
    img.width = 100;
    img.height = 100;
    div.appendChild(img);
    
    // 方式二
    var img = document.createElement("img");
    img.setAttribute("src","img/img1.jpg");
    div.appendChild(img);
    
    //方式三
    var img = "<img src='img/img1.jpg' />";
    div.innerHTML += img;
}

// 添加文本框
function addTxt(){
    //方式一
    var div = document.getElementById("container");
    var inp = document.createElement("input");
    inp.type = "text";
    inp.value = "今天天气不错";
    div.appendChild(inp);
    
    //方式二
    var inp = document.creatElement("input");
    inp.type = "text";
    inp.value = "今天天气不错";
    div.appendChild(inp);
    
    //方式三
    var inp = "<input type='text' value='hello' />";
    div.innerHTML += inp;
}

// 添加下拉选项
function addOptions(){
    var music = document.getElementsByName("music")[0];
    
    // 方式一
    var opt = document.createElement("option");
    opt.value="2";
    opt.text= "晴天";
    music.appendChild(opt);
    
    // 方式二
    var opt = document.createElement("option");
    opt.value="2";
    opt.text= "青花瓷";
    music.options.add(opt);
    
    // 方式三
    var opt = '<option value="2">千里之外</option>';
    music.innerHTML += opt;
}

间接查找节点

属性 描述
childNodes 返回元素的一个子节点的数组
children 返回元素的所有的子元素数组
firstChild 返回元素的第一个子节点
firstElementChild 返回元素的第一个子元素
lastChild 返回元素的最后一个子节点
lastElementChild 返回元素的最后一个子元素
nextSibling 返回元素的下一个兄弟节点
nextElementSibling 返回元素的下一个兄弟元素
previousSibling 返回元素的上一个兄弟节点
previousElementSibling 返回元素的上一个兄弟元素
parentNode 返回元素的父节点
parentElement 返回元素的父元素

删除节点

removeChild()：从元素中移除子节点

function delNode() {
    // 得到被删除的对象
    var span = document.getElementById("programmer");
    // 得到被删除的对象的父元素
    var parent = span.parentElement;
    // 删除元素
    parent.removeChild(span);
}

表单操作

获取表单

获取表单的方式：

  1. document.表单名称

  2. document.getElementById(表单 id)

  3. document.forms[表单名称]

  4. document.forms[索引] //从 0 开始

// 1、document.表单名称
var form1 = document.form1;

// 2、document.getElementById(表单 id)
var form2 = document.getElementById("form2");

// 3、document.forms[表单名称]
var form3 = document.forms['form1'];

// 4、document.forms[索引]
var form4 = document.forms[0];

获取表单元素

获取 input 元素

获取方式：

  1. 通过 id 获取：document.getElementById(元素 id)

  2. 通过 form.名称形式获取：myform.元素名称 (name属性值)

  3. 通过 name 获取：document.getElementsByName(name属性值)[索引]

  4. 通过 tagName 数组：document.getElementsByTagName('input')[索引]

function getTxt(){
    // 1)、通过 id 获取
    var uname = document.getElementById("uname").value;
    
    // 2)、通过 form.名称形式获取
    var myform = document.getElementById("myform");
    var upwd = myform.upwd.value;
    
    // 3)、通过 name 获取
    var uno = document.getElementsByName("uno")[0].value;
    
    // 4)、通过 tagName 数组
    var intro = document.getElementsByTagName("textarea")[0].value;
}
获取单选按钮

  1. 获取单选按钮组

document.getElementsByName("name属性值");

  1. 遍历每个单选按钮，并查看单选按钮元素的checked属性

选中状态设定： checked='checked'、checked、checked=true ​ 未选中状态设定： 不设 checked 属性或 checked=false

function getRadio(){
    // (1)获取单选按钮组
    var radios = document.getElementsByName("rad");
    // (2)遍历每个单选按钮，查看checked属性
    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) {
            console.log(radios[i].value);
        }
    }
}
获取多选按钮
function getCheckbox(){
    // (1)获取多选按钮组
    var checkboxs = document.getElementsByName("hobby");
    var str = '';
    // (2)遍历每个多选按钮，查看checked属性
    for(var i = 0; i < checkboxs.length; i++){
        if (checkboxs[i].checked) {
            str += checkboxs[i].value + ",";
        }
    }
    // 去除最后一个逗号
    str = str.substring(0,str.length-1);
    console.log(str);
}
获取下拉选项

  1. 获取下拉框（id属性值、name属性值、class属性值、元素）

  2. 获取下拉框的所有下拉选项

  3. 获取下拉框被选中项的索引

  4. 获取被选中项的值 注意： 当通过 options 获取选中项的 value 属性值时：

    • 若存在 value 属性，则取 value 属性的值

    • 若没有 value 属性，则取 option 标签的内容

  5. 获取被选中项的文本

选中状态设定： selected='selected'、selected=true、selected

未选中状态设定： 不设 selected 属性

document.getElementById("sub").onclick = function(){
    // 1. 获取下拉框
    var ufrom = document.getElementById("ufrom");
    // 2. 获取下拉框的所有下拉选项
    var selectoptions = ufrom.options;
    // 3. 获取下拉框被选中项的索引
    var index = ufrom.selectedIndex;
    // 4. 获取被选中项的值
    var val = selectoptions[index].value;
    // 5. 获取被选中项的文本
    var txt = selectoptions[index].text;
    
    // 获取当前被选中项的值
    var selectedvalue = ufrom.value;
    
    // 设置下拉选项被选中
    selectoptions[2].selected = true;
}

提交表单

提交表单的方式

（1）使用普通 button 按钮 + onclick 事件

function submitForm(){
    var uname = document.getElementById("uname").value;
    if (uname == null || uname.trim() == "") {
        return;
    }
    document.getElementById("myform1").submit();
}

（2）使用 submit 按钮 + οnclick="return 函数()"

<input type="submit" value="提交表单" onclick="return submitForm2()" />

function submitForm2(){
    var uname = document.getElementById("uname2").value;
    if (uname == null || uname.trim() == "") {
        return false;
    }
    return true;
}

（3）使用 submit 按钮 + 表单 οnsubmit="return 函数();"

<form id="myform" action="" method="get" onsubmit="return submitForm3()"

function submitForm3(){
    var uname = document.getElementById("uname3").value;
    if (uname == null || uname.trim() == "") {
        return false;
    }
    return true;
}

trim() 方法： 去除字符串前后空格（不去除字符串中间的空格）

表单校验

示例：

/**
 * 通过id获取dom对象
 */
function $(id) {
    return document.getElementById(id);
}
​
/**
 * 重置表单
 */
function resetForm() {
    $("myform").reset();
}
​
/**
 * 表单校验
 */
function checkForm() {
    // 获取用户名
    var uname = $("uname").value;
    if (isEmpty(uname)) {
        $("validate").innerHTML = '用户名不能为空！';
        return;
    }
    if (uname.length < 6 || uname.length > 12) {
        $("validate").innerHTML = '用户名长度在6-12位之间！';
        return;
    }
    
    // 获取密码
    var upwd = $("upwd").value;
    if (isEmpty(upwd)) {
        $("validate").innerHTML = '密码不能为空！';
        return;
    }
    if (upwd.length < 6 || upwd.length > 12) {
        $("validate").innerHTML = '密码长度在6-12位之间！';
        return;
    }
    if (upwd.indexOf(uname) > 0) {
        $("validate").innerHTML = '密码不能包含用户名！';
        return;
    }
    
    // 获取年龄
    var ages = document.getElementsByName("uage");
    var cked = ages[1].checked;
    if (!cked) {
        $("validate").innerHTML = '年龄必须选择你懂得！';
        return;
    }
    
    // 获取爱好
    var ufavs = document.getElementsByName("ufav");
    var favs = '';
    for (var i = 0; i < ufavs.length; i++) {
        if (ufavs[i].checked){
            favs += ufavs[i].value + ",";
        }
    }
    if (isEmpty(favs)) {
        $("validate").innerHTML = '必须选择一项爱好！';
        return;
    }
    favs = favs.substring(0,favs.length);
    
    // 获取下拉框
    var city = $("ufrom").value;
    if (city == -1){
        $("validate").innerHTML = '请选择你的城市！';
        return;
    }
    
    $("validate").innerHTML = '';
    
    // 设置表单提交地址并提交
    $("myform").action = "http://www.baidu.com";
    $("myform").submit();
}
​
/**
 * 判断字符串是否为空
 */
function isEmpty(str) {
    if (str == null || str.trim() == "") {
        return true;
    }
    return false;
}

# javascript # 开发语言 # ecmascript # html
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

cover

agent面试必备50-AI Agent 核心进阶：多智能体“状态管理与同步”

avatar AI Agent技术社区

为什么AI Agent需要可观测性

随着AI Agent在复杂任务处理、多步决策和自主执行中扮演越来越重要的角色，其内部推理过程却如同一个"黑盒"。本文将探讨如何通过可观测性技术，让AI Agent的思考过程变得透明、可追溯、可调试。工具调用的复杂性：外部API调用、代码执行、数据查询的监控与审计。性能瓶颈的定位：识别推理延迟、工具调用失败、上下文窗口溢出的根源。上下文关联：将用户会话、Agent实例、工具调用串联起来。数据采集层：

avatar AI Agent技术社区

7 月 AI + Web3 技术月报：从智能合约审计到去中心化推理的关键进展盘点

混合审计将成为标准配置。纯规则引擎或纯大模型审计都存在不可弥补的盲区，混合架构不是过渡方案而是最终形态。落地时的关键决策是置信度加权策略——规则引擎结果应享有更高权重，而非简单并列。去中心化推理的验证层是必要的但成本高昂。3.7% 的偏差检出率证明验证层的价值，但 62% 的成本占比说明当前架构的经济模型需要优化。改进方向是"抽查验证"而非"全量验证"——根据节点声誉历史动态调整验证频率。链上 A

avatar AI Agent技术社区