JS--事件(Event)--使用-CFANZ编程社区

简介

说明

本文介绍JavaScript对Event（事件）的使用。

官网

事件介绍 - 学习 Web 开发 | MDN

绑定方式

html标签

优点

同一个 dom 元素上，on 可以绑定多个同类型事件，会按顺序执行。

缺点

能写的代码比较短。

实例

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

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>

<body>

<div>
    <button id="btn" onclick="function1();function2()">点我</button>
</div>

<script>
    function function1() {
        console.log('函数1');
    }

    function function2() {
        console.log('函数2');
    }

</script>

</body>
</html>

结果：（两个函数按顺序执行）

JS--事件(Event)--使用_事件处理

JS：onxxx

优点

兼容性很好，所有浏览器都支持。
可写的代码比较多

缺点

同一个元素的同一种事件只能绑定一个函数（后面的函数会覆盖前边的函数）

用法

给事件绑定函数：

<script>
  var btn = document.getElementsByClassName('button');
  btn.onclick = function(){
    alert(0);
  }
</script>

清除事件的绑定：只需给该事件赋值为 null

<script>
  var btn = document.getElementsByClassName('button');
  btn.onclick = null;
</script>

实例

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

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>

<body>

<div>
    <button id="btn">点我</button>
</div>

<script>
    let btn = document.getElementById('btn');
    btn.onclick = function () {
        console.log('函数1');
    };
    btn.onclick = function () {
        console.log('函数2');
    };
</script>

</body>
</html>

结果（只运行了最后一个函数）

JS--事件(Event)--使用_绑定事件_02

JS：addEventListener

简介

说明

大部分浏览器支持addEventListener。只有IE8及之前的IE不支持，可用attachEvent替换。

优点

同一个元素的同种事件可以绑定多个函数，按照绑定顺序执行

缺点

兼容性略差（旧版浏览器不支持）

addEventListener与attachEvent区别

项	addEventListener	attachEvent
兼容性	支持：谷歌、火狐、IE11 不支持：IE8	不支持：谷歌、火狐、IE11 支持：IE8
顺序	按事件绑定的先后顺序执行	随机
this指向	this是当前绑定事件的对象	this是window
参数个数	三个参数	两个参数
事件命名	没有on	有on

示例

添加事件监听：addEventListener；清除事件监听：removeEventListener。二者参数一致。

参数说明

target.addEventListener(type, listener [, options]);

target.addEventListener(type, listener [, useCapture]);

第一个参数：事件名称。比如：click，mouseover

第二个参数：作为事件处理程序的函数

第三个参数：options（可选）

具有以下属性的附加可选对象：

once ：如果为 true ，那么会在被触发后自动删除监听器。
capture ：事件处理的阶段，我们稍后将在冒泡和捕获一章中介绍。

由于历史原因， options 也可以是 false/true ，它与 {capture: false/true} 相同。

passive ：如果为 true ，那么处理程序将不会调用 preventDefault()

第三个参数：useCapture（可选）

true：在捕获阶段调用。
false：在冒泡阶段调用。
若不提供第三个参数，则useCpature为false。

代码

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

<head>
    <meta charset="UTF-8">
    <title>This is title</title>
</head>

<body>

<div>
    <button id="btn">点我</button>
</div>

<script>
    let btn = document.getElementById('btn');
    btn.addEventListener("click", () => {
        console.log('函数1');
    })
    btn.addEventListener("click", () => {
        console.log('函数2');
    })

</script>

</body>
</html>