JavaScript——事件-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51526974/article/details/123213705

本文深入探讨了JavaScript中的事件，包括事件定义、作用、事件中的关键概念如事件源和事件名。讲解了DOM0级和DOM2级事件处理程序的差异，以及事件流和事件模型的概念，如事件捕获和冒泡阶段。同时介绍了HTML处理程序的优缺点，并通过实例展示了如何使用addEventListener和removeEventListener方法。此外，还涉及了BOM中的windows对象及其方法，如alert、prompt和confirm，以及window.open方法用于打开新窗口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件的定义

事件是JavaScript应用跳动的心脏，进行交互，使网页动起来，当我们与浏览器中Web页面进行某些类型的交互时，事件就发生了，事件可能是用户在某些内容上的点击，鼠标经过某个特定元素或按下键盘上某些按键。

事件还可能是Web浏览器中发生的事情。通过使用JavaScript，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。

作用

验证用户输入的数据

增加页面的动感效果

增强用户的体验

事件中的几个名词

事件源：谁触发了事件

事件名：触发了什么事件

事件监听：谁管这个事情，谁监视

事件处理：发生了怎么办

<body onload="loadwindows();">
</body >
    <!--内部JS-->
    <script type="text/javascript">

       function loadwindows(){
           alert("看看这个函数好不好使");
       }

几个常用的事件

JavaScript可以处理的事件类型为：鼠标事件，键盘事件，HTML事件

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

事件流和事件模型

我们的事件最后都有一个特定的事件源，暂且将事件源看成HTML的某个元素，那么当一个HTML元素产生一个事件时，该元素会在元素节点和根节点之间按照特定的顺序传播
路径所受过的结点都会受到该事件，这个传播过程被称为DOM事件流。

事件顺序有两种类型：事件捕获和事件冒泡。（都是事件流的不同表示）

事件冒泡：IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点。
事件捕获：事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件

DOM事件流：DOM2级事件规定的事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段，首先发生的是事件捕获阶段，为截获事件提供了机会，然后是实际的目标接收到事件，
最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。

HTML处理程序

定义：某个元素支持的每种事件，都可以用一个与相应事件处理程序同名的HTML特性来指定，这个特性的值
应该是能够执行的Javascript代码。

缺点：耦合度过高，还可能存在时差问题，(当用户点击按钮时，处理函数还未加载到，此时处理函数就是单独写的一段JS代码)
而且在不同浏览器上可能有不同的效果

<input type="button" value="Press me" onclick="alert('thanks')">

<button type="button" onclick="fucking()"></button>


        function fucking(){
            console.log("开始打印这行字");
        }

DOM0级事件处理程序

DOM0级事件处理程序
将一个函数赋值给一个事件处理程序属性
只能为一个元素的同一个事件设定一个事件处理程序

<button type="button" id="btn">看看这个按钮</button>

//通过id属性值获取元素对象
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            console.log('这个函数可以没有函数名，因为它是直接绑定在变量上的');
        }

DOM2级事件处理程序

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和
removeEventListener()所有的DOM节点都包含这两个方法，并且他们都接受三个参数，要处理的事件名，作为事件处理程序的函数()和一个布尔值
最后这个布尔函数如果是true，则表示在捕获阶段调用事件处理程序，如果是false则表示在冒泡阶段调用事件处理程序。

可以为同一个元素的同一个事件设置多个事件处理程序

<button type="button" id="whatoo">DOM2级事件处理程序</button>

var fu = document.getElementById('whatoo');
        fu.addEventListener('click',function(){
            console.log('one');
        },false)

        fu.addEventListener('click',function(){
            console.log('two');
        },false)

        function test(){
            console.log('three');
        }
        fu.addEventListener('click',test,false);
        fu.removeEventListener('click',test,false);

BOM

BOM的核心对象是windows，它表示浏览器的一个实例，windows对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口。又是ECMAScript规定的Globa对象，这意味着在网页中定义的任何一个对象，变量和函数，都以windows作为其Global对象，因此有权访问parselnt()方法，如果页面中包含框架，则整个框架都会拥有自己的windows对象，并且保存在frame对象中，在frame集合中，可以通过数值索引或者框架的名称来访问相应的windows对象

windows对象方法

系统对话框
浏览器通过（实际上是windows对象的方法）alert(),prompt(),confirm()
可以调用系统对话框向用户显示消息

消息框：alert()方法用于显示一条带有指定消息和一个OK按钮的警告框
输入框：prompt()方法适用于可提示用户进行输入的对话框
确认框： confirm() 方法用于显示一个带有指定消息和OK及取消按钮的对话框

 <button type="button" onclick="fucking()">这是一个小按钮</button>

function fucking(){
       let flag = confirm('确认要删除记录吗');
       if(flag){
           alert('删除成功');
       }else{
           alert('删除失败');
       }
   }

打开窗口

windows.open()默认另外打开一个新的空白页面
windows.open(,"_self")在本页面打开

<button type="button" id="btn">这是一个小按钮</button>

document.getElementById("btn").onclick = function(){
            window.open("http://www.baidu.com","_self");//可以打开指定的窗口
        }