JavaScript基础学习——事件以及Event对象（原生态）

最新推荐文章于 2024-09-10 15:36:00 发布
最新推荐文章于 2024-09-10 15:36:00 发布
阅读量1.6k 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41890177/article/details/114268566
版权

目录

1、事件

2、EventTarget接收事件接口

2.1、addEventListener()：绑定事件监听函数，实现监听

2.2、removeEventListener()：移除事件监听

2.3、dispatchEvent()：自动触发用户自定义事件

3、JS常用事件

3.1、UI事件

3.1.1、onload：页面所有DOM元素加载完成后自动触发 (掌握)

3.1.2、onunload：当页面关闭或被切换到其它时触发，一般用于做一些善后处理

3.1.3、onabort：忽略错误事件

3.1.4、onerror：有页面有错时将触发该事件

3.1.5、onselect：选中表单元素中的文本内容时触发

3.1.6、onresize：改变窗口大小时触发(掌握)

3.1.7、onscroll：滚动页面滚动条时触发(掌握)

3.2 、焦点事件（一般作用在表单组件上）

3.2.1、onfocus:获得焦点时触发  （掌握）

3.2.2、onblur:失去焦点时触发  （掌握）

3.2.3、onfocusin:获得焦点时触发（在子元素上也会触发，一般与onfocusout结合使用）

3.2.4、onfocusout:失去焦点时触发（在子元素上也会触发，一般与onfocusin结合使用）

3.3 鼠标事件

3.3.1、onclick：单击事件  （掌握）

3.3.2、ondblclick：双击事件

3.3.3、onmousedown：按下鼠标键  （掌握）

3.3.4、onmouseup：松开鼠标键  （掌握）

3.3.5、onmousemove：移动鼠标键  （掌握）

3.3.6、onmouseover：鼠标移入（经过）（会触发冒泡事件）  （掌握）

3.3.7、onmouseout：鼠标离开（会触发冒泡事件）  （掌握）

3.3.8、onmouseenter：鼠标移入（不会触发冒泡事件）  （掌握）

3.3.9、onmouseleave：鼠标离开（不会触发冒泡事件）  （掌握）

3.4 鼠标滚轮事件

3.4.1、onmousewheel

3.5 键盘事件（一般用于表单组件中）

3.5.1、onkeydown：按下键盘键  （掌握）

3.5.2、onkeyup：松开键盘键  （掌握）

3.5.3、onkeypress：输入字符（等价于onkeydown+onkeyup）  （掌握）

4、事件对象

4.1 什么是事件对象？

4.2 事件对象常用的属性和方法

4.3 事件对象兼容写法

4.3.1、event对象兼容写法

4.3.2、event目标对象兼容写法

4.3.3、阻止默认形为兼容写法

4.3.4、阻止冒泡的兼容写法

5.网页中常用坐标

5.1 获取屏幕的宽高

5.2 获得窗口位置及大小

5.3 元素对象的信息

5.4 event对象中的坐标信息

​​​​​​​


1、事件

事件指的是文档或浏览器窗口中发生的一些特定的交互瞬间，也可以理解为：作用在对象上的操作（动作）。

事件是可以被JS监听到的行为。一般在开发中，是通过触发DOM来完成事件操作。

例1：点击box时控制台会进行提示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box">box</div>
</body>
<script>
  document.querySelector('.box').onclick = function () {
    console.log("test");
  }
</script>

</html>

或者将方法单独写出也是可以的，但是注意千万不要再在方法名后加()

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box">box</div>
</body>
<script>
  function show(){
    console.log("test2");
  }

  document.querySelector('.box').onclick=show
</script>

</html>

2、EventTarget接收事件接口

EventTarget是一个由可以接收事件的对象来实现接口，并且为它们创建监听器。

三个接口：

2.1、addEventListener()：绑定事件监听函数，实现监听

语法：DOM.addEventListener(type,listener[,useCapture])
type:事件名
listener:监听函数
useCapture:是否为事件捕获（true/false）默认是false

例2：创建addEventListener()，点击box时控制台会进行提示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box">box</div>
</body>
<script>
  document.querySelector('.box').addEventListener('click', function () {
    console.log('我是click事件')
  }, false)
</script>

</html>

与之前的方法不同的是，这里的type可以任意填写，不局限于点击事件，还可以是其余的事件。也可以将它单独写成一个方法，需要什么事件，将事件名当参数传进去即可。


2.2、removeEventListener()：移除事件监听

语法：DOM.removeEventListener(type,listener[,useCapture])
type:事件名
listener:监听函数
useCapture:是否为事件捕获（true/false）

例3：添加removeEventListener()，点击box时控制台不会进行提示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box">box</div>
</body>
<script>
  function click() {
    console.log('click');
  }

  document.querySelector('.box').addEventListener('click', click)
  document.querySelector('.box').removeEventListener('click', click)
</script>

</html>

removeEventListener()就是和addEventListener()相辅相成


2.3、dispatchEvent()：自动触发用户自定义事件

语法：DOM.dispatchEvent(event)
event:用户自定义事件

例4：创建自动触发用户的自定义事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  document.body.addEventListener('myEvent', function () {
    this.style.background = 'red'
  })

  // 创建myEvent事件实例
  var event = new Event('myEvent')

  // 触发事件
  document.body.dispatchEvent(event)
</script>

</html>

自动触发顾名思义就是程序会自动执行，不需要用户进行其他不必要的操作

 

3、JS常用事件

3.1、UI事件

3.1.1、onload：页面所有DOM元素加载完成后自动触发 (掌握)

例5：onload()事件

方法一

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script>
  window.onload = function () {
    console.log(document.getElementsByClassName('box')[0]);
  } 
</script>

<body>
  <div class="box">box</div>
</body>

</html>

方法二

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script>
  onload = function () { //如果DOM对象是window，window可以忽略
    console.log(document.getElementsByClassName('box')[0]);
  }
</script>

<body>
  <div class="box">box</div>
</body>

</html>

方法三

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box">box</div>

  <a href="https://baidu.com" target="_blank">百度</a>

  <input type="text" id="name">
</body>
<script>
   document.body.onload = function () {
     console.log(document.getElementsByClassName('box')[0]);
   }
</script>

</html>

以上三种方式的返回结果都是相同的

 

3.1.2、onunload：当页面关闭或被切换到其它时触发，一般用于做一些善后处理

例6：onunload()事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="box">box</div>
</body>
<script>
  // 当页面被关闭或被切换时，一般用于垃圾回收处理、清空缓存等操作
  onunload = function () {
    console.log('close');
  }
</script>

</html>

 

3.1.3、onabort：忽略错误事件

例7：onabort()事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box">box</div>
</body>
<script>
  //onabort 忽略错误事件
  window.onabort = function () {
    console.log('onabort');
  }
</script>

</html>

3.1.4、onerror：有页面有错时将触发该事件

例8：onerror()事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box">box</div>
</body>
<script>
  //onerror 有页面错误时触发事件
  window.onerror = function () {
    console.log('onerror');
  }

</script>

</html>

3.1.5、onselect：选中表单元素中的文本内容时触发

例9：onselect()事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" id="name">
</body>
<script>
  //onselect 选中表单元素中的文本内容时触发
  document.querySelector('#name').onselect = function () {
    console.log('select');
  }
</script>

</html>

3.1.6、onresize：改变窗口大小时触发(掌握)

例10：onresize()事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
<script>
  //掌握 onresize 改变窗口大小时触发 
  window.onresize = function () {
    console.log(window.innerWidth);
  }
</script>

</html>

3.1.7、onscroll：滚动页面滚动条时触发(掌握)

例11：onscroll()事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  //滚动页面滚动条时触发
  window.onscroll = function () {
    console.log(Math.round(window.scrollY))
  }

</script>

</html>

3.2 、焦点事件（一般作用在表单组件上）

3.2.1、onfocus:获得焦点时触发  （掌握）

3.2.2、onblur:失去焦点时触发  （掌握）

例12：onfocus和onblur事件的结合使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="">
    <input type="text"><br>
    <input type="text"><br>
  </form>
</body>
<script>
  var boxes = document.querySelectorAll('input')

  for (var i in boxes) {
    console.log(boxes[i]);

    //掌握 onfocus 获得焦点
    boxes[i].onfocus = function () {
      this.value = 'text'
    }

    //掌握 onblur 失焦
    boxes[i].onblur = function () {
      this.value = ''
    }
  }

</script>

</html>

 

3.2.3、onfocusin:获得焦点时触发（在子元素上也会触发，一般与onfocusout结合使用）

3.2.4、onfocusout:失去焦点时触发（在子元素上也会触发，一般与onfocusin结合使用）

例13：onfocusin和onfocusout事件的结合使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
    <p onfocusin="setValue()" onfocusout="getValue()">
      <input type="text" class="price">
    </p>
</body>
<script>
  function setValue() {
    document.querySelector('.price').value = 99.99
  }

  function getValue(){
    console.log(document.querySelector('.price').value);
  } 
</script>

</html>

3.3 鼠标事件

3.3.1、onclick：单击事件  （掌握）

例14：使用onclick事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box">box</div>
</body>
<script>
  var box = document.getElementsByClassName('box')[0]

  box.onclick = function () {
    console.log('click');
  }

</script>

</html>

3.3.2、ondblclick：双击事件

例15：使用ondblclick事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="box">box</div>
</body>
<script>
  var box = document.getElementsByClassName('box')[0]

  box.ondblclick = function () {
   console.log('ondblclick')
  }
</script>

</html>

3.3.3、onmousedown：按下鼠标键  （掌握）

3.3.4、onmouseup：松开鼠标键  （掌握）

例16：onmousedown和onmouseup事件结合使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box">box</div>
</body>
<script>
  var box = document.getElementsByClassName('box')[0]

  box.onmousedown = function () {
    console.log('mousedown');
  }

  box.onmouseup = function () {
    console.log('mouseup');
  }
</script>

</html>

3.3.5、onmousemove：移动鼠标键  （掌握）

例17：使用onmousemove事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>

  document.body.onmousemove = function (e) {
    console.log(e.clientX, e.clientY);
  }

</script>

</html>

3.3.6、onmouseover：鼠标移入（经过）（会触发冒泡事件）  （掌握）

3.3.7、onmouseout：鼠标离开（会触发冒泡事件）  （掌握）

如果多个元素之间是一个包含的关系，且绑定同一个事件，移到子元素上，父元素上绑定的事件也会触发，它是由子元素向父元素触发，这种情况我们叫它为事件冒泡，说白了事件冒泡就是子发生父必发生

例18：onmouseover和onmouseout事件结合使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .father {
    width: 400px;
    height: 400px;
    background-color: #0ff;
  }

  .son {
    width: 200px;
    height: 200px;
    background-color: #f00;
  }
</style>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
<script>
  var father = document.getElementsByClassName('father')[0]
  var son = document.getElementsByClassName('son')[0]

  father.onmouseover = function () {
    console.log('---father----mouseover');
  }
  son.onmouseover = function () {
    console.log('---son----mouseover');
  }

  father.onmouseout = function () {
    console.log('----father----onmouseout')
  }
  son.onmouseout = function () {
    console.log('----son----onmouseout')
  } 
</script>

</html>

3.3.8、onmouseenter：鼠标移入（不会触发冒泡事件）  （掌握）

3.3.9、onmouseleave：鼠标离开（不会触发冒泡事件）  （掌握）

例19：onmouseenter和onmouseleave事件结合使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
<script>
  var father = document.getElementsByClassName('father')[0]
  var son = document.getElementsByClassName('son')[0]

  father.onmouseenter = function(){
    console.log('----father----onmouseenter')
  }
  son.onmouseenter = function(){
    console.log('----son----onmouseenter')
  }

  father.onmouseleave = function(){
    console.log('----father----onmouseleave')
  }
  son.onmouseleave = function(){
    console.log('----son----onmouseleave')
  }

</script>

</html>

3.4 鼠标滚轮事件

3.4.1、onmousewheel

需要注意的是火狐并不支持onmousewheel，而是要使用mousescroll实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  window.onmousewheel = function (e) {
    console.log(e.deltaY);
  }
</script>

</html>

3.5 键盘事件（一般用于表单组件中）

3.5.1、onkeydown：按下键盘键  （掌握）

例20：使用onkeydown事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text">
</body>

<script>
  var input = document.querySelector('input')
  input.onkeydown = function (e) {
    if (e.keyCode == 13) {
      console.log(this.value);
    }
  }
</script>

</html>

3.5.2、onkeyup：松开键盘键  （掌握）

3.5.3、onkeypress：输入字符（等价于onkeydown+onkeyup）  （掌握）

例21：使用onkeypress事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text">
</body>

<script>
  var input = document.querySelector('input')

  input.onkeypress = function (e) {
     console.log(e.keyCode); //keyCode用来获取输入的字符的ACSII码值  
  }
</script>

</html>

注意：onkeydown和onkeyup一般用来获取按下的键的键值，功能键也有键值，不区分字母大小写；onkeypress用来获取输入的字符的ASCII码值，不识别功能键，区分字母大小写

 

4、事件对象

4.1 什么是事件对象？

事件发生之后，全产生一个事件对象，作为参数传给监听函数。浏览器的原生提供一个Event对象，所有的事件都是这个对象的实例。

语法：new Event(type,option)

type:事件名（一般是用户自定义的）
option:事件对象的配置，有两个重要的参数：
bubbles:true/false,是否允许冒泡
cancelable:true/false,表示事件是否可取消

例22：创建一个事件对象

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="text">text</div>
</body>
<script>
  //事件对象实例
  var event = new Event(
    'watch',//事件对象的配置
    {
      bubbles: true,//是否允许冒泡
      cancelable: false//表示事件是否可取消
    }
  )

  //事件监听
  document.querySelector('.text').addEventListener('watch', fn)

  function fn() {
    console.log('这是自定义事件的触发');
  }

  //触发事件
  document.querySelector('.text').dispatchEvent(event)
</script>

</html>

4.2 事件对象常用的属性和方法

e.target: 获取当前事件触发的DOM节点
e.type:当前触发的事件名（只读）
e.eventPhase:返回当前事件所处的阶段（只读）
      0：事件没有产生
      1：处于捕获阶段
      2：事件到达了目标点
      3：事件处于冒泡阶段
e.cancelable:表示事件是否可以取消（只读）
e.preventDefault():阻止默认形为
e.stopPropagation():阻止冒泡

4.3 事件对象兼容写法

4.3.1、event对象兼容写法

var e = event || window.event

例23：测试event对象兼容写法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="box" onclick="getEvent(event)">事件对象</div>
</body>
<script>
  function getEvent(e) {
    var e = e || window.event
    console.log(e);
  }

</script>

</html>

4.3.2、event目标对象兼容写法

event.target || event.srcElement

例24：测试event目标对象兼容写法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="box" onclick="getEvent(event)">事件对象</div>
</body>
<script>
  function getEvent(e) {
    var target = e.target || e.srcElement
    console.log(target);
    target.style.color = 'red'
  }

</script>

</html>

4.3.3、阻止默认形为兼容写法

event.preventDefault ? event.preventDefault() : event.returnValue = false

例25：测试阻止默认形为兼容写法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a href="https://baidu.com">百度</a>
</body>
<script>
  document.getElementsByTagName('a')[0].onclick = function (e) {
    var e = e || window.event
    e.preventDefault ? e.preventDefault() : e.returnValue = false
  }

</script>

</html>

4.3.4、阻止冒泡的兼容写法

event.stopPropagation ? event.stopPropagation() : event.cancelBublle = true

例26：测试阻止冒泡的兼容写法
​​​​​

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  #father {
    width: 400px;
    height: 400px;
    background-color: #f00;
  }

  #son {
    width: 200px;
    height: 200px;
    background-color: #ff0;
  }
</style>

<body>
  <div id="father">
    <div id="son"></div>
  </div>
</body>
<script>
  var father = document.getElementById('father')
  var son = document.getElementById('son')

  father.onclick = function () {
    console.log('father')
  }
  son.onclick = function (e) {
    var e = e || window.event;
    e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
    console.log('son');
  }
</script>

</html>

5.网页中常用坐标

5.1 获取屏幕的宽高

screen.width //屏幕的宽
screen.height //屏幕的高
screen.availWidth //屏幕可用宽度 屏幕的像素高度减去系统部件高度之后的值
screen.availHeight //屏幕可用高度 屏幕的像素宽度减去系统部件宽度之后的值（不包含任务栏的高度）


5.2 获得窗口位置及大小

window.screenTop //窗口顶部距屏幕顶部的距离
window.screenLeft //窗口左侧距屏幕左侧的距离
window.innerWidth //窗口中可视区域(viewpoint)的宽
window.innerHeight //窗口中可视区域(viewpoint)的高度 该值与浏览器是否显示菜单栏等因素有关
window.outerWidth //浏览器窗口本身的宽度(可视区域宽度+浏览器边框宽度)
window.outerHeight //浏览器窗口本身的高度

注意：chrome在最大化时浏览器窗口没有边框宽度,非最大化时有8px边框、火狐和IE上下左右有8px的边框宽度


5.3 元素对象的信息

盒子真实大小：
    boxWidth = 2*margin + 2*border + 2*padding + width
    boxHeight = 2*margin + 2*border + 2*padding + height

    clientWidth ：在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
    clientWidth = 2*padding + width - scrollbarWidth

    clientHeight：在页面上返回内容的可视高度（不包括边框，边距或滚动条）
    clientHeight = 2*padding + height - scrollbarHeight

    offsetWidth ：返回元素的宽度包括边框和填充，但不包括边距
    offsetWidth = 2*border + 2*padding + width

    offsetHeight ：返回元素的高度包括边框和填充，但不包括边距
    offsetHeight = 2*border + 2*padding + height

    offsetLeft： 获取对象相对于版面或由 offsetLeft属性指定的父坐标的计算左侧位置
    offsetTop ： 获取对象相对于版面或由 offsetTop属性指定的父坐标的计算顶端位置

    scrollWidth ：返回元素的整个宽度（包括带滚动条的隐蔽的地方）
    scrollWidth = 2*padding + width

    scrollHeight ：返回整个元素的高度（包括带滚动条的隐蔽的地方）
    scrollHeight = 2*padding + width

    scrollTop：向下滑动滚动块时元素隐藏内容的高度。不设置时默认为0，其值随着滚动块滚动而变化
    scrollLeft： 向右滑动滚动块时元素隐藏内容的宽度。不设置时默认为0，其值随着滚动块滚动而变化


5.4 event对象中的坐标信息


    event.pageX:相对整个页面的坐标，以页面的左上角为坐标原点到鼠标所在点的水平距离（IE8不支持）
    event.pageY:相对整个页面的坐标，以页面的左上角为坐标原点到鼠标所在点的垂直距离（IE8不支持）

    event.clientX:相对可视区域的坐标，以浏览器可视区域左上角为坐标原点到鼠标所在点的水平距离
    event.clientY:相对可视区域的坐标，以浏览器可视区域左上角为坐标原点到鼠标所在点的垂直距离

    event.screenX:相对电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的水平距离
    event.screenY:相对电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的垂直距离

    event.offsetX:相对于自身的坐标，以自身的padding左上角为坐标原点到鼠标所在点的水平距离
    event.offsetY:相对于自身的坐标，以自身的padding左上角为坐标原点到鼠标所在点的水平距离

梦起孟心
关注
专栏目录
2.01 JavaScript基础事件以及Event对象（原生态）.pdf
10-27
JavaScript 基础事件与 Event 对象 本文将详细介绍 JavaScript 中的基础事件和 Event 对象，包括事件的定义、EventTarget 接收事件接口、addEventListener、removeEventListener、dispatchEvent 方法 serta ...
js-event(事件对象)详解
热门推荐
顺其自然~专栏
04-25 1万+
1、事件对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 什么时候会产生Event 对象呢? 例如：当用户单击某个元素的时候，我们给这个元素注册的事件就会触发，该事件的本质就是一个函数，而该函数的形参接收一个event对象。 事件通常与函数结合使用，函数不会在事件发生前被执行！ 使用场景即： var oDIv = document.getElementById('box'); oDiv.onclick = function(...
JS 之 事件Event对象详解（属性、方法、自定义事件）
weixin_45092437的博客
06-10 1万+
​ 事件event对象是指在浏览器中触发事件时，浏览器会自动创建一个event对象，其中存储了本次事件相关的信息，包括事件类型、事件目标、触发元素等等。浏览器创建完event对象之后，会自动将该对象作为参数传递给绑定的事件处理函数，我们可以在事件处理函数中通过访问event对象的属性和方法，来获取事件的相关信息，并做出后续的逻辑处理。
【JavaScript】事件对象Event及其常见属性详解
最新发布
lph159的博客
09-10 1111
event对象是浏览器自动生成的对象，当用户与页面进行交互时（如点击、键盘输入、鼠标移动等），事件触发时就会自动传递给事件处理函数。event对象包含了与事件相关的各种信息，开发者可以通过访问event对象的属性来获取具体的事件细节，并执行相应的操作。event对象是 JavaScript 事件处理中的核心，它为开发者提供了丰富的属性和方法来获取事件信息并对用户交互进行处理。了解并掌握event对象及其常见属性，可以帮助开发者更好地处理页面交互事件，并提高用户体验。
new Event 创建 JavaScript 自定义事件
weixin_51747462的博客
05-09 2119
new Event 创建 JavaScript 自定义事件；new Event()和new CustomEvent()的区别
JS--事件(Event)--机制/原理
IT利刃出鞘的博客
01-02 1985
​ 说明 本文介绍JavaScript中的事件的机制。包括：事件的捕获与冒泡，事件的流程。 官网 事件大全：事件参考 | MDN JavaScript事件介绍 事件 是某事发生的信号。所有的 DOM 节点都生成这样的信号（但事件不仅限于 DOM）。 我们也可以自定义事件。
JavaScript里的event
EmotionComputer
11-17 3363
首先看一段js冒泡的代码，里面有用到event &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body onclick="parentDivBtn()"&gt; &lt;div id="div1&quo
JavaScript事件对象event用法分析
10-18
在JavaScript编程中，事件对象event是处理用户交互的关键概念，它允许开发者在用户触发诸如点击、按键、移动等事件时执行特定的代码。了解事件对象的用法对于提高网站的交互性和用户体验至关重要。 事件对象event...
JavaScript程序设计——事件处理实验报告.docx
11-11
- **事件处理函数**：定义函数来响应特定的事件，这些函数可以访问和修改事件对象以及周围环境。 - **鼠标和键盘事件**：通过上面提到的事件类型实现用户与页面的交互。 - **表单相关事件**：利用表单事件改进用户...
JavaScript学习笔记之JS事件对象
10-24
JavaScript事件对象是当事件发生时，浏览器自动创建的一个包含事件相关信息的临时对象。它保存了事件发生时的各种信息，比如事件的类型、鼠标坐标、键盘按键信息等。通过事件对象，我们可以访问到触发事件的元素、...
JS 之 Event 对象
Happy Simon
01-12 2328
今天跟大家分享下JS 之 Event 对象的知识。 1 概述 事件发生以后，会产生一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，所有的事件都是这个对象的实例，或者说继承了Event.prototype对象。 Event对象本身就是一个构造函数，可以用来生成新的实例。 event = new Event(type, options); Event构造函数接受两个参数。第一个...
JavaScript中的Event（事件）详解
时间静止
03-29 9728
Event 对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！ 事件句柄　(Event Handlers) HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 ...
JavaScript中的event讲解及一些常见案例
a1611107035的博客
11-08 1768
JavaScript中的event就是发生在dom元素上的事件，你也许已经使用过不少dom事件，但是event对象在js中有很多强大并且常用的功能。本文将讲解部分常用event的属性方法。
事件派发触发以及自定义事件派发dispatchEvent-——————派发键盘事件
阿牛哥的博客
09-06 1332
dispatch意为“调度”、“派遣”，event为“事件”。所以dispatchEvent即向指定事件目标派发一个事件，并以合适的顺序触发受影响的事件目标。简单来说就是，一般的事件触发都是用户进行某些操作时才会触发，而使用dispatchEvent就可以在代码中手动触发事件了alert('okk!');} , false);//为元素绑定事件监听 var event = new Event('click');//创建一个click事件 btn . dispatchEvent(event);
js 监听事件传值new CustomEvent和new Event的区别
weixin_46451295的博客
03-03 2310
Event 和 Custom 都是自定义事件，区别在于CustomEvent可传参数数据。 1. new Event 不可传参 window.addEventListener(‘bkmorphoapi:error’, (e) => { console.log(77,e,e.detail) }); setTimeout(() => { console.log(8989) // 触发, 即弹出文字 执行监听的事件 window.dispatchEvent(new Event('bkmorphoa
js的event详解
qq_39207066的博客
08-01 698
js的event详解 event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 event对象只在事件发生的过程中才有效。 event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 例子 下面的例子检查鼠标是否在链接上单击，并且，如果shift键被按下...
js中的event详解
woxingx的博客
01-07 1万+
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 event对象只在事件发生的过程中才有效。 event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 event中的一些经常用到的属性： altKey, button, cancelBubb
js原生事件
SK_study的博客
03-26 2710
原生 js 事件，js底层深入学习
前端document的方法合集
沈行的博客
08-12 2199
document的方法
Event对象：事件状态与属性解析
"本文将深入探讨Event对象，它在JavaScript中的重要性以及如何利用其属性和方法处理事件。Event对象代表了事件的状态，包括触发事件的元素、鼠标的坐标和状态、按键信息等。理解Event对象对于开发交互式网页至关重要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值