【javascript】事件

最新推荐文章于 2024-04-18 23:22:15 发布
最新推荐文章于 2024-04-18 23:22:15 发布
阅读量346 收藏
点赞数 3
分类专栏： javascript 文章标签： javascript 开发语言 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47746614/article/details/132442952
版权

目录

事件监听（绑定）

1、事件是在编程时系统内发生的动作或者发生的事情。

​    比如用户在网页上单击一个按钮

2、就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件。

​   比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

3、事件监听三要素：

  • 事件源： 那个dom元素被事件触发了，要获取dom元素

  • 事件类型： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等

  • 事件调用的函数： 要做什么事

4、事件监听语法：

元素对象.addEventListener（‘事件类型’，要执行的函数）

注意：

  1. 事件类型要加引号

  2. 函数是触发之后再去执行，每次触发都会执行一次

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件监听</title>
</head>
<body>
  <h3>事件监听</h3>
  <p id="text">为 DOM 元素添加事件监听，等待事件发生，便立即执行一个函数。</p>
  <button id="btn">点击改变文字颜色</button>
  <script>
    // 1. 获取 button 对应的 DOM 对象
    const btn = document.querySelector('#btn')

    // 2. 添加事件监听
    btn.addEventListener('click', function () {
      console.log('等待事件被触发...')
      // 改变 p 标签的文字颜色
      let text = document.getElementById('text')
      text.style.color = 'red'
    })

    // 3. 只要用户点击了按钮，事件便触发了！！！
  </script>
</body>
</html>

事件监听版本

1、DOM L0

事件源.on事件 = function() { }

2、DOM L2

事件源.addEventListener(事件， 事件处理函数)

3、两种注册事件的区别

（1）传统on注册（L0）

  • 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
  • 直接使用null覆盖偶就可以实现事件的解绑
  • 都是冒泡阶段执行的

（2）事件监听注册（L2）

  • 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
  • 后面注册的事件不会覆盖前面注册的事件(同一个事件)
  • 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
  • 必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
  • 匿名函数无法被解绑

事件类型

一、鼠标事件：鼠标触发

1、鼠标事件是指跟鼠标操作相关的事件，如单击、双击、移动等。

2、click 鼠标点击

<script>
  // 双击事件类型
  btn.addEventListener('dblclick', function () {
    console.log('等待事件被触发...');
    // 改变 p 标签的文字颜色
    const text = document.querySelector('.text')
    text.style.color = 'red'
  })

  // 只要用户双击击了按钮，事件便触发了！！！
</script>

3、mouseenter 监听鼠标是否移入 DOM 元素

<body>
  <h3>鼠标事件</h3>
  <p>监听与鼠标相关的操作</p>
  <hr>
  <div class="box"></div>
  <script>
    // 需要事件监听的 DOM 元素
    const box = document.querySelector('.box');

    // 监听鼠标是移入当前 DOM 元素
    box.addEventListener('mouseenter', function () {
      // 修改文本内容
      this.innerText = '鼠标移入了...';
      // 修改光标的风格
      this.style.cursor = 'move';
    })
  </script>
</body>

4、mouseleave 监听鼠标是否移出 DOM 元素

<body>
  <h3>鼠标事件</h3>
  <p>监听与鼠标相关的操作</p>
  <hr>
  <div class="box"></div>
  <script>
    // 需要事件监听的 DOM 元素
    const box = document.querySelector('.box');

    // 监听鼠标是移出当前 DOM 元素
    box.addEventListener('mouseleave', function () {
      // 修改文本内容
      this.innerText = '鼠标移出了...';
    })
  </script>
</body>

5、鼠标经过事件比较：

  • mouseover 和 mouseout 会有冒泡效果

  • mouseenter 和 mouseleave 没有冒泡效果 (推荐)

二、焦点事件：表单获得光标

1、focus 获得焦点

2、blur 失去焦点

三、键盘事件：键盘触发

1、Keydown 键盘按下触发

2、Keyup 键盘抬起触发

四、文本事件 ：表单输入触发

1、input 用户输入事件

事件对象

获取事件对象

1、也是个对象，这个对象里有事件触发时的相关信息

例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

2、使用场景

（1）可以判断用户按下哪个键，比如按下回车键可以发布新闻

（2）可以判断鼠标点击了哪个元素，从而做相应的操作

3、语法：

元素.addEventListener(‘click’,function(e){

//执行代码

})

（1）在事件绑定的回调函数的第一个参数就是事件对象

（2）一般命名为event、ev、e

<body>
  <h3>事件对象</h3>
  <p>任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。</p>
  <hr>
  <div class="box"></div>
  <script>
    // 获取 .box 元素
    const box = document.querySelector('.box')

    // 添加事件监听
    box.addEventListener('click', function (e) {
      console.log('任意事件类型被触发后，相关信息会以对象形式被记录下来...');

      // 事件回调函数的第1个参数即所谓的事件对象
      console.log(e)
    })
  </script>
</body>

事件对象常用属性

1、 type

​ 获取当前的事件类型

2、clientX/clientY

​ 获取光标相对于浏览器可见窗口左上角的位置

3、offsetX/offsetY

​ 获取光标相对于当前DOM元素左上角的位置

4、key

​ 用户按下的键盘键的值

​ 现在不提倡使用key

5、target

用于表示触发事件的目标元素。

环境对象

1、环境对象：指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境

2、作用：弄清楚this的指向，可以让我们代码更简洁

  • 函数的调用方式不同，this 指代的对象也不同

  • 【谁调用， this 就是谁】 是判断 this 指向的粗略规则

3、直接调用函数，其实相当于是 window.函数，所以 this 指代 window

<script>
  // 声明函数
  function sayHi() {
    // this 是一个变量
    console.log(this);
  }

  // 声明一个对象
  let user = {
    name: '张三',
    sayHi: sayHi // 此处把 sayHi 函数，赋值给 sayHi 属性
  }
  
  let person = {
    name: '李四',
    sayHi: sayHi
  }

  // 直接调用
  sayHi() // window
  window.sayHi() // window

  // 做为对象方法调用
  user.sayHi()// user
	person.sayHi()// person
</script>

回调函数

1、把函数当做另外一个函数的参数传递，这个函数就叫回调函数

2、回调函数本质还是函数，只不过把它当成参数使用

3、使用匿名函数做为回调函数比较常见

<script>
  // 声明 foo 函数
  function foo(arg) {
    console.log(arg);
  }

  // 普通的值做为参数
  foo(10);
  foo('hello world!');
  foo(['html', 'css', 'javascript']);

  function bar() {
    console.log('函数也能当参数...');
  }
  // 函数也可以做为参数！！！！
  foo(bar);
</script>

事件流

1、事件流指的是事件完整执行过程中的流动路径

2、事件流经过的2个阶段 ：捕获阶段、冒泡阶段

在这里插入图片描述

（1）简单来说：捕获阶段是 从父到子 冒泡阶段是从子到父

（2）实际工作都是使用事件冒泡为主

事件捕获

1、事件捕获概念：从DOM的根元素开始去执行对应的事件 (从外到里)

2、事件捕获需要写对应代码才能看到效果

代码：

​ DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

3、说明：

（1）addEventListener第三个参数传入 true 代表是捕获阶段触发（很少使用）

（2）若传入false代表冒泡阶段触发，默认就是false

（3）若是用 L0 事件监听，则只有冒泡阶段，没有捕获

事件冒泡

1、事件冒泡概念:当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡

2、简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件

3、事件冒泡是默认存在的

4、L2事件监听第三个参数是 false，或者默认都是冒泡

<body>
  <h3>事件流</h3>
  <p>事件流是事件在执行时的底层机制，主要体现在父子盒子之间事件的执行上。</p>
  <div class="outer">
    <div class="inner">
      <div class="child"></div>
    </div>
  </div>
  <script>
    // 获取嵌套的3个节点
    const outer = document.querySelector('.outer');
    const inner = document.querySelector('.inner');
    const child = document.querySelector('.child');
		
    // html 元素添加事件
    document.documentElement.addEventListener('click', function () {
      console.log('html...')
    })
		
    // body 元素添加事件
    document.body.addEventListener('click', function () {
      console.log('body...')
    })

    // 外层的盒子添加事件
    outer.addEventListener('click', function () {
      console.log('outer...')
    })
    
    // 中间的盒子添加事件
    outer.addEventListener('click', function () {
      console.log('inner...')
    })
    
    // 内层的盒子添加事件
    outer.addEventListener('click', function () {
      console.log('child...')
    })
  </script>
</body>

执行上述代码后发现，当单击事件触发时，其祖先元素的单击事件也【相继触发】
结合事件流的特征，我们知道当某个元素的事件被触发时，事件总是会先经过其祖先才能到达当前元素，然后再由当前元素向祖先传递，事件在流动的过程中遇到相同的事件便会被触发。
再来关注一个细节就是事件相继触发的【执行顺序】，事件的执行顺序是可控制的，即可以在捕获阶段被执行，也可以在冒泡阶段被执行。

如果事件是在冒泡阶段执行的，我们称为冒泡模式，它会先执行子盒子事件再去执行父盒子事件，默认是冒泡模式。

如果事件是在捕获阶段执行的，我们称为捕获模式，它会先执行父盒子事件再去执行子盒子事件。

阻止冒泡

1、因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素

2、若想把事件就限制在当前元素内，就需要阻止事件冒泡

3、阻止事件冒泡需要拿到事件对象

4、阻止事件冒泡语法：

事件对象.stopPropagation()

注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

5、我们某些情况下需要阻止默认行为的发生，比如 阻止 链接的跳转，表单域跳转

阻止默认行为语法：e.preventDefault()

<body>
  <h3>阻止冒泡</h3>
  <p>阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。</p>
  <div class="outer">
    <div class="inner">
      <div class="child"></div>
    </div>
  </div>
  <script>
    // 获取嵌套的3个节点
    const outer = document.querySelector('.outer')
    const inner = document.querySelector('.inner')
    const child = document.querySelector('.child')

    // 外层的盒子
    outer.addEventListener('click', function () {
      console.log('outer...')
    })

    // 中间的盒子
    inner.addEventListener('click', function (ev) {
      console.log('inner...')

      // 阻止事件冒泡
      ev.stopPropagation()
    })

    // 内层的盒子
    child.addEventListener('click', function (ev) {
      console.log('child...')

      // 借助事件对象，阻止事件向上冒泡
      ev.stopPropagation()
    })
  </script>
</body>

结论：事件对象中的 ev.stopPropagation 方法，专门用来阻止事件冒泡。

解绑事件

1、on事件方式，直接使用null覆盖偶就可以实现事件的解绑

//绑定事件

Btn.οnclick=function(){
	alert(“点击”)
}

//解绑事件

Btn.οnclick=null

2、addEventListener方式，必须使用：

removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])

注意：匿名函数无法被解绑

Function  fn(){

		Alert(“点击了”)

}

//绑定事件

Btn.addEventListerner(‘click’,fn)

//解绑事件

Btn.removeEventListener(‘click’,fn)

事件委托

1、事件委托是利用事件流的特征解决一些开发需求的知识技巧

  • 优点：减少注册次数，可以提高程序性能

  • 原理：事件委托其实是利用事件冒泡的特点。

2、给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件。

3、实现：事件对象.target. tagName 可以获得真正触发事件的元素。

其他事件

页面加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

1、load 事件

  • 监听整个页面资源给 window 加

  • 监听页面所有资源加载完毕：给 window 添加 load 事件

    Window.addEventListener(‘load’,function(){
		//执行操作

}）
    • 注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

2、DOMContentLoaded事件

  • 给 document 加

  • 无需等待样式表、图像等完全加载

  • 当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

  • 事件名：DOMContentLoaded

  • 监听页面DOM加载完毕：给 document 添加 DOMContentLoaded 事件

document.addEventListener(‘DOMContentLoaded’,function(){//执行操作}）

元素滚动事件

  • 滚动条在滚动的时候持续触发的事件

  • 使用场合：很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部

  • 事件名：scroll

  • 监听整个页面滚动：给 window 或 document 添加 scroll 事件

//页面滚动事件

Window.addEventListener(‘scroll’,function(){
	//执行操作
}）
  • 监听某个元素的内部滚动直接给某个元素加即可

1、页面滚动事件-获取位置

(1)scrollLeft和scrollTop （属性）

  • 获取被卷去的大小

  • 获取元素内容往左、往上滚出去看不到的距离

  • 可以读取，也可以修改（赋值）

(2)尽量在scroll事件里面获取被卷去的距离

在这里插入图片描述

Div.addEventListener(‘scroll’,function(){

		Console.log(this.scrollTop)

})

(3)开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素

//页面滚动事件

Window.addEventListener(‘scroll’,function(){

//执行操作

//document.documentElement  是html元素获取方式

Const n=document.documentElement .scrollTop

Console.log(n)

}）

注意事项:

document.documentElement HTML 文档返回对象为HTML元素

2、页面滚动事件-滚动到指定的坐标

(1)、scrollTo() 方法可把内容滚动到指定的坐标

(2)、语法：元素.scrollTo(x, y)

例如：

//让页面滚动到Y轴1000像素的位置

Window.scrollTop(0,1000)

页面尺寸事件

1、会在窗口尺寸改变的时候触发事件：

  • resize

    Window.addEventListener(‘resize’,function(){

	//执行代码

}）

  • 检测屏幕宽度：

    Window.addEventListener(‘resize’,function(){

		Let w=document.doucumentElement.clientWidth

		Console.log(w)

}）

2、获取宽高：

  • 获取元素的可见部分宽高（不包含边框，margin，滚动条等）

  • clientWidth和clientHeight

元素尺寸与位置

使用场景：

  • 前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事。

  • 简单说，就是通过js的方式，得到元素在页面中的位置

  • 这样我们可以做，页面滚动到这个位置，就可以做某些操作，省去计算了

1、元素尺寸于位置-尺寸

（1）获取宽高：

  • 获取元素的自身宽高、包含元素自身设置的宽高、padding、border

  • offsetWidth和offsetHeight

  • 获取出来的是数值,方便计算

  • 注意:获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0

（2）获取位置：

  • 获取元素距离自己定位父级元素的左、上距离

  • offsetLeft和offsetTop 注意是只读属性

在这里插入图片描述

总结：

在这里插入图片描述

qq_47746614
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Button控件检测点击事件的四种方式
qq_38367681的博客
10-17 3572
Button检测点击共有四种方法（常用第三种） 1：外部监听类 MainActivity.java Button btnSecond=(Button)findViewById(R.id.btnSecond); btnSecond.setOnClickListener(new ExternalListenerClass(this)); ExternalListenerClass.java ...
JS中的事件监听
杜永康的博客
03-30 1万+
事件监听是Web开发中非常重要的一个概念，掌握了它的用法，可以让我们实现更加丰富和动态的交互效果。在实际开发中，我们需要根据具体的需求选择合适的事件类型和事件处理函数，以及注意事件传播和事件对象的相关问题。
【JS基础】事件监听
qq_42294095的博客
04-03 1236
hml、javaWeb、事件监听
JS监听事件
m0_74279698的博客
04-18 261
1.点击事件 click:鼠标点击左键触发 dblclick:鼠标双击左键出发 contextmenu:鼠标右键点击触发 2.焦点事件 focus:元素获得焦点触发 blur:元素失去焦点触发 3.鼠标事件 mouseenter:鼠标移入元素触发 mouseleave:鼠标移出元素触发 mousemove:鼠标在元素内部移动触发 mousedown:鼠标按钮被按下触发 mouseup:鼠标按钮被释放触发 4.键盘事件 keydown:某个键盘按
JS实现绑定事件监听的几种方法详解
wangxuanyang_zer的博客
08-08 5641
事件监听是用于捕获和响应特定事件的机制。在Web开发中，事件是指用户在网页上进行的交互操作，例如点击按钮、鼠标移动、键盘输入等。通过事件监听，我们可以注册事件处理函数，当特定事件发生时，这些函数将被调用。事件监听的作用包括：交互响应：通过监听用户的交互操作，可以实现对用户输入的实时响应。例如，当用户点击按钮时，可以执行相应的操作，如提交表单、加载数据、显示/隐藏元素等。用户体验增强：通过事件监听，可以改善用户体验，使网页更具交互性和动态性。
javascript事件绑定学习要点
10-22
主要介绍了javascript事件绑定学习要点,主要包含下面四个方面1.传统事件绑定的问题，2.W3C事件处理函数，3.IE事件处理函数，4.事件对象的其他补充，有需要的小伙伴可以参考下
javascript事件问题
10-29
咱们都知道，在DOM事件模型中，有捕获和冒泡两个阶段，而在IE事件模型中，只有冒泡阶段。写在html里的事件响应函数只有在冒泡阶段才会被执行
JavaScript 事件系统
10-29
今天比较系统都学习了 JavaScript 的事件系统。
JavaScript 事件处理 事件绑定 示例代码
最新发布
06-27
事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例...
jem.js:Javascript 事件管理器
06-04
jem.js（Javascript 事件管理器） 这是一个 Javascipt 库，可帮助我们编写事件驱动的 Javascript 代码。 没有依赖项，没有 jQuery，没有其他库。 这与 DOM 无关。 jem.js 用于您的自定义事件。 欢迎任何形式的...
html js按钮事件监听,JS监听事件
weixin_34175978的博客
06-08 3360
对象 - JS监听事件 ¶作者：KK发表日期：2016.2.21在准备讲解后面的window对象之前,这里将话题转回来事件这里平时咱们在一个元素里加个onclick属性,属性值写JS代码,这样就实现了监听body的click事件,一旦元素被点击时就会执行,概括来说这种叫做事件监听,我们部署代码去监听事件,事件不发生时什么效果都没有,事件发生后就会执行我们的监听代码其实要监听事件不一定要通过给元素添...
vue监听页面，无操作一分钟刷新页面。监听页面所有点击事件跟触摸事件，无操作1分钟重新调用后端接口刷新页面数据
qq_39695210的博客
10-13 2707
vue监听页面，无操作一分钟刷新页面，监听页面所有点击事件跟触摸事件，无操作1分钟重新调用后端接口刷新页面数据。
js监听点击事件
weixin_46125684的博客
02-11 7386
document.getElementById("myBtn").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World"; });
js实现监听button按钮点击事件触发file点击事件
温壁
04-26 6612
var oFile=document.getElementById('file');//button按钮input var oSong_url=document.getElementById('song_url');//file文件input oFile.addEventListener("click",fn,false); function fn(){ if(docu...
JavaScript原生实现事件监听及手动触发
qq_35134066的博客
07-30 1万+
我们有时候会需要通过js修改表单元素的状态, 因为不是通过页面交互而是js操作的, 所以不会触发我们写的监听事件.这时就需要通过js手动触发监听事件. jquery实现方法就是trigger('eventType') 原生实现: <input type="checkbox" id="chk"> document.querySelector('#chk').addEventListener('change', function() { console.log(this.chec
js实现监听事件的几种方式与事件冒泡/事件捕获
weixin_58430903的博客
07-02 4224
监听事件的几种方式与事件冒泡/事件捕获
js事件监听机制(事件捕获)总结
ZHYJH5421的博客
07-27 791
在前端开发过程中我们经常会遇到给页面元素添加事件的问题，添加事件的js方法也很多，有直接加到页面结构上的，有使用一些js事件监听的方法，由于各个浏览器对事件冒泡事件监听的机制不同，le浏览器只有事件冒泡，没有事件监听的机制，对于事件监听的兼容性问题是最大的难题： 1.直接把事件的方法写在页面结构上 function eventfun(){ //console.log(this...
javascript动态生成按钮并绑定点击事件
热门推荐
海峰的博客
10-07 4万+
前一个多月公司的前端开发人员离职，公司一直在招前端，基本上每天都有几个来面试的人，就这个面试频率，也才招了一个多月才招到。绝大部分都是死在了一道上机面试提上。题目很基础，但也很考基本功，基本上才3%左右的人做出来。当时我就在想以我的半吊子前端知识挑战一下这个题目。之前一直忙着把Android项目弄上线，修改bug，一直没时间。现在国庆节放假，发了一天时间把前端又看了下，然后理所当然的就写出来了，功
写一个button的点击事件处理函数
05-30
假设你的按钮的 HTML 代码如下： ```html <button id="myButton">点击我</button> ``` 你可以在 JavaScript 中使用以下代码来添加点击事件处理函数： ```javascript const myButton = document.querySelector('#myButton'); myButton.addEventListener('click', function() { // 在这里编写点击事件的处理逻辑 console.log('按钮被点击了！'); }); ``` 在这个例子中，我们首先使用 `document.querySelector` 方法获取了 ID 为 `myButton` 的按钮元素，然后使用 `addEventListener` 方法来为按钮添加点击事件处理函数。在函数中，我们可以编写需要执行的逻辑代码。例如，在这个例子中，我们使用 `console.log` 方法在控制台中输出了一条信息。 当用户点击按钮时，点击事件处理函数就会被触发执行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值