Web APIs学习【二】（事件与事件对象）

最新推荐文章于 2024-05-01 09:00:00 发布

greenhand coder

最新推荐文章于 2024-05-01 09:00:00 发布

阅读量189

点赞数

分类专栏：前端学习笔记文章标签： javascript js dom

本文链接：https://blog.csdn.net/qq_43249043/article/details/108956153

版权

文章目录

- 1. 事件高级

1. 事件高级

1.1 注册事件

1.1.1 注册事件概述

给元素添加事件，称为注册事件
注册事件有两种方式：传统方式和方法监听注册方式

1.1.1.1 传统注册方式

事件为on开头，如onclick
注册事件具有唯一性，后注册的函数会把先注册的覆盖

<body>
<button id="btn1">tradition</button>

<script>
  var btn1 = document.querySelector('#btn1');

  btn1.onclick = function () {
    
    alert('hi');
  };
  btn1.onclick = function () {
    
    alert('how are u')
  };
  // => alert('how are u')
</script>
</body>

1.1.1.2 方法监听注册方式

w3c标准，同一个元素可以注册多个监听器，按注册顺序执行
ie9前用attachEvent()代替
eventTarget.addEventListener(type, listener, useCapture)
- type: 事件类型，click, mouseover…
- listener: 事件处理函数，事件发生时会调用该监听函数
- useCapture: 可选参数，布尔类型

<body>
<button id="btn2">standard</button>
<script>
  var btn2 = document.querySelector('#btn2');

  btn2.addEventListener('click', function () {
    
    alert('hi');
  })
  btn2.addEventListener('click', function () {
    
    alert('how are u');
  })
  // => alert('hi') alert('how are u')
</script>
</body>

1.2 删除事件

1.2.1 传统方式

eventTarget.onclick = null

1.2.2方法监听方式

eventTarget.removeEventListener(type, listener, useCapture)
eventTarget.detachEvent(eventName, callback) （兼容ie9以前）

<body>
<button>button</button>
<script>
  var btn = document.querySelector('button');  

  btn

最低0.47元/天解锁文章

greenhand coder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web APIs学习【二】（事件与事件对象）

文章目录1. 事件高级1.1 注册事件1.1.1 注册事件概述1.1.1.1 传统注册方式1.1.1.2 方法监听注册方式1.2 删除事件1.2.1 传统方式1.2.2方法监听方式1.3 DOM事件流1.4 事件对象1.4.1 事件对象概述1.4.2 事件对象的使用1.4.3 兼容性写法1.4.4 事件对象的常用属性1.4.5 事件委托1.4.6 常用的鼠标事件1.4.6.1常用的鼠标事件1.4.6.2 鼠标事件对象1.4.7 常用键盘事件1.4.7.1 常用键盘事件1.4.7.2 键盘事件对象1.4.7.
复制链接

扫一扫