事件的添加方式
程序员文章站
2022-03-24 09:45:10
...
事件的添加方式有四种:事件属性、元素对象、事件监听器、事件派发
- 事件属性
以属性的方式,直接添加事件给html对象<button onclick="alert('hello')">事件属性</button>
上面代码中的onclick就是事件属性 - 元素对象
<button class="btn">元素对象</button>
<script>
const btn2 = document.querySelector(".btn");
btn2.onclick = () => console.log(111);
btn2.onclick = (_) => console.log(222);
btn2.onclick = ($) => console.log(333);
</script>
以此种方式添加的事件,后面的会覆盖前面的,只会输出“333”。如果要删除事件,可以在javascript中添加代码:btn2.onclick = null;
3.事件监听器
使用addEventListener()方法事件监听器,给元素添加事件。格式如下:
addEventListener(事件类型, 事件回调,默认冒泡false/true捕获)
<button class="btn-listener">事件监听器</button>
<script>
const btn3 = document.querySelector(".btn-listener");
btn3.addEventListener("click", () => console.log(111));
btn3.addEventListener("click", () => console.log(222));
btn3.addEventListener("click", () => console.log(333));
</script>
代码中的3行输出都能执行。此种方式不能删除事件。如果以此种方式添加并能够删除事件,必须将事件回调定义成函数。
let show = () => console.log(444);
btn3.addEventListener("click", show);
// 删除
btn3.removeEventListener("click", show);
-
事件派发
通过dispatchEvent(),通过一个对象,将事件排发个预算对象。<button class="btn-dispatch">事件派发</button>
<script>
// 事件派发
let i = 0;
const btn4 = document.querySelector(".btn-dispath");
btn4.addEventListener("click", () => {
console.log("i=" + i);
i += 0.5;
});
const myclick = new Event("click");
btn4.dispatchEvent(myclick);
btn4.dispatchEvent(myclick);
setInterval(() => btn4.dispatchEvent(myclick), 2000);
</script>
上一篇: 如何解决es6 import报错问题
下一篇: MySQL数据库中的sql_mode字段
推荐阅读
-
Android中数据解析的五种方式
-
iframe里的页面禁止右键事件_html/css_WEB-ITnose
-
SSH2 DAO注入sessionfactory的方式汇总
-
ae怎么制作钢铁侠特效? ae给人物添加钢铁侠穿衣特效的技巧
-
关于PHP5和PHP7中数组实现方式的比较总结
-
【UWP】多个ScrollViewer嵌套时鼠标滚轮事件的处理
-
redis客户端实现高可用读写分离的方式详解
-
element-ui 的el-button组件中添加自定义颜色和图标
-
AngularJS实现给动态生成的元素绑定事件的方法
-
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法