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	该事件在表单元素的内容改变时触发( , , )</td><td align="left">2</td></tr><tr><td align="left"><a href="https://www.runoob.com/jsref/event-onfocus.html">onfocus</a></td><td align="left">元素获取焦点时触发</td><td align="left">2</td></tr><tr><td align="left"><a href="https://www.runoob.com/jsref/event-onfocusin.html">onfocusin</a></td><td align="left">元素即将获取焦点时触发</td><td align="left">2</td></tr><tr><td align="left"><a href="https://www.runoob.com/jsref/event-onfocusout.html">onfocusout</a></td><td align="left">元素即将失去焦点时触发</td><td align="left">2</td></tr><tr><td align="left"><a href="https://www.runoob.com/jsref/event-oninput.html">oninput</a></td><td align="left">元素获取用户输入时触发</td><td align="left">3</td></tr><tr><td align="left"><a href="https://www.runoob.com/jsref/event-onreset.html">onreset</a></td><td align="left">表单重置时触发</td><td align="left">2</td></tr><tr><td align="left"><a href="https://www.runoob.com/jsref/event-onsearch.html">onsearch</a></td><td align="left">用户向搜索域输入文本时触发 ( <input="search">)</td><td align="left"> </td></tr><tr><td align="left"><a href="https://www.runoob.com/jsref/event-onselect.html">onselect</a></td><td align="left">用户选取文本时触发 ( <input> 和 <textarea>)</td><td align="left">2</td></tr><tr><td align="left"><a href="https://www.runoob.com/jsref/event-onsubmit.html">onsubmit</a></td><td align="left">表单提交时触发</td><td align="left">2</td></tr></tbody></table><p><strong>（4）剪贴板事件</strong></p><table><thead><tr><th align="left">属性</th><th align="left">描述</th><th align="left">DOM</th></tr></thead><tbody><tr><td align="left"><a href="https://www.runoob.com/jsref/event-oncopy.html">oncopy</a></td><td align="left">该事件在用户拷贝元素内容时触发</td><td align="left"> </td></tr><tr><td align="left"><a href="https://www.runoob.com/jsref/event-oncut.html">oncut</a></td><td align="left">该事件在用户剪切元素内容时触发</td><td align="left"> </td></tr><tr><td align="left"><a href="https://www.runoob.com/jsref/event-onpaste.html">onpaste</a></td><td align="left">该事件在用户粘贴元素内容时触发</td><td align="left"> </td></tr></tbody></table><p><strong>3、event: 事件对象(获取事件对象和事件源(触发事件的元素)</strong></p><blockquote><p>Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。</p><ul><li><p>什么时候会产生Event 对象呢?</p><ul><li>例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象.</li></ul></li><li>事件通常与函数结合使用，函数不会在事件发生前被执行！</li></ul></blockquote><pre><code class="lang-html"><!-- 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></code></pre><p><strong>4、事件冒泡 </strong></p><blockquote>子元素的同名事件,会沿着dom树向上逐级触发上级元素的同名事件</blockquote><pre><code class="lang-html"><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></code></pre><p><strong>5、阻止事件冒泡</strong></p><blockquote>在js中通过stopPropagation方法阻止事件继续传递。</blockquote><pre><code class="lang-js">lis.forEach(li => (li.onclick = ev =>{ ev.stopPropagation();//IE以外 console.log(ev.currentTarget) }));</code></pre><p><strong>5、事件委托</strong></p><blockquote>事件委托描述的是将事件绑定在容器元素上，然后通过判断点击的target子元素的类型来触发相应的事件。<br>事件委托依赖于事件冒泡，如果事件冒泡到ul之前被禁用的话，那以下代码就无法工作了。</blockquote><pre><code class="lang-html"><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></code></pre><p><strong>6、addEventListener()方法（可用于事件注册、监听。委派）</strong></p><blockquote>平常我们绑定事件的时候用dom.onxxxx=function(){}的形式，这种方式是给元素的onxxxx属性赋值，只能绑定有一个处理句柄。<br>但很多时候我们需要绑定多个处理句柄到一个事件上，而且还可能要动态的增删某个处理句柄，使用addEventListener()方法就能解决这个需求。</blockquote><p><strong>（1）语法</strong></p><pre><code class="lang-js">// element.addEventListener(事件类型, 事件回调,是否冒泡false/true) element.addEventListener(event, function, useCapture);</code></pre><blockquote><p>第一个参数是事件的类型（比如 "click" 或 "mousedown"）。</p><p>第二个参数是当事件发生时我们需要调用的函数。</p><p>第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。</p><p><strong>注意：</strong>请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。</p></blockquote><p><strong>（2）实例</strong></p><p><strong>a、动态注册</strong></p><pre><code class="lang-html"><button id="myBtn">点击</button> <script> const btn = document.querySelector("#myBtn") btn.addEventListener("click", () => alert("Hello World!")) </script></code></pre><p>上面代码示例使用 addEventListener() 方法将 click 事件附加到按钮。</p><p><strong>b、向相同元素添加多个事件处理程序</strong></p><pre><code class="lang-html"><button id="myBtn">点击</button> <script> const btn = document.querySelector("#myBtn") btn.addEventListener("click", () => alert("Hello World!")) btn.addEventListener("click", () => alert("JavaScript!")) </script></code></pre><p><strong>c、自定义事件与事件派发</strong></p><pre><code class="lang-html"><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></code></pre> </div> <!-- 标签 --> <!-- 赞赏点赞 --> <section class="j-fabulous"> <div class="button "> <section id="j-thumbs-up" class="left disabled" data-cid="19" data-url="http://www.lonhaiy.com/index.php/archives/19/"> <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg""> <path d=" M883.069529 202.542591c-47.178415-45.274046-109.900819-70.216061-176.61411-70.216061s-120.187073 23.000807-167.368557 68.272806c-0.018419 0.033769-0.053212 0.068561-0.068561 0.104377-0.019443 0-0.019443 0-0.034792 0L512.184195 233.104593l-26.815685-30.459671c-0.019443-0.034792-0.054235-0.069585-0.070608-0.069585-0.019443 0-0.019443 0-0.019443-0.033769-47.179438-45.274046-100.654243-70.216061-167.367534-70.216061-66.728641 0-129.451045 24.943039-176.631507 70.216061-47.164088 45.305768-73.146804 105.529264-73.146804 169.571731 0 64.004605 25.947923 124.194332 73.077219 169.467354l331.562825 320.963441c10.425423 10.094895 24.614558 15.78549 39.40949 15.78549 14.794931 0 28.984067-5.690594 39.410513-15.78549l331.543382-320.928649c47.147716-45.273022 73.096662-105.497542 73.096662-169.502147C956.234752 308.071855 930.251013 247.848359 883.069529 202.542591z" p-id="16451"></path> </svg> <span>赞（0）</span> </section> </div> </section> <!-- 版权 --> <div class="banquan"> <div class="content"> <div class="item"> <svg viewBox="0 0 1024 1024"> <path d="M614.72 554.538c-49.086-6.399-100.27-2.1-149.256-2.1-119.465 0-209.04 95.972-206.84 215.437 0 17.095 8.498 31.99 23.493 40.488 14.896 10.697 34.09 14.896 53.285 17.095 61.882 6.398 123.664 6.398 198.342 6.398 40.488 0 93.872-2.1 142.858-4.298 27.692 0 53.284-4.3 78.877-14.896 19.194-8.498 29.89-19.194 31.99-40.488 8.498-104.57-72.478-204.84-172.75-217.636zM680.8 375.39c0-87.474-74.678-162.053-164.251-162.053-89.574 0-162.053 74.679-162.053 162.053-2.1 87.474 74.678 164.252 162.053 164.252 89.673 0 164.252-74.678 164.252-164.252z" fill="#FFFFFF"></path> <path d="M512.35 0C228.733 0 0.5 228.233 0.5 511.85s228.233 511.85 511.85 511.85 511.85-228.233 511.85-511.85S795.967 0 512.35 0z m275.12 772.074c-2.1 21.294-12.797 31.99-31.991 40.488-25.593 10.697-51.185 14.896-78.877 14.896-49.086 2.099-102.37 4.298-142.858 4.298-74.678 0-136.46 0-198.342-6.398-19.195-2.1-38.389-6.398-53.285-17.095-14.895-8.497-23.493-23.493-23.493-40.488-2.1-119.465 87.475-215.437 206.84-215.437 49.085 0 100.27-4.299 149.256 2.1 100.27 12.896 181.247 113.166 172.75 217.636zM354.495 375.39c0-87.474 72.479-162.053 162.053-162.053S680.8 288.016 680.8 375.39c0 89.574-74.679 164.252-164.252 164.252-87.375 0-164.152-76.778-162.053-164.252z" fill="#249FF8"></path> </svg> <span>版权属于：</span> <p>Lonhaiy的个人博客</p> </div> <div class="item"> <svg viewBox="0 0 1024 1024"> <path d="M511.854421 0a511.854421 511.854421 0 1 0 512.145579 511.854421A511.854421 511.854421 0 0 0 511.854421 0z" fill="#39B54A"></path> <path d="M576.491328 630.355417l-116.462895 116.462894a129.56497 129.56497 0 0 1-182.555587 0l-2.0381-2.038101a128.982656 128.982656 0 0 1 0-182.26443l81.232868-81.232868a179.644015 179.644015 0 0 0 13.102076 70.460051l-52.69946 52.408302a69.877737 69.877737 0 0 0 0 98.702303l2.038101 2.038101a70.168894 70.168894 0 0 0 98.702303 0l116.462895-116.462894a69.877737 69.877737 0 0 0 0-98.702304l-2.038101-2.0381a69.586579 69.586579 0 0 0-13.975547-10.772818l42.508956-42.508956a128.109184 128.109184 0 0 1 13.102076 11.355132l2.0381 2.0381a129.273813 129.273813 0 0 1 0 182.26443z" fill="#FFFFFF"></path> <path d="M746.235997 460.901905l-81.232869 81.232869a179.352858 179.352858 0 0 0-13.102076-70.460051l52.69946-52.408303a69.877737 69.877737 0 0 0 0-98.702303l-2.038101-2.038101a69.877737 69.877737 0 0 0-98.702303 0l-116.462894 116.462895a69.877737 69.877737 0 0 0 0 98.702303l2.0381 2.038101a68.421951 68.421951 0 0 0 13.975548 10.772817l-42.508957 42.508957a136.552744 136.552744 0 0 1-13.102076-11.355132l-2.0381-2.038101a128.982656 128.982656 0 0 1 0-182.26443l116.462894-116.462894a129.56497 129.56497 0 0 1 182.555587 0l2.038101 2.0381a128.982656 128.982656 0 0 1 0 182.26443z" fill="#FFFFFF"></path> </svg> <span>本文链接：</span> <p> <a class="j-copy" href="javascript:void(0)" data-copy="http://www.lonhaiy.com/index.php/archives/19/">http://www.lonhaiy.com/index.php/archives/19/</a>（转载时请注明本文出处及文章链接）</p> </div> <div class="item"> <svg viewBox="0 0 1024 1024"> <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#F3B243"></path> <path d="M630.784 323.584m-90.112 0a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0Z" fill="#FFFFFF"></path> <path d="M630.784 688.128m-90.112 0a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0Z" fill="#FFFFFF"></path> <path d="M319.488 512m-90.112 0a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0Z" fill="#FFFFFF"></path> <path d="M341.037056 480.370688l257.343488-175.7184 27.713536 40.59136-257.339392 175.7184z" fill="#FFFFFF"></path> <path d="M349.052928 488.452096l252.854272 182.10816-28.725248 39.886848-252.874752-182.10816z" fill="#FFFFFF"></path> </svg> <span>作品采用：</span> <p>《<a target="_blank" href="//creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)</a>》许可协议授权</p> </div> </div> </div> <!-- 相关文章 --> </div> <ul class="page"> <li class="left"><a href="http://www.lonhaiy.com/index.php/archives/20/" title="Mock.js 基本用法">上一篇</a></li> <li class="right"><a href="http://www.lonhaiy.com/index.php/archives/18/" title="JavaScript DOM对象">下一篇</a></li> </ul> <div id="comments" class="j-comment" data-respondId="respond-post-19"> <div class="title">评论 (0)</div> <div id="respond-post-19" class="respond"> <div class="change" id="commentType"> <button data-type="canvas">画图模式</button> <button data-type="text" class="active">文本模式</button> </div> <form method="post" action="http://www.lonhaiy.com/index.php/archives/19/comment" id="comment-form"> <div class="head"> <div class="head-item"> <input id="comment-nick" type="text" value="" autocomplete="off" name="author" maxlength="16" placeholder="昵称：请输入昵称（必填）" /> </div> <div class="head-item"> <input id="comment-mail" type="text" value="" autocomplete="off" name="mail" placeholder="邮箱：请输入邮箱（必填）" /> </div> <div class="head-item"> <input id="comment-url" type="text" value="" autocomplete="off" name="url" placeholder="网址：请输入网址（选填）" /> </div> </div> <div class="content" id="commentTypeContent"> <textarea class="OwO-textarea" name="text" autocomplete="off" id="comment-content" rows="5" placeholder="说点什么吧，点击右上角可切换成画图模式哦~"> 细中粗取消 Lonhaiy 如果结果不如你所愿，就在尘埃落定前奋力一搏 20 文章数 5,731 评论量 ES6 Promise 对象简单了解 PHP 目录与文件操作常用函数 PHP 常用魔术方法 PHP PDO PHP JSON与cURL 函数人生倒计时今日已经过去小时这周已经过去天本月已经过去天今年已经过去个月 2021 - 2022 © Reach - Joe 湘ICP备2021019990号-1

属性

描述

DOM

onblur

元素失去焦点时触发

onchange

该事件在表单元素的内容改变时触发( , ,

)</td><td align="left">2</td></tr><tr><td align="left"><a href="https://www.runoob.com/jsref/event-onfocus.html">onfocus</a></td><td align="left">元素获取焦点时触发</td><td align="left">2</td></tr><tr><td align="left"><a href="https://www.runoob.com/jsref/event-onfocusin.html">onfocusin</a></td><td align="left">元素即将获取焦点时触发</td><td align="left">2</td></tr><tr><td align="left"><a href="https://www.runoob.com/jsref/event-onfocusout.html">onfocusout</a></td><td align="left">元素即将失去焦点时触发</td><td align="left">2</td></tr><tr><td align="left"><a href="https://www.runoob.com/jsref/event-oninput.html">oninput</a></td><td align="left">元素获取用户输入时触发</td><td align="left">3</td></tr><tr><td align="left"><a href="https://www.runoob.com/jsref/event-onreset.html">onreset</a></td><td align="left">表单重置时触发</td><td align="left">2</td></tr><tr><td align="left"><a href="https://www.runoob.com/jsref/event-onsearch.html">onsearch</a></td><td align="left">用户向搜索域输入文本时触发 ( <input="search">)</td><td align="left"> </td></tr><tr><td align="left"><a href="https://www.runoob.com/jsref/event-onselect.html">onselect</a></td><td align="left">用户选取文本时触发 ( <input> 和 <textarea>)</td><td align="left">2</td></tr><tr><td align="left"><a href="https://www.runoob.com/jsref/event-onsubmit.html">onsubmit</a></td><td align="left">表单提交时触发</td><td align="left">2</td></tr></tbody></table><p><strong>（4）剪贴板事件</strong></p><table><thead><tr><th align="left">属性</th><th align="left">描述</th><th align="left">DOM</th></tr></thead><tbody><tr><td align="left"><a href="https://www.runoob.com/jsref/event-oncopy.html">oncopy</a></td><td align="left">该事件在用户拷贝元素内容时触发</td><td align="left"> </td></tr><tr><td align="left"><a href="https://www.runoob.com/jsref/event-oncut.html">oncut</a></td><td align="left">该事件在用户剪切元素内容时触发</td><td align="left"> </td></tr><tr><td align="left"><a href="https://www.runoob.com/jsref/event-onpaste.html">onpaste</a></td><td align="left">该事件在用户粘贴元素内容时触发</td><td align="left"> </td></tr></tbody></table><p><strong>3、event: 事件对象(获取事件对象和事件源(触发事件的元素)</strong></p><blockquote><p>Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。</p><ul><li><p>什么时候会产生Event 对象呢?</p><ul><li>例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象.</li></ul></li><li>事件通常与函数结合使用，函数不会在事件发生前被执行！</li></ul></blockquote><pre><code class="lang-html">
<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></code></pre><p><strong>4、事件冒泡 </strong></p><blockquote>子元素的同名事件,会沿着dom树向上逐级触发上级元素的同名事件</blockquote><pre><code class="lang-html"><body>
    
    <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></code></pre><p><strong>5、阻止事件冒泡</strong></p><blockquote>在js中通过stopPropagation方法阻止事件继续传递。</blockquote><pre><code class="lang-js">lis.forEach(li => (li.onclick = ev =>{
    ev.stopPropagation();//IE以外
    console.log(ev.currentTarget)
}));</code></pre><p><strong>5、事件委托</strong></p><blockquote>事件委托描述的是将事件绑定在容器元素上，然后通过判断点击的target子元素的类型来触发相应的事件。<br>事件委托依赖于事件冒泡，如果事件冒泡到ul之前被禁用的话，那以下代码就无法工作了。</blockquote><pre><code class="lang-html"><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></code></pre><p><strong>6、addEventListener()方法（可用于事件注册、监听。委派）</strong></p><blockquote>平常我们绑定事件的时候用dom.onxxxx=function(){}的形式，这种方式是给元素的onxxxx属性赋值，只能绑定有一个处理句柄。<br>但很多时候我们需要绑定多个处理句柄到一个事件上，而且还可能要动态的增删某个处理句柄，使用addEventListener()方法就能解决这个需求。</blockquote><p><strong>（1）语法</strong></p><pre><code class="lang-js">// element.addEventListener(事件类型, 事件回调,是否冒泡false/true)
element.addEventListener(event, function, useCapture);</code></pre><blockquote><p>第一个参数是事件的类型（比如 "click" 或 "mousedown"）。</p><p>第二个参数是当事件发生时我们需要调用的函数。</p><p>第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。</p><p><strong>注意：</strong>请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。</p></blockquote><p><strong>（2）实例</strong></p><p><strong>a、动态注册</strong></p><pre><code class="lang-html"><button id="myBtn">点击</button>
<script>
    const btn = document.querySelector("#myBtn")
    btn.addEventListener("click", () => alert("Hello World!"))
</script></code></pre><p>上面代码示例使用 addEventListener() 方法将 click 事件附加到按钮。</p><p><strong>b、向相同元素添加多个事件处理程序</strong></p><pre><code class="lang-html"><button id="myBtn">点击</button>
<script>
    const btn = document.querySelector("#myBtn")
    btn.addEventListener("click", () => alert("Hello World!"))
    btn.addEventListener("click", () => alert("JavaScript!"))
</script></code></pre><p><strong>c、自定义事件与事件派发</strong></p><pre><code class="lang-html"><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></code></pre>                            </div>

<section class="j-fabulous">
    <div class="button ">
        <section  id="j-thumbs-up" class="left disabled" data-cid="19" data-url="http://www.lonhaiy.com/index.php/archives/19/">
            <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"">
                <path d=" M883.069529 202.542591c-47.178415-45.274046-109.900819-70.216061-176.61411-70.216061s-120.187073 23.000807-167.368557 68.272806c-0.018419 0.033769-0.053212 0.068561-0.068561 0.104377-0.019443 0-0.019443 0-0.034792 0L512.184195 233.104593l-26.815685-30.459671c-0.019443-0.034792-0.054235-0.069585-0.070608-0.069585-0.019443 0-0.019443 0-0.019443-0.033769-47.179438-45.274046-100.654243-70.216061-167.367534-70.216061-66.728641 0-129.451045 24.943039-176.631507 70.216061-47.164088 45.305768-73.146804 105.529264-73.146804 169.571731 0 64.004605 25.947923 124.194332 73.077219 169.467354l331.562825 320.963441c10.425423 10.094895 24.614558 15.78549 39.40949 15.78549 14.794931 0 28.984067-5.690594 39.410513-15.78549l331.543382-320.928649c47.147716-45.273022 73.096662-105.497542 73.096662-169.502147C956.234752 308.071855 930.251013 247.848359 883.069529 202.542591z" p-id="16451"></path>
            </svg>
            <span>赞（0）</span>
        </section>
            </div>
</section>

<div class="banquan">
    <div class="content">
        <div class="item">
            <svg viewBox="0 0 1024 1024">
                <path d="M614.72 554.538c-49.086-6.399-100.27-2.1-149.256-2.1-119.465 0-209.04 95.972-206.84 215.437 0 17.095 8.498 31.99 23.493 40.488 14.896 10.697 34.09 14.896 53.285 17.095 61.882 6.398 123.664 6.398 198.342 6.398 40.488 0 93.872-2.1 142.858-4.298 27.692 0 53.284-4.3 78.877-14.896 19.194-8.498 29.89-19.194 31.99-40.488 8.498-104.57-72.478-204.84-172.75-217.636zM680.8 375.39c0-87.474-74.678-162.053-164.251-162.053-89.574 0-162.053 74.679-162.053 162.053-2.1 87.474 74.678 164.252 162.053 164.252 89.673 0 164.252-74.678 164.252-164.252z" fill="#FFFFFF"></path>
                <path d="M512.35 0C228.733 0 0.5 228.233 0.5 511.85s228.233 511.85 511.85 511.85 511.85-228.233 511.85-511.85S795.967 0 512.35 0z m275.12 772.074c-2.1 21.294-12.797 31.99-31.991 40.488-25.593 10.697-51.185 14.896-78.877 14.896-49.086 2.099-102.37 4.298-142.858 4.298-74.678 0-136.46 0-198.342-6.398-19.195-2.1-38.389-6.398-53.285-17.095-14.895-8.497-23.493-23.493-23.493-40.488-2.1-119.465 87.475-215.437 206.84-215.437 49.085 0 100.27-4.299 149.256 2.1 100.27 12.896 181.247 113.166 172.75 217.636zM354.495 375.39c0-87.474 72.479-162.053 162.053-162.053S680.8 288.016 680.8 375.39c0 89.574-74.679 164.252-164.252 164.252-87.375 0-164.152-76.778-162.053-164.252z" fill="#249FF8"></path>
            </svg>
            <span>版权属于：</span>
            <p>Lonhaiy的个人博客</p>
        </div>
        <div class="item">
            <svg viewBox="0 0 1024 1024">
                <path d="M511.854421 0a511.854421 511.854421 0 1 0 512.145579 511.854421A511.854421 511.854421 0 0 0 511.854421 0z" fill="#39B54A"></path>
                <path d="M576.491328 630.355417l-116.462895 116.462894a129.56497 129.56497 0 0 1-182.555587 0l-2.0381-2.038101a128.982656 128.982656 0 0 1 0-182.26443l81.232868-81.232868a179.644015 179.644015 0 0 0 13.102076 70.460051l-52.69946 52.408302a69.877737 69.877737 0 0 0 0 98.702303l2.038101 2.038101a70.168894 70.168894 0 0 0 98.702303 0l116.462895-116.462894a69.877737 69.877737 0 0 0 0-98.702304l-2.038101-2.0381a69.586579 69.586579 0 0 0-13.975547-10.772818l42.508956-42.508956a128.109184 128.109184 0 0 1 13.102076 11.355132l2.0381 2.0381a129.273813 129.273813 0 0 1 0 182.26443z" fill="#FFFFFF"></path>
                <path d="M746.235997 460.901905l-81.232869 81.232869a179.352858 179.352858 0 0 0-13.102076-70.460051l52.69946-52.408303a69.877737 69.877737 0 0 0 0-98.702303l-2.038101-2.038101a69.877737 69.877737 0 0 0-98.702303 0l-116.462894 116.462895a69.877737 69.877737 0 0 0 0 98.702303l2.0381 2.038101a68.421951 68.421951 0 0 0 13.975548 10.772817l-42.508957 42.508957a136.552744 136.552744 0 0 1-13.102076-11.355132l-2.0381-2.038101a128.982656 128.982656 0 0 1 0-182.26443l116.462894-116.462894a129.56497 129.56497 0 0 1 182.555587 0l2.038101 2.0381a128.982656 128.982656 0 0 1 0 182.26443z" fill="#FFFFFF"></path>
            </svg>
            <span>本文链接：</span>
            <p> <a class="j-copy" href="javascript:void(0)" data-copy="http://www.lonhaiy.com/index.php/archives/19/">http://www.lonhaiy.com/index.php/archives/19/</a>（转载时请注明本文出处及文章链接）</p>
        </div>
        <div class="item">
            <svg viewBox="0 0 1024 1024">
                <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#F3B243"></path>
                <path d="M630.784 323.584m-90.112 0a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0Z" fill="#FFFFFF"></path>
                <path d="M630.784 688.128m-90.112 0a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0Z" fill="#FFFFFF"></path>
                <path d="M319.488 512m-90.112 0a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0Z" fill="#FFFFFF"></path>
                <path d="M341.037056 480.370688l257.343488-175.7184 27.713536 40.59136-257.339392 175.7184z" fill="#FFFFFF"></path>
                <path d="M349.052928 488.452096l252.854272 182.10816-28.725248 39.886848-252.874752-182.10816z" fill="#FFFFFF"></path>
            </svg>
            <span>作品采用：</span>
            <p>《<a target="_blank" href="//creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)</a>》许可协议授权</p>
        </div>
    </div>
</div>                    
                    
                                                                
                </div>

Lonhaiy

如果结果不如你所愿，就在尘埃落定前奋力一搏

20 文章数

5,731 评论量

人生倒计时

今日已经过去小时

这周已经过去天

本月已经过去天

今年已经过去个月