JavaScript 事件

了解更多请访问https://www.runoob.com/jsref/dom-obj-event.html

一、关于事件

1、什么是事件

事件就是在文档中或者在浏览器窗口中通过某些动作触发。比如，单击，鼠标经过，键盘按下等。事件通常和函数结合使用。

事件的作用：

(1)各个元素之间可以借助事件来进行交互

(2)用户和页面之间也可以通过事件来交互

(3)后端和页面之间也可以通过事件来交互（减缓服务器的压力）

二、事件的使用（重点）

1、HTML事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

语法：on+事件=‘函数();……‘

实例

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>

以上实例中，JavaScript 代码将修改 id=”demo” 元素的内容。

2、事件类型

（1）鼠标事件

属性	描述	DOM
onclick	当用户点击某个对象时调用的事件句柄。	2
oncontextmenu	在用户点击鼠标右键打开上下文菜单时触发
ondblclick	当用户双击某个对象时调用的事件句柄。	2
onmousedown	鼠标按钮被按下。	2
onmouseenter	当鼠标指针移动到元素上时触发。	2
onmouseleave	当鼠标指针移出元素时触发	2
onmousemove	鼠标被移动。	2
onmouseover	鼠标移到某元素之上。	2
onmouseout	鼠标从某元素移开。	2
onmouseup	鼠标按键被松开。	2

（2）键盘事件

属性	描述	DOM
onkeydown	某个键盘按键被按下。	2
onkeypress	某个键盘按键被按下并松开。	2
onkeyup	某个键盘按键被松开。	2

（3）表单事件

属性	描述	DOM
onblur	元素失去焦点时触发	2
onchange	该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)	2
onfocus	元素获取焦点时触发	2
onfocusin	元素即将获取焦点时触发	2
onfocusout	元素即将失去焦点时触发	2
oninput	元素获取用户输入时触发	3
onreset	表单重置时触发	2
onsearch	用户向搜索域输入文本时触发 ( <input="search">)
onselect	用户选取文本时触发 ( <input> 和 <textarea>)	2
onsubmit	表单提交时触发	2

（4）剪贴板事件

属性	描述	DOM
oncopy	该事件在用户拷贝元素内容时触发
oncut	该事件在用户剪切元素内容时触发
onpaste	该事件在用户粘贴元素内容时触发

3、event: 事件对象(获取事件对象和事件源(触发事件的元素)

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

什么时候会产生Event 对象呢?

例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象.

事件通常与函数结合使用，函数不会在事件发生前被执行！

<!-- event: 事件对象 -->
<button onclick="show(event)">click</button>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>
<script>
    function show(ev) {
        // ev中有二个特别重要的属性
        // 1. 事件绑定者(主体)
        console.log(ev.currentTarget);
        // 2.事件触发者(目标)
        console.log(ev.target);
        console.log(ev.target === ev.currentTarget);
    }
</script>

4、事件冒泡

子元素的同名事件,会沿着dom树向上逐级触发上级元素的同名事件

<body>
    <!-- event: 事件对象 -->
    <button onclick="show(event)">click</button>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
    <script>
        const lis = document.querySelectorAll("li");
        // 循环给每一个li添加点击事件
        lis.forEach(li => (li.onclick = ev => console.log(ev.currentTarget)));
        //   onclick这种通过事件属性的添加的事件,是冒泡事件
        document.querySelector("ul").onclick = ev => console.log(ev.currentTarget);
        document.querySelector("body").onclick = ev => console.log(ev.currentTarget);
        document.documentElement.onclick = ev => console.log(ev.currentTarget);
    </script>
</body>

5、阻止事件冒泡

在js中通过stopPropagation方法阻止事件继续传递。

lis.forEach(li => (li.onclick = ev =>{
    ev.stopPropagation();//IE以外
    console.log(ev.currentTarget)
}));

5、事件委托

事件委托描述的是将事件绑定在容器元素上，然后通过判断点击的target子元素的类型来触发相应的事件。
事件委托依赖于事件冒泡，如果事件冒泡到ul之前被禁用的话，那以下代码就无法工作了。

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>
<script>
    document.querySelector("ul").onclick = ev => {
        //   1.事件绑定者
        // console.log(ev.currentTarget);
        // 2. 事件触发者
        // console.log(ev.target);
        console.log(ev.target.textContent);
        // console.log(ev.target === ev.currentTarget);
    };
</script>

6、addEventListener()方法（可用于事件注册、监听。委派）

平常我们绑定事件的时候用dom.onxxxx=function(){}的形式，这种方式是给元素的onxxxx属性赋值，只能绑定有一个处理句柄。
但很多时候我们需要绑定多个处理句柄到一个事件上，而且还可能要动态的增删某个处理句柄，使用addEventListener()方法就能解决这个需求。

（1）语法

// element.addEventListener(事件类型, 事件回调,是否冒泡false/true)
element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（比如 “click” 或 “mousedown”）。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

注意：请勿对事件使用 “on” 前缀；请使用 “click” 代替 “onclick”。

（2）实例

a、动态注册

<button id="myBtn">点击</button>
<script>
    const btn = document.querySelector("#myBtn")
    btn.addEventListener("click", () => alert("Hello World!"))
</script>

上面代码示例使用 addEventListener() 方法将 click 事件附加到按钮。

b、向相同元素添加多个事件处理程序

<button id="myBtn">点击</button>
<script>
    const btn = document.querySelector("#myBtn")
    btn.addEventListener("click", () => alert("Hello World!"))
    btn.addEventListener("click", () => alert("JavaScript!"))
</script>

c、自定义事件与事件派发

<button id="myBtn">点击</button>
<script>
    const btn = document.querySelector("#myBtn")
    let i = 0;
    btn4.addEventListener("click", () => {
        console.log("恭喜你, 又赚了: " + i + " 元");
        i += 0.5;
    });
    // 创建一个自定义事件
    const myclick = new Event("click");
    //   setTimeout: 定时器,用于执行一次性的定时任务
    //   setInterval: 定时器, 用于执行间歇性的定时任务
    //   btn4.dispatchEvent(myclick);
    setInterval(() => btn4.dispatchEvent(myclick), 3000);
</script>

JavaScript 事件

JavaScript 事件

一、关于事件

二、事件的使用（重点）

相关文章