【JS】addEventListener()添加事件监听、removeEventListener()移除事件监听
addEventListener()添加事件监听、removeEventListener()移除事件监听
·
1. addEventListener()添加事件监听
使用 addEventListener()
方法用于向指定元素添加事件句柄。
addEventListener(event, function, useCapture)
- 参数event必填,表示监听的事件,例如 click, resize等,不加前缀on的事件。
- 参数 function必填,表示事件触发后调用的函数,可以是外部定义函数,也可以是匿名函数。不带参数。
- 参数 useCapture选填,填true或者false,用于描述事件是冒泡还是捕获触发,true表示捕获,默认false表示冒泡。
2. removeEventListener()移除事件监听
使用 removeEventListener()
方法来移除 addEventListener() 方法添加的事件句柄。
- 如果function参数传的是匿名函数,没办法用removeEventListener来移除监听。代码如下:
mounted(){
window.addEventListener('resize',()=>{
console.log('处理窗口缩放时要处理的逻辑操作!');
});
},
- 如果function参数传的不是匿名函数,可以使用removeEventListener来移除监听。
methods: {
listenResizeFn(){
console.log('处理窗口缩放时要处理的逻辑操作!');
}
},
mounted(){
// 添加监听事件listenResizeFn
window.addEventListener('resize',this.listenResizeFn);
},
beforeDestroy() {
// 移除绑定的listenResizeFn事件监听
window.removeEventListener("resize",this.listenResizeFn);
}
3. 兼容性
注意: Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法,,Opera 7.0 及 Opera 更早版本也不支持。 但是,对于这些不支持该函数的浏览器,你可以使用 attachEvent() 方法来添加事件句柄
如果浏览器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代
var x = document.getElementById("myBtn");
if (x.addEventListener) { //所有主流浏览器,除了 IE 8 及更早 IE版本
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早 IE 版本
x.attachEvent("onclick", myFunction);
}
4. 自己的示例
<p-dialog header="详情"
[(visible)]="displayDialog"
[modal]="true"
[responsive]="true"
[style]="{width: '70%',height: '70%'}"
[minY]="10"
[maximizable]="true"
[baseZIndex]="10000">
<iframe id="dialog-iframe"
[src]="recId | bypassSecurityTrustUrl"
frameborder="0"
style="height: 65rem;margin-top: -7.2rem;"></iframe>
<p-footer>
<button type="button" pButton icon="pi pi-check"
(click)="displayDialog=false" label="确定"></button>
</p-footer>
</p-dialog>
selectInfo(event, type) {
//当放大按钮点击时,动态更改弹窗的大小
setTimeout(() => {
let dialogiframe = document.getElementsByClassName('ui-dialog-titlebar-maximize')[0];
document.getElementById("dialog-iframe").style.height = '65rem'; //未点击放大前的高度
dialogiframe.addEventListener('click', () => {
document.getElementById("dialog-iframe").style.height = 'calc(100% + 7.2rem)'; //点击后的高度
});
}, 100);
}
更多推荐
已为社区贡献16条内容
所有评论(0)