addEventListener监听事件会卡顿

2024-10-20

记录一个关于 Document.on绑定事件后，导致页面卡顿的情况

假设当前页面的js文件中有如下函数: function A(){ function B(); } function B(){ $(document).on("click","#元素id",function(){ dosomething……; }); } 函数A是一个按钮上绑定的onclick函数处理: 那么每次点击按钮触发A函数之后,都会导致B函数的执行,进而 $("#元素id") 这个元素就会绑定一次点击事件. 如果多次触发A函数之后,导致 $

vue 中监听窗口发生变化，触发监听事件， window.onresize && window.addEventListener('resize'，fn) ，window.onresize无效的处理方式

// 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventListener('resize', function() { console.log('窗口发生变化') }) onresize的定义方式一.直接在html中定义如<body onresize="doResize()"/> 二.直接给onresize赋值可以给window

javascript事件有哪些？javascript的监听事件

事件类型: 1.界面事件 onload:描述文档,图片,css已经frame,object加载完毕时触发,window.onload window.onload = function(){ //代表图片,dom元素,iframe,css加载完毕以后 //才触发的事件 } $(function(){ //dom css js 初始化就加载事件 //调用了图片的unload事件 }); onunload:移除加载事件 onabort:XMLHttpRequest onerror:文档加载失败,图片加

浅谈postMessage多页面监听事件

最近做了一个Echarts和Highcharts多图多页面连动的效果,就用到postMessage 如下介绍: 最开始在最外围的页面也就是所有页面的父级页面添加postMessage监听事件以便监听下面子级页面的动态,代码: window.parent.addEventListener('message',function(e){ if(e.source != window.parent) return; var names = localStorage.getItem("toName"

js监听事件上滑消失下滑出现的效果触摸与手势事件

https://www.w3cmm.com/javascript/touch.html //触摸与手势事件连接tinyscrollbar //方法1var _this = $('#fabu');var scrollFunc=function(e){ e=e||window.event; if(e.wheelDelta){//IE/Opera/Chrome if(e.wheelDelta==-120){ _this.hide(); }else{ _this.show(); } }else if(e

JAVAscript学习笔记 js句柄监听事件第四节（原创）参考js使用表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>句柄添加监听事件</title> <script type="text/javascript" src="tzy.js"></script> </head> <body>

js监听事件

//// 监听事件监听使用各种浏览器 // var p1 = document.getElementById("p1"); //// 监听事件 // eventUtil.addEvent(p1,"click",p1Fun); //// 移除事件 // eventUtil.deleteEvent(p1,"click",p1Fun); // // var p1Fun = function(){ // alert("p1") //

js 监听事件的叠加和移除

html DOM元素有很多on开头的监听事件,如onload.onclick等,见DOM事件列表.但是同一种事件,后面注册的会覆盖前面的: window.onresize = function(){ alert(1); } window.onresize = function(){ alert(2); } // 改变窗口大小时,只会弹出2 addEventListener监听利用addEventListener添加监听事件,可以重复添加,并不会互相覆盖: window.addEventList

JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件

JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log("aaaaa"); }); JQ: $("input对象").on("input propertychange",function(){ console.log($(this).val()); }): 这个也适用与textarea标签的内容的及时监

DOM初体验（绑定事件，监听事件）

JavaScript的组成: ECMAScript(js的基本语法).DOM(文档对象模型).BOM(浏览器对象模型) DOM的作用: 1. 找到页面上的元素 2. 增添.删除.修改页面上的元素 3. 增添.删除.修改页面上的属性 4. 删除页面上的元素 5. 创建页面元素 DOM做的是就是增删改查 DOM级别 1. DOM0:js在浏览器中最初的获取页面元素的方式 2. DOM1:w3c为了统一标准,规定了节点类型,使不同的浏览器有相同的使用方法 3. DOM2,DOM3:各自在之前的标准基础

egret之移除带参数的监听事件

this.selectBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onClickNewIndo.bind(this,this.data), this);//添加监听事件 public onClickNewIndo(data,evt:egret.TouchEvent) { this.selectBtn.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onClickNewIndo

监听浏览器tab选项卡选中事件，点击浏览器tab标签页回调事件，浏览器tab切换监听事件

js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if(document.visibilityState=='visible') { //状态判断:显示(切换到当前页面) // 切换到页面执行事件 var normal_title=document.title; //title标签的内容 alert(normal_title); }else if(document

DOM 事件监听事件冒泡事件捕获

addEventListener() 方法实例: // 当用户点击按钮时触发监听事件: document.getElementById("myBtn").addEventListener("click", displayDate); addEventListener() 方法用于向指定元素添加事件句柄. addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄. 你可以向一个元素添加多个事件句柄. 你可以向同个元素添加多个同类型的事件句柄,

移动端触摸touchstart监听事件

click.mousedown等事件适用于PC端,在移动端会有一定时间的延迟,所以更好的优化移动端体验,要用touch事件, 1.首先要添加一个监听事件,监听移动端行为 element.addEventListener(event, function, useCapture) 我这里是针对浏览器行为,所以监听事件为 // 添加触摸监听事件,如果手指触摸到阴影区域,弹出层消失! document.addEventListener('touchstart',touch, false) functio

js监听事件的绑定与移除

监听事件的绑定与移除主要是addEventListener和removeEventListener的运用. addEventListener语法 element.addEventListener(type,handler,false/true) type:事件类型 handler:事件执行触发的函数 false/true:false为冒泡/ture为捕获,参数是true,表示在捕获阶段调用事件处理程序:如果是false,表示在冒泡阶段调用事件处理程序. 事件捕获:父级元素先触发,子集元素后触发:

Android中Button的五种监听事件

简单聊一下Android中Button的五种监听事件: 1.在布局文件中为button添加onClick属性,Activity实现其方法2.匿名内部类作为事件监听器类3.内部类作为监听器4.Activity本身作为事件监听器,实现onClickListener5.外部类作为监听器 ButtonListenerActivity.class public class ButtonListenerActivity extends AppCompatActivity implements View.On

Second Day: 关于Button监听事件的三种方法（匿名类、外部类、继承接口）

第一种:通过匿名类实现对Button事件的监听首先在XML文件中拖入一个Button按钮,并设好ID,其次在主文件.java中进行控件初始化(Private声明),随后通过SetOnClickListener方法进行内部类的事件监听详细代码粘贴如下: package com.example.oncli; import android.app.Activity;import android.os.Bundle;import android.util.Log;import android.vie

js 获取当前焦点所在的元素、给元素和input控件添加键盘监听事件、添加页面级的键盘监听事件

页面级的键盘监听事件 document.onkeydown = function (event) { var e = event || window.event || arguments.callee.caller.arguments[0]; if (e && e.keyCode == 13) { // enter 键 //要做的事情 alert("按 Enter"); } if (e.keyCode == 86 && e.ctrlKey) { aler

android listview 的监听事件

今天遇到了一个比较让我头疼的问题,不过追根揭底只是我对listview理解的不够透彻罢了, 闲言少叙,说说我遇到的问题吧: 上篇随笔我写了关于listview的使用,如果你也已经写好了列表那么恭喜这一篇对你也有用当然如果你还没有搭好可以先去看看我的上一篇(上篇地址:http://www.cnblogs.com/wobeinianqing/p/5064740.html) 相信很多新手都跟我一样总想这把被点击的item的内容传递给相应对的详情页,其实这种想法是很错误的 listview的功能只管展

Android成长日记-Android监听事件的方法

1. Button鼠标点击的监听事件 --setOnClickListener 2. CheckBox, ToggleButton , RadioGroup的改变事件 --setOnCheckedChangeListener Eg: 3. onPageChangeListener() ----用来监控ViewPager滑到第几页

Vue 为什么在 HTML 中监听事件?

为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难.实际上,使用 v-on 有几个好处: 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法. 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM

addEventListener监听事件会卡顿

热门专题