JavaScript之事件

最新推荐文章于 2024-09-10 20:37:24 发布
最新推荐文章于 2024-09-10 20:37:24 发布
阅读量164 收藏
点赞数
分类专栏： JavaScript 文章标签： 事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43154931/article/details/82850906
版权
  • 事件
  • 事件流
    • 事件冒泡
    • 事件捕获
    • DOM事件流
  • 事件处理程序
    • HTML事件处理程序
    • DOM3级实例
      • DOM0级事件处理程序
      • DOM2级事件处理程序/IE事件处理程序
      • DOM3级事件处理程序
  • 事件对象
    • DOM中的事件对象
    • IE中的事件对象

1. 事件

JavaScript和HTML的交互是通过事件完成的。事件，就是文档或者浏览器窗口中发生的一些特定的交互瞬间（click，hover等）。

2. 事件流

事件流是指从页面接受事件的顺序。包括IE提出的事件冒泡流以及Netscape 提出的事件捕获流。

2.1 事件冒泡（自里向外）

IE的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。
在这里插入图片描述

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body id="body">
    <div id="div1">
        <div id="div2">
            <button id="div3">div3</button>
        </div>
    </div>
</body>
<script>
let div1 = document.getElementById("div1");
let div2 = document.getElementById("div2");
let div3 = document.getElementById("div3");
let body = document.body;


div1.onclick = function () {
    console.log(this.id);
}
div2.onclick = function () {
    console.log(this.id);
}
div3.onclick = function () {
    console.log(this.id);
}
body.onclick = function () {
    console.log(this.id);
}

</script>
</html>

结果：
结果展示

ps:
所有的现代浏览器都支持事件冒泡，但在具体实现上有一些差别。IE5.5及更早版本中的事件冒泡会跳过< html >元素（从< body > 直接跳到documen）。IE9， Firefox，Chrome和Safari则将事件一直冒泡到window对象。

2.2 事件捕获（自外向里）

Netscape Communicator团队提出的另一种事件流叫做事件捕获（event capturing）。事件捕获的思想是不太具体的节点应该更早接受到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于再事件到达预定目标之前捕获它。

在这里插入图片描述

实例：

body.addEventListener("click",function(e){
    console.log("body 捕获事件");
},true);
div3.addEventListener("click",function(e){
    console.log("div3 捕获事件");
},true);
div2.addEventListener("click",function(e){
    console.log("div2 捕获事件");
},true);
div1.addEventListener("click",function(e){
    console.log("div1 捕获事件");
},true);

结果：
在这里插入图片描述

2.3 DOM事件流

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

在这里插入图片描述

实例：

let div1 = document.getElementById("div1");
let div2 = document.getElementById("div2");
let div3 = document.getElementById("div3");
let body = document.body;

body.addEventListener("click",function(e){
    console.log("body 捕获事件");
},true);
div3.addEventListener("click",function(e){
    console.log("div3 捕获事件");
},true);
div2.addEventListener("click",function(e){
    console.log("div2 捕获事件");
},true);
div1.addEventListener("click",function(e){
    console.log("div1 捕获事件");
},true);

body.addEventListener("click",function(e){
    console.log("body 冒泡事件");
},false);
div3.addEventListener("click",function(e){
    console.log("div3 冒泡事件");
},false);
div2.addEventListener("click",function(e){
    console.log("div2 冒泡事件");
},false);
div1.addEventListener("click",function(e){
    console.log("div1 冒泡事件");
},false);

结果：
在这里插入图片描述

3. 事件处理程序

事件就是用户或者浏览器自身执行的某种动作。如click，load，和mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。大多数情况下，将事件处理程序添加到事件冒泡阶段，这样可以最大限度的兼容各种浏览器。

3.1 HTML事件处理程序

    <input type="button" value="click me" onclick="console.log(event.target)" />

3.2 DOM0级事件处理程序

<!-- html -->
<input type="button" id="btn1" value="btn1-value" />

// js
let btn1 = document.getElementById('btn1');
btn1.onclick = function() {
    alert(this.id);
}

this指向btn1

删除：

btn.onclick = null;

缺点：
指定多个只会执行最后一个

btn1.onclick = function() {
    alert("1");
}
btn1.onclick = function() {
    alert("2");
}
btn1.onclick = function() {
    alert("3");
}
btn1.onclick = function() {
    alert("4");
}

// 4

3.3 DOM2级事件处理程序

"DOM2级事件"定义了两个方法，用于处理制定和删除两个事件处理程序的操作：addEventListener() 和 removeEventListener()。所有的dom节点都包裹这两个方法。并且它们都接受三个参数：要处理的程序名，作为事件处理程序的函数和一个布尔值(调用事件处理程序的时间：true事件捕获时调用，false事件冒泡时)。

let btn1 = document.getElementById('btn1');
btn1.addEventListener("click", function() {
    alert("click me");
}, false)

**ps: **

removeEventListener()无法移除匿名函数。

3.4 IE事件处理程序

IE实现了与DOM中类似的两个方法：attachEvent() 和 detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称和事件处理程序函数。由于ie8及之前的版本只支持冒泡，所以attachevent（）添加的事件会被添加到事件冒泡阶段。

let handler = function() {
	alert("clicked");
}
btn1.attachEvent("onclick", handler);
btn1.detachEvent("onclick", handler);

ps:
removeEventListener()无法移除匿名函数。

4. 事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息

4.1 DOM中的事件对象

兼容DOM的浏览器会将一个event对象传入到事件处理器程序中（DOM0级和DOM2级都可以）

btn1.addEventListener("click", function() {
    console.log(event)
}, false)

在这里插入图片描述

常用event属性：
currentTarget：等于this，事件绑定的对象
target：具体触发事件的对象
preventDefault：阻止默认行为触发，如a标签的跳转
stopPropagation：阻止事件流继续，事件冒泡或者事件捕获停止于当前节点

4.2 IE中的事件对象

与访问DOM中的event对象不同，要访问IE中的event对象有几种不同的方式，取决于制定事件处理程序的方法。

  1. 使用DOM0级方法添加事件处理程序时，event对象作为window的一个属性存在。
    btn1.onclick = function() {
   let event = window.event;
   console.log(event);
}
  2. 使用attachEvent()添加的，那么就会有一个event对象传入参数中
    btn1.attachEvent('onclick', function() {
    let event = window.event;
    console.log(event);
})
Oreohahaha
关注
专栏目录
JavaScript高级(6)
Text789的博客
03-22 1159
1.常见的事件 (1)页面初始化事件 onload <script> function testLoad(){ alert("页面初始化事件"); } </script> <body onload="testLoad();"> <script> （2）按钮点击事件 onclick <script> function testclick(){ alert("按钮点击事件"); } </s...
浅谈JavaScript之事件绑定
10-27
JavaScript事件绑定是网页交互的核心部分，它允许用户与页面元素进行互动。本文将深入探讨JavaScript事件绑定的概念，以及如何处理常见的问题和优化策略。 首先，我们来看一个基础的事件绑定示例。在给出的HTML结构...
JavaScript事件
01-02 86
JavaScript事件详解事件流事件处理事件对象 事件流：描述的是在页面中接受事件的顺序事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件 事件处理1、HTML事件处理：直接添加到HTML结构中 <button id="btn" onclick="hello()">按钮&...
JavaScript事件的处理
h294590501的专栏
05-29 1397
JavaScript事件的处理在网页中用户操作的时候会激活各种事件， 如按钮点击，鼠标移动，键盘按下等，这些都叫事件（Event）。 我们可以通过编写代码对这些事件进行处理， ​ 如：当用户点击一个删除按钮时，我们给用户一些在删除之前的提示等等。 设置事件的两种方式：方式一： 有名/命名函数 事件="函数名（）"；//里面的（）不能省略。。。 ​ 方式二： 无名/匿名函数 事件=function(...
javascript事件处理
wukai_std的博客
11-20 632
JS事件添加的兼容性问题事件是javascript和HTML交互基础,任何文档或浏览器窗口发生的交互,都要通过绑定事件方法进行交互.DOM0级,DOM2级,IE事件处理DOM0级事件 DOM0级事件是直接为HTML元素添加事件处理属性,例如为input添加点击事件 可以<input id="b1" type="button" onclick="alert('hello')" value="点击">或
javascript 中事件冒泡和事件捕获机制的详解
01-19
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
Javascript的事件处理机制
03-01
事件(Event)是JavaScript应用跳动的心脏...在漫长的演变史，我们已经告别了内嵌式的事件处理方式（直接将事件处理器放在HTML元素之内来使用）。今天的事件，它已是DOM的重要组成部分，遗憾的是，IE继续保留它最早在IE4
JavaScript 事件处理 事件绑定 示例代码
06-27
事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例...
JavaScript之DOM事件（源代码）
05-31
JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源...
JavaScript事件处理
syy的博客
11-05 318
JavaScript事件
JavaScript 事件处理
weixin_47906106的博客
12-26 840
事件处理 事件 发生在HTML元素上的事情，可以是用户行为，也可以是浏览器的行为 用户点击了某个HTML元素 用户将鼠标移动到某个HTML元素上 用户输入数据时光标离开 页面加载完成 事件源：时间触发的源头，即触发事件的元素，如按钮，输入框，超链接 事件对象：当一个事件发生时，这个事件相关的详细信息会被保存到一个对象中，称为event对象 事件监听：监听事件的发生，绑定事件函数，当事件触发后执行该事件函数，即回调函数 绑定事件 三种方式： 静态绑定，通过为标签的事件属性赋值 <input ty
JavaScript的事件处理
qq_36722262的博客
09-29 132
JavaScript的事件处理 1、JavaScript的事件类型 1） 鼠标键盘事件：鼠标单击onclick、键盘的某个键按下并且释放onkeypress等 2）表单相关事件：onfocus 元素获得焦点时触发。onsubmit表单被提交时触发等 2、事件的调用： 1） HTML中调用 <input name=“save” type=“button” value=“保存” οnclick=“alert(‘单击保存’);”> 2）JavaScript中调用 <input id = “sav
javascript 中的事件处理
heyuyou的专栏
07-19 435
javascript 中的事件处理词汇：事件 event 事件处理 event handling内容：事件是js程序的心脏。下面我将要讲述什么是event handling,他存在什么问题，以及如何书写跨浏览器的脚本。可以说没有event 就没有 Js.网上的任何网页只要有js，就有事件发生，其实原因很简单，js的目的就是为了使得用户和页面进行交
Javascript中的事件处理程序
H小志
11-02 1247
事件是文档或浏览器窗口中发生的一些特定的交互瞬间 事件流 事件流描述的是从页面中接受事件的顺序。 而IE和Netscape开发团队提出了完全相反的两个事件流的概念。IE的事件流是事件冒泡流；Netscape的事件流是事件捕获流。 事件冒泡：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。 事件捕获：不太具体的节点应该更早接收到
第二章 JavaScript事件处理
菜鸟的博客
02-23 442
1.JavaScript事件应用-按钮单击事件 &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; function myclick(btn){ alert(btn.value); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form na
JavaScript 编程精粹：JavaScript 事件处理
最新发布
m0_53117341的博客
09-10 825
JavaScript 编程精粹：JavaScript 事件处理一 . BOM1.1 Window1.1.1 alert()1.1.2 confirm()1.1.3 setInterval()1.1.4 setTimeout()1.1.5 小案例 - 通过定时器来控制灯的亮暗1.2 History1.3 Location二 . DOM2.1 获取 Element 对象2.2 常见 Element 对象的使用三 . 事件监听3.1 事件绑定3.2 常见事件3.3 需求 : 移出输入框自动校验格式3.3.1 验证
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值