JavaScript: 最简单的事件代理(JS Event Proxy)原理代码
来源:互联网 发布:编程语言发展趋势 编辑:程序博客网 时间:2024/06/01 10:25
打开 http://jsbin.com (JS练兵场),方便尝试使用案例代码。
假设有HTML
<ul id="parent-list"> <li id="post-1">Item 1</li> <li id="post-2" class="item-2 focused">Item 2</li> <li id="post-3">Item 3</li> <li id="post-4">Item 4</li> <li id="post-5">Item 5</li> <li id="post-6">Item 6</li></ul>
我们可以采用 e.target.matches
接口匹配 css selector 的方式。
document.addEventListener('DOMContentLoaded', function() { // 真正的开始,在这里。DOMContentLoaded 事件只是为了等DOM加载好了。 const root = document.getElementById('parent-list'); // 被监听的事件,要注册在父亲节点中的某一个,一般是在模块根级别的那个。 root.addEventListener('click', function(e) { if (e.target) { // <-- 我们就是要判断 e.target 是谁 if (e.target.matches('#post-1')) { // 判断的 selector 跟 document.querySelector() 用的是一样的。 // 判断如果是 #post-1,那么就 ... alert('you are clicking #post-1'); } else if (e.target.matches('li.item-2.focused')) { // 判断如果是 li.item-2.focused,那么就 ... alert('you are clicking #post-2, which is li.item-2.focused'); } } });});
运行,可以看到结果。
思路是:我们通过将想要监听的事件,注册到 parent 级别的 Dom 对象上,然后通过回调函数的第一个参数
event
的event.target
属性来判断事件发生在谁身上。当然,我们需要匹配一下,就通过event.target.matches(cssSelector)
来判断事件所在的Dom是否为我们所期望的那个。
阅读全文
1 0
- JavaScript: 最简单的事件代理(JS Event Proxy)原理代码
- 最简单的代理框架代码,最简单的代理工厂 Proxy, Aop, ProxyFactory
- javascript的事件(event)
- 06 JS的事件(Event)
- event 事件机制的原理
- JAVA 代理模式(Proxy)的原理和实现
- [js点滴]JavaScript事件Event对象03
- 简单动态代理实例(使用jdk的proxy)
- JavaScript的事件代理
- JavaScript的事件代理
- JavaScript的事件代理
- JavaScript的事件代理
- javascript的事件代理
- JavaScript的事件代理
- JavaScript的事件代理
- JavaScript的事件代理
- javascript事件对象(event)
- js事件之event.preventDefault()与event.stopPropagation()简单介绍
- ubantu批量重命名
- Lua 语言学习总结
- Spring—Quartz定时调度CronTrigger时间配置格式说明与实例
- Centos7安装jdk1.7
- JAVA获取时间的四种方法
- JavaScript: 最简单的事件代理(JS Event Proxy)原理代码
- Get请求中文乱码问题有效解决方法
- 客户端如何访问greenplum
- linux驱动开发--内核链表
- Html5之数据持久化学习
- mysqld_safe Directory '/var/lib/mysql' for UNIX socket file don't exists.
- 简单的eclipse应用jna入门和实例
- 画线
- mysql修改用户密码