window.addEventListener来解决让一个js事件执行多个函数

【window.addEventListener来解决让一个js事件执行多个函数】的更多相关文章

window.addEventListener来解决让一个js事件执行多个函数

可能你也碰到过这种情况,就是在js的代码中用了window.onload后,可能会影响到body中的onload事件.这时就要用window.attachEvent和window.addEventListener来解决一下,需要的朋友可以参考下可能你也碰到过这种情况,就是在js的代码中用了window.onload后,可能会影响到body中的onload事件.你可以全写在body中,也可以全放到window.onload中,但是这样并不是很方便,有时我们需要两个同时用到.这时就要用wind…

关于js事件执行顺序

关于js事件执行顺序小技巧 js事件执行顺序是js中一个老生常谈的一个话题, 聊这个话题之前我们先谈谈怎么给页面元素绑定我们需要的事件 1.给页面元素绑定事件 a)直接在元素上面加上需要绑定的事件,如 <button type="button" onclick="console.log('111')"></button> 结果如下: 此方法不建议使用,有两方面的原因, 1)此方法绑定的方法必须为一个全局的方法,而通常我们需要绑定的方法都是针对…

关于js事件执行顺序小技巧

js事件执行顺序是js中一个老生常谈的一个话题, 聊这个话题之前我们先谈谈怎么给页面元素绑定我们需要的事件 1.给页面元素绑定事件 a)直接在元素上面加上需要绑定的事件,如 <button type="button" onclick="console.log('111')"></button> 结果如下: 此方法不建议使用,有两方面的原因, 1)此方法绑定的方法必须为一个全局的方法,而通常我们需要绑定的方法都是针对某一处特定的方法,并不具备通…

JS事件之自建函数bind()与兼容性问题解决

JavaScript事件绑定常用方法对象.事件 = 函数; 它只能同时为一个对象的一个事件绑定一个响应函数不能绑定多个,如果有多个,后面的会覆盖前面的 addEventListener() 此方法也可以为元素绑定响应函数参数: 事件的字符串(不带on) 回调函数,事件触发时执行是否在捕获阶段触发事件,一般都传false 使用此方法可以为一个元素的同一事件绑定多个响应函数当事件触发时,按绑定顺序依次执行 attachEvent() IE8及以下浏览器不支持addEventListener…

js eval()执行传参函数的写法

.cs public class Message<T> { // 数据总数 public int? Total { get; set; } // 关键数据 public List<T> Rows { get; set; } // 信息状态 // 0:失败,1:成功, 2:其它 public int? Status { get; set; } // 返回信息 public string Msg { get; set; } //js前台执行方法 public string JsExec…

检测一个js写的URL拼接函数

有时,我看代码不太理解时,直接调用函数进行输出,是很一个不错的习惯. 今天遇到的调试的结果如下. <script> const U = function (opt, url) { var m = opt.m || 'ebapi', c = opt.c || 'auth_api', a = opt.a || 'index', q = opt.q || '', p = opt.p || {}, params = '', gets = ''; if (url == undefined) url=ge…

js事件执行顺序

http://ejohn.org/blog/how-javascript-timers-work/…

禁止一个click事件执行的方法

用jquery点击一次之后,在里面给这个元素加上这个样式,就可以了. 'pointer-events':'none'…

一个JS正则的字符串替换函数

直接上函数吧不废话 function replacestring(oldstr,newstr,text) { var exp = new RegExp(oldstr,'g'); var c=text.replace(exp,newstr); return c; } var oldstr='world'; var newstr='cccc'; var text='Hello world, Hello world'; var aa= replacestring(oldstr,newstr,tex…

什么是js事件，冒泡机制，事件捕获，默认行为

js事件: javascript使我们能够有能力创建动态页面,事件就是可以被js侦测到的行为,网页中每个元素都可以产生某些触发js函数的事件. 例如我们可以在用户点击某个按钮时产生一个click事件来触发某个函数. 事件冒泡: 就是事件从目标开始,网上冒泡直到页面的最上一级标签,也就是当一个元素被触发,同样的事件也会在该元素的所有祖先元素中从内向外一次触发. 解决冒泡事件: 事件名.stopPropagation()或者直接return false. 在IE中,window.e.cancelBu…

js事件小记

参考javascript编程全解 javascript高级程序设计 javascript经典实例对事件的处理方式称为事件处理程序或事件侦听器 ,对于一个元素或事件,只能设定1个事件处理程序,却可以同时设定多个事件监听器 1)设定为HTML元素的属性 <!DOCTYPE html> <meta charset="UTF-8" /> <head></head> <body> <a href="http://ww…

js事件冒泡和事件捕获详解

Javascript与HTML之间的交互是通过事件实现. 一.事件流事件,是文档或浏览器窗口中发生的一些特定的交互瞬间.事件流,描述的是页面中接受事件的顺序.IE9,chrome,Firefox,Opera,Safari均实现了DOM2级规范中定义的标准DOM事件,而IE8和IE8以下版本仍然保留专有的事件处理方式. 事件冒泡事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播. <!DOCTYPE html> <html…

js事件流事件捕获及时间冒泡详解

Javascript与HTML之间的交互是通过事件实现. 一.事件流事件,是文档或浏览器窗口中发生的一些特定的交互瞬间.事件流,描述的是页面中接受事件的顺序.IE9,chrome,Firefox,Opera,Safari均实现了DOM2级规范中定义的标准DOM事件,而IE8和IE8以下版本仍然保留专有的事件处理方式. 事件冒泡事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播. <!DOCTYPE html> <html…

Node.js事件的正确使用方法

前言事件驱动的编程变得流行之前,在程序内部进行通信的标准方法非常简单:如果一个组件想要向另外一个发送消息,只是显式地调用了那个组件上的方法.但是在 react 中用的却是事件驱动而不是调用. 事件的好处这种方法能够使组件更加分离.在我们继续写程序时,会识别整个过程中的事件,在正确的时间触发它们,并为每个事件附加一个或多个事件监听器,这使得功能扩展变得更加容易.我们可以为特定事件添加更多的 listener,而不必修改现有的侦听器或触发事件的应用程序部分.我们所谈论的是观察者模式. 设计一个事…

Js基础知识6-JavaScript匿名函数和闭包

匿名函数 1,把匿名函数赋值给变量 var test = function() { return 'guoyu'; }; alert(test);//test是个函数 alert(test()); 2,把匿名函数自我执行的返回值赋值给变量 var test = (function() { return 'GY'; })(); alert(test);//弹出 GY 3,自我执行,第一个圆括号放匿名函数,第二个括号执行并传参 (function(a, b) { alert(a+b); })(2,5…

关于js预编译以及js文件执行顺序的几个问题。

关于js的执行原理,除去html页面中直接添加的代码,js代码的放置可以分为两类. //情形a <script type="text/javascript" src="xxx.js"$amp;>amp;$lt;/script> //情形b <script type="text/javascript"> code...... …

js定时执行函数

//方法一: //直接现定义函数 var time = window.setInterval(function(){ $('.lingdao_right').click(); },5000); //方法二: //执行已经有的函数 var time = window.setInterval('abc()',5000); //清除js自动执行 clearInterval(time); //time就是定义时的名称,如上…

一次关于js事件出发机制反常的解决记录

起因:正常情况下我点击s2时是先弹出我是children,再弹出我是father,但是却出现了先弹出我是father,后弹出我是children的情况,这种情况是在和安卓app交互的h5页面中出现的,本地测试没有问题,但是在安卓打包的内嵌h5页面就出现了问题.简单化的代码先展示出来. html代码如下 <div id="father" class="ss1">s1 <div id="children" class="s…

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…

（转载）JS事件监听 JS:attachEvent和addEventListener使用方法

(转载)http://www.chhua.com/web-note146 attachEvent和addEventListener使用方法 Js代码 <html> <head> <title>JS</title> </head> <body> <input id="para" type="text"/> <script> function test() { alert(&…

JS事件监听 JS:attachEvent和addEventListener 使用方法

attachEvent与addEventListener区别适应的浏览器版本不同,同时在使用的过程中要注意attachEvent方法按钮onclickaddEventListener方法按钮click 两者使用的原理:可对执行的优先级不一样的事件进行操作:attachEvent方法,为某一事件附加其它的处理事件.(不支持Mozilla系列) addEventListener方法用于 Mozilla系列举例: Js代码 document.getElementById…

弯道超车，换一个思路，避免addEventListener为同一个元素重复赋予事件

addEventListener可以给同一个元素赋予多次同一个事件. 执行一次,就多一次事件效果.这不是我想要的. window.onload = function(){ var box = document.getElementById("box"); box.onclick = function(){ console.log("我是box1"); } box.onclick = function(){ box.style.fontSize = "18p…

vb.net WPF webbrowser window.close 关闭后不触发 WindowClosing 事件 WNDPROC解决方式

vb.net WPF webbrowser window.close 关闭后不触发 WindowClosing 事件 WNDPROC解决方式 #Region "WPF 当浏览器窗体关闭时触发 Quit事件 " #If OnSourceInitialized Then Protected Overrides Sub OnSourceInitialized(e As EventArgs) 'onload 等句柄创建后引用WSInitialized(Me, e) WSInitializ…

为什么JS事件函数里面都有一个参数（ev）？

因为ev是事件的参数啊!在ev中包含了事件触发时的参数,比如click事件的ev中包含着.e.pageX,e.pageY,keydown事件中包含着ev.keyCode等,在ie中,ev是全局的可以通过window.event来获取,在其他浏览器中都是作为参数传入的.所以好多事件函数都是这样写:mydiv.onclick = function(ev){ if(!ev){ev = window.event;} //这句也可以简写成:ev=window.event||ev; alert(ev.p…

一个取消事件的简单js例子(事件冒泡与取消默认行为)

先上代码: <div id='outer' onclick='alert("我是outer")'> <div id="middle" onclick='alert("我是middle")'> <div id="inner" onclick='myBubble(arguments[0]);alert("我是inner")'><a onclick='myDefault(…

window.addEventListener绑定事件记得删除

在做postMessage通信时,window.addEventListener绑定的事件记得要remove掉就和setTime一样,不然占用内存资源…

(转载)js(jquery)的on绑定点击事件执行两次的解决办法

js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的alert会执行两次,相应地数组删除也执行两次,具体代码如下(其中.tabDel是页面加载之后新生成的元素,故不能用普通的$(‘.tabDel).click(function(){})的方法添加点击事件): $('.right').on('click','.tabDel',function(){//删除所…

JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

javascript 点击事件执行两次js问题在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbind('click').click(function(){ //此处填写逻辑代码 }) ------ 因为利用js在页面加载后添加需要点击事件的代码,发现在点击后会代码会执行两次,因为有toggle效果,导致弹窗出现又很快丢失查了一些资料,发现这是冒泡的原因,需要在点击事件代码中加入阻止冒泡的方法: e.s…

写一个js向左滑动删除交互特效的插件——Html5 touchmove

需求描述需要实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现使用了h5的touchmove等事件,以及用js动态改变css3的translate属性来达到动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp…

js事件绑定及深入

学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一传统事件绑定的问题传统事件绑定中的内联模型不做讨论,基本很少去用.先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数.传统绑定如: window.onload=function(){ var box=document.getEleme…