重庆网站开发商城,wordpress用户权限修改,世界工厂网网页版,给我一个网页给 DOM 节点绑定事件 推荐使用 addEventListener 函数
第一个参数#xff1a;事件名称第二个参数#xff1a;事件处理函数#xff08;第一个参数为 event#xff09;第三个参数#xff1a; true 采用捕获法来处理事件false 【推荐】采用冒泡法来处理事件
let div1 docu… 给 DOM 节点绑定事件 推荐使用 addEventListener 函数
第一个参数事件名称第二个参数事件处理函数第一个参数为 event第三个参数 true 采用捕获法来处理事件false 【推荐】采用冒泡法来处理事件
let div1 document.getElementById(div1);
div1.addEventListener(click, function(event){alert(div1_clicked!);
}, false);event 参数的用途 event.target 获取触发事件的元素 event.preventDefault() 阻止默认行为 默认行为如a标签点击跳转、鼠标右键弹出菜单、滑动滚轮控制滚动条等 event.stopPropagation() 阻止事件传播冒泡/捕获 事件流含事件冒泡事件捕获 https://blog.csdn.net/weixin_41192489/article/details/133140101 【必考】事件代理 借助其他元素来响应自身事件即事件代理。
应用范例对于内容很多的列表为了避免给每一个列表中的元素都绑定一个点击事件仅在列表的容器元素上绑定点击事件则当点击列表中的元素时因事件冒泡机制会触发容器元素的点击事件再在该事件中识别出点击的具体元素并执行相应的处理。
// 列表内容很多的容器
const div3 document.getElementById(div3);// 点击列表中a标签的元素时弹窗显示其内容
div3.addEventListener(click, (event) {event.preventDefault();let target event.target;if (target.nodeName A) {alert(target.innerHTML);}
});【考题】写一个通用的事件绑定函数 /*** 通用的事件绑定函数(支持事件代理)* param {*} elem 触发事件的元素* param {*} type 事件类型* param {*} selector 选择器* param {*} fn 事件处理函数*/
function bindEvent(elem, type, selector, fn) {//若只传入了三个参数即普通的事件绑定则第三个参数才是事件处理函数if (fn null) {// 将第三个参数设置为事件处理函数fn selector;// 将选择器置空selector null;}// 绑定事件elem.addEventListener(type, (event) {// 获取触发事件的元素const target event.target;if (selector) {// 传入了选择器则为事件代理绑定if (target.matches(selector)) {// 若触发事件的元素与选择器匹配则执行事件处理函数fn.call(target, event); // 利用 call 改变事件处理函数中 this 的指向}} else {// 没有选择器为普通事件绑定fn.call(target, event);}});
}使用
// 普通事件绑定
const btn1 document.getElementById(btn1)
bindEvent(btn1, click, function (event) {event.preventDefault()alert(this.innerHTML)
})// 事件代理绑定
const div3 document.getElementById(div3)
bindEvent(div3, click, a, function (event) {event.preventDefault()alert(this.innerHTML)
})【考题】描述事件冒泡的流程 事件基于 DOM 树形结构顺着触发元素不断向上传播由内层节点传播到外层节点触发各级父辈节点对应的事件若父辈节点中没有阻断事件的冒泡传播则会一直传播到window 对象。
应用场景事件代理参考上文 【考题】无限下拉图片列表如何监听每个图片的点击 通过事件代理实现具体逻辑如下
在列表容器上绑定点击事件点击图片时会冒泡触发列表容器的点击事件通过 e.target 获取到触发元素通过 matches 判断触发元素是否是图片是图片则执行相应的代码不是图片则不执行。
