1. addEventListener()添加事件监听

使用 addEventListener()方法用于向指定元素添加事件句柄。
addEventListener(event, function, useCapture)

  1. 参数event必填,表示监听的事件,例如 click, resize等,不加前缀on的事件。
  2. 参数 function必填,表示事件触发后调用的函数,可以是外部定义函数,也可以是匿名函数。不带参数。
  3. 参数 useCapture选填,填true或者false,用于描述事件是冒泡还是捕获触发,true表示捕获,默认false表示冒泡。

2. removeEventListener()移除事件监听

使用 removeEventListener()方法来移除 addEventListener() 方法添加的事件句柄。

  1. 如果function参数传的是匿名函数,没办法用removeEventListener来移除监听。代码如下:
mounted(){
    window.addEventListener('resize',()=>{
        console.log('处理窗口缩放时要处理的逻辑操作!');
    });
},
  1. 如果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);
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐