js绑定事件代理的坑
2023-09-14 09:07:44 时间
js通过事件代理的方式绑定跳转事件,我这里的逻辑是把click事件绑定在最外层container上面,如果e.target包含我已经写好的class,则执行跳转逻辑。但是这种方式好像只能是在点击的元素的上面,也就是最内层的元素上面有相应的class才能跳转,在外层加同样的class不生效,说明是我对于事件代理的理解不够深刻,其实事件代理的作用就是为了把目标元素的事件绑定在外层做代理,我想实现外层元素点击,固然不可生效。
这是原来的写法:
document.querySelector('.container').addEventListener('click', function (e) { if(e.target.classList.contains('jumpUrl')){ console.log("点击jumpurl") } },false)
<div id="container" class="jumpUrl"> <div id="wrap"> <div id="s1" class="jumpUrl">s1 <div id="s2" class="jumpUrl">s2</div> </div> <div id="s3"></div> </div> </div>
如果既想要内层元素含有jumpUrl的 class时执行点击事件,又想要外层元素含有class时执行点击事件,修改优化如下:
document.querySelector('#container').addEventListener('click', function (e) { console.log(e.currentTarget) //获得当前绑定监听事件的元素, container console.log(e.target)//获得当前点击的元素 console.log(this) //等于e.currentTarget if(e.currentTarget.classList.contains('jumpUrl')||e.target.classList.contains('jumpUrl')){ console.log("点击jumpurl") } },false) document.getElementById("container").classList.add('jumpUrl');//写在后面也可以绑定成功
注意:内层元素,即点击的目标元素必须是点击时真正的目标元素,而不是外面一层;
currentTarget绑定相应想要点击的class的时候必须是做代理的即做事件监听的元素。这里是container
相关文章
- 关于js中的冒泡事件
- 使用定时器判断确保某个标签有值才执行方法, 控制js代码执行先后顺序
- JS框架_(JQuery.js)高德地图api
- js时间对象格式化 format(转载)
- js - setInterval的停止与重新启动
- A2D JS框架 - AOP封装
- Node.js自定义对象事件监听与发射
- 如何查找元素对应事件的js代码
- js对象之window和document区别
- [Next.js] Hide Sensitive Information from the Consumers of Next.js API
- [Cycle.js] Main function and effects functions
- [Cycle.js] Hello World in Cycle.js
- js操作元素节点对象innerHTML
- Atitit.js的键盘按键事件捆绑and事件调度
- Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理
- paip.调试js 查看元素事件以及事件断点
- paip.调试js 查看元素事件以及事件断点
- 华为OD机试 - 寻找符合要求的最长子串(Java & JS & Python)
- 华为OD机试 - 最短木板长度(Java & JS & Python)
- js手机端长按选中文字执行事件
- js工具代码封装(超长)2/3
- js添加点击事件
- 【nodejs原理&源码赏析(4)】深度剖析cluster模块源码与node.js多进程(上)
- js: 添加事件监听addEventListener、移除事件监听removeEventListener
- js事件流:捕获阶段和冒泡阶段addEventListener
- js: ElementUI表单验证validate和validateField
- js数组去重
- js 停止事件冒泡 阻止浏览器的默认行为
- react.js父子组件通信
- js键盘事件
- Js 冒泡事件阻止
- js 回车触发点击事件