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

最新推荐文章于 2024-05-04 18:47:50 发布
最新推荐文章于 2024-05-04 18:47:50 发布
阅读量860 收藏
点赞数
分类专栏： 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左上角为坐标原点到鼠标所在点的水平距离

梦起孟心
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中的event讲解及一些常见案例
a1611107035的博客
11-08 1691
JavaScript中的event就是发生在dom元素上的事件，你也许已经使用过不少dom事件，但是event对象在js中有很多强大并且常用的功能。本文将讲解部分常用event的属性方法。
JS 之 事件Event对象详解（属性、方法、自定义事件）
weixin_45092437的博客
06-10 9440
​ 事件event对象是指在浏览器中触发事件时，浏览器会自动创建一个event对象，其中存储了本次事件相关的信息，包括事件类型、事件目标、触发元素等等。浏览器创建完event对象之后，会自动将该对象作为参数传递给绑定的事件处理函数，我们可以在事件处理函数中通过访问event对象的属性和方法，来获取事件的相关信息，并做出后续的逻辑处理。
JavaScript中的Event（事件）详解
时间静止
03-29 9662
Event 对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！ 事件句柄　(Event Handlers) HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 ...
vue中的event对象，就是原生js的event对象
最新发布
shanguangdelei的博客
05-04 332
事件传参带event事件时的写法：$event。可以修改按钮名称，可以事件传参。
js的event详解
qq_39207066的博客
08-01 644
js的event详解 event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 event对象只在事件发生的过程中才有效。 event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 例子 下面的例子检查鼠标是否在链接上单击，并且，如果shift键被按下...
前端document的方法合集
沈行的博客
08-12 2131
document的方法
2.01 JavaScript基础事件以及Event对象（原生态）.pdf
10-27
JavaScript 基础事件与 Event 对象 本文将详细介绍 JavaScript 中的基础事件和 Event 对象，包括事件的定义、EventTarget 接收事件接口、addEventListener、removeEventListener、dispatchEvent 方法 serta ...
JavaScript事件对象event用法分析
10-18
主要介绍了JavaScript事件对象event用法,结合实例形式分析了事件对象event中常用的属性、方法、相关操作技巧与注意事项,需要的朋友可以参考下
JavaScript程序设计——事件处理实验报告.docx
11-11
1．实现JavaScript事件注册；...2．实现JavaScript事件处理函数； 3．实现JavaScript鼠标和键盘事件； 4．实现JavaScript表单相关事件； 5．实现JavaScript字幕滚动事件； 6．实现JavaScript编辑事件；
JavaScript事件学习小结（三）js事件对象
11-23
相关阅读： JavaScript事件学习小结(五）js中事件类型之鼠标事件 ... JavaScript事件学习小结（一）事件流 ... javaScript事件学习小结（四）event的公共成员（属性和...JavaScript事件学习小结（三）js事件对象 //www.
js中Event-事件详解
chenminglvming的博客
04-13 3266
今天梦想创业俱乐部的陈明吕老师跟大家分享的是js当中event事件的详解1。大家应该都知道，想要处理某个事件的时候，我们都会赋值一函数给其事件去触发。目前我们的写法是：元素.onclick = function(){........};那还有没有其他的事件触发方式的写法呢？现在就一起来跟着陈明吕老师一起去看看另一种的写法吧。
原生JS十四（事件对象）
CSDN_GMC的博客
04-06 514
原生JS--事件对象一. 事件对象二. 事件冒泡和捕获事件捕获事件冒泡三. 事件监听添加事件监听删除事件监听普通事件绑定和事件监听的区别oncontextmenu 事件四. 事件委托五. event对象六. this指针的指向问题 一. 事件对象 事件有DOM0和DOM2的区别 DOM0就是直接通过事件写到html中的事件 DOM2就是通过addEventListener绑定/监听事件 二. 事件...
102_自定义事件
aihiao的专栏
11-07 213
1. Event() 1.1. Event()构造函数, 创建一个新的事件对象Event。 1.2. 语法 var event = new Event(typeArg, eventInit); 1.3. typeArg是DOMString类型, 表示所创建事件的名称。 1.4. eventInit可选, 是EventInit类型的字典, 接受以下字段: 1.4.1. "bubbles"可选, Boolean类型, 默认值为false, 表示该事件是否冒泡。 1.4.2. "cancelabl
事件模型
十九万里的博客
04-27 272
文章写的非常好，转载一下 事件模型 事件模型 来自《JavaScript 标准参考教程（alpha）》，by 阮一峰 目录EventTarget 接口EventTarget.addEventListener()EventTarget.removeEventListener()EventTarget.dispatchEvent()监听函数HTML 的 on- 属性元素节点的事件属性EventTarget.addEventListener()小结this 的指向事件的传播事件的代理Event 对象概述Ev.
自定义事件与触发 Event()
shenwen5225的博客
05-14 785
参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Event/Event 浏览器支持： Event() 构造函数, 创建一个新的事件对象 Event。 语法 new Event(type, option); 参数说明： type 是DOMString 类型，表示所创建事件的名称。 option 可设置以下属性： bubbles 默认值为 false，表示该事件是否冒泡。 cancelable 默认值为 false， 表示该事件能否被取消。 com
javascript使用dispatchEvent解决如safari等高级浏览器js点击click失效的问题
qq_36250578的博客
05-31 3463
上传功能，我们一般是另外做一个按钮将click函数绑定到上面去。最近给客户做头像上传的功能，在安卓机上试验没问题，但是使用ios的话，会出现上传按钮点击不了。查了一些资料应该是一些比较高级的浏览器对display为none的节点的一些限制。下面是我的解决办法使用dispatchEvent事件分发，来代替直接对file的click函数调用。$(document).on('click','#erer'...
自定义事件的触发 dispatchEvent 的用法
热门推荐
weixin_42333548的博客
12-04 3万+
window.addEventListener && window.dispatchEvent 一、标准浏览器提供了可供元素触发的方法：element.dispatchEvent()，在使用之前，需要创建和初始化，下面是具体的用法： vue中举例： 1.通过 var event = document.createEvent("HTMLEvents"); 这个方法创建一个eve...
【JavaScript 教程】事件——Event 对象
web前端开发
07-02 698
作者 | 阮一峰概述事件发生以后，会产生一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，所有的事件都是这个对象的实例，或者说继承了Event.pro...
JavaScript：EventUtil.js
山水子农
06-06 1678
// JavaScript Document var EventUtil={ //添加事件 addHandler:function(element,type,handler){ if(element.addEventListener){//DOM2级 element.addEventListener(type,handler,false); }else if

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值