展开

关键词

attachEventaddEventListener区别

一般来说,可以直接封装成这种形式: var addEvent = function(element,type,handler){ if(element.addEventListener ){ //DOM2级 element.addEventListener(type,handler,false); //false为冒泡,true为捕获 的使用方式:主要是DOM2级 target.addEventListener(type, listener, useCapture); target就是要注册事件的对象 type就是事件类型  比如“click var btn1Obj = document.getElementByIdx("btn1"); //element.addEventListener(type,listener,useCapture) ; btn1Obj.addEventListener("click",method1,false); btn1Obj.addEventListener("click",method2,false); btn1Obj.addEventListener

35120

addEventListener() 方法

("demo").innerHTML = "Hello World"; }); 1 2 3 定义用法 addEventListener() 方法用于向指定元素添加事件句柄。 提示: 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。 语法 element.addEventListener(event, function, useCapture) 1 参数值 event 必须。字符串,指定事件名。 ( , ) hashchange 该事件在当前 URL 的锚部分发生修改时触发。 load 一张页面或一幅图像完成加载。 ( ) 表单事件 blur 元素失去焦点时触发 change 该事件在表单元素的内容改变时触发( , , , ) focus 元素获取焦点时触发 focusin 元素即将获取焦点是触发

5410
  • 广告
    关闭

    【玩转 Cloud Studio】有奖调研征文,千元豪礼等你拿!

    想听听你玩转的独门秘籍,更有机械键盘、鹅厂公仔、CODING 定制公仔等你来拿!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    在元素上写事件addEventListener()的区别

    在元素上写事件addEventListener()的区别 onclick添加事件不能绑定多个事件,后面绑定的会覆盖前面的。而addEventListener能添加多个事件绑定,按顺序执行。 onclick只能冒泡,addEventListener()可以得到捕获or冒泡。 addEventListener方式,不支持低版本的IE。(attachEvent 支持IE)。 addEventListener绑定后则可以用 removeEvenListener 取消。 addEventListener 是W3C DOM 规范中提供的注册事件监听器的方法。 addEventListener用法: 语法: element.addEventListener( type , listener , useCapture ) – – 添加事件监听 – – type addEventListener兼容写法: IE9之前浏览器使用element.attachEvent(type, callback) attachEvent(type, callback) type:

    6420

    addEventListener() 方法,事件监听

    addEventListener() 方法,事件监听 你可以使用 removeEventListener() 方法来移除事件的监听。 语法 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 “click” 或 “mousedown”). 你可以使用函数名,来引用外部函数: element.addEventListener("click", function(){ alert("Hello World!") addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型: addEventListener( event, function, useCapture () removeEventListener() 方法。

    6330

    onclick与addEventListener区别

    具体的事件分析可查看另一篇文章 结论: 1.onclick事件在同一时间只能指向唯一对象 2.addEventListener给一个事件注册多个listener 3.addEventListener对任何 对于多个相同的事件处理器,不会重复触发,不需要手动使用removeEventListener清除 5.IE9使用attachEventdetachEvent 探究: onclick添加事件: element.onclick 对于IE9之前,相对应的是attachEventdetachEvent 总结: 1.onclick事件在同一时间只能指向唯一对象 2.addEventListener给一个事件注册多个listener 3.addEventListener对任何DOM都是有效的,而onclick仅限于HTML 4.addEventListener可以控制listener的触发阶段,(捕获/冒泡)。 对于多个相同的事件处理器,不会重复触发,不需要手动使用removeEventListener清除 5.IE9使用attachEventdetachEvent 参考文献: https://developer.mozilla.org

    4810

    js添加事件移除事件:addEventListener()与removeEventListener()

    另有js事件详解 点击打开链接 一.addEventListener()removeEventListener()讲解 addEventListener()与removeEventListener ()用于处理指定删除事件处理程序操作。 这也意味着通过addEventListener()添加的匿名函数无法移除 错误用法示例: document.body.addEventListener('touchmove', function ('touchmove',bodyScroll,false); 重写后的这个例子在addEventListener()removeEventListener()中用的是相同的函数。 ");},false); inner.addEventListener('click',function(){alert("我是最里面的");},true); </script> addEventListener

    10920

    addEventListener() 方法,事件监听

    语法 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 "click" 或 "mousedown"). 你可以使用函数名,来引用外部函数: element.addEventListener("click", function(){ alert("Hello World!") ; }); element.addEventListener("click", myFunction); function myFunction() { alert ("Hello World addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型: addEventListener(event, function, useCapture); 默认值为 () removeEventListener() 方法。

    76580

    移动端(video) transformOringe addEventListener

    background: black; } </style> </head> <body>

    <script type="text/javascript"> /*addEventListener ("load",function() { alert(1); },false); addEventListener("load",function() { alert */ /*function show() { alert(1); div1.removeEventListener("click",show); } div1.addEventListener

    19230

    Javascript 的addEventListener()及attachEvent()区别分析

    Mozilla中:  addEventListener的使用方式:  target.addEventListener(type, listener, useCapture);  target: 文档节点 ;  btn1Obj.addEventListener("click",method1,false);  btn1Obj.addEventListener("click",method2,false); )  if (typeof window.addEventListener ! ”,rollover) } 上述的 typeof window.addEventListener ! = “undefined” 程序代码可以判断使用者的浏览器是否支持AddEventListener这个事件模型, 如果不支持就使用attachEvent.

    58160

    js-addEventListener()第三个参数useCapture

    js-addEventListener()第三个参数useCapture 概述: 第3个参数叫做useCapture,是一个boolean值,就是true or false 。 document.getElementById('div2' ), oDvi3 = document.getElementById('div3' ); // 123- > 456- > 345 oDvi1.addEventListener ('click',xx1,true ); oDvi2.addEventListener( 'click',xx2,false ); oDvi3.addEventListener( 'click',xx3

    32920

    事件监听函数,以及事件的捕获冒泡机制

    事件一般是用于浏览器用户操作之间的交互,当用户执行某些特殊的操作时,浏览器给予反应,触发绑定的事件,事件流,事件发生时会在元素节点根节点之间按照约定的顺序传播,事件经过的所有节点都会受到事件的影响, 这个传播过程被称为DOM事件流 函数事件 事件一般是用于浏览器用户操作之间的交互,当用户执行某些特殊的操作时,浏览器给予反应,触发绑定的事件 事件流,事件发生时会在元素节点根节点之间按照约定的顺序传播 (),如果加了参数()则表示立即执行,不需要触发第一个参数要求的条件 2.在这里绑定事件的时候,事件名不能定义的变量名一样,否则无效 2.removeEventListener()--移除事件监听函数 3.利用事件的捕获冒泡做点事情 addEventListener()removeEventListener()其实拥有三个参数,刚才说过了,第一个表示触发条件,第二个表示触发事件,第三个参数正常情况下可以省略 代码的高度耦合问题 2.缺点:一个元素只能绑定一个事件处理函数,只会在事件冒泡中运行 DOM2级事件处理程序 该级别的事件处理程序,运用的就是事件捕获冒泡机制 <button id="btn">测试<

    9610

    一篇文章带你了解JavaScript 事件监听

    一、addEventListener()方法 addEventListener()方法将事件处理程序附加到指定的元素。 可以重写随机颜色,如下所示: 例: <! 将addEventListener()方法附加到按钮上。addEventListener()接受两个必填参数-要监听的事件监听器回调函数。 1. 将事件监听添加到Window对象 此外,可以addEventListener()在文档窗口对象上使用。 本示例使用以下addEventListener()方法将click事件附加到文档: document.addEventListener("click", function() { alert("Hello 当前,事件监听是处理JavaScript中事件的最常见首选方式。

    17540

    js 事件笔记

    3、DOM2事件处理程序 3.1简介 DOM2事件处理程序可以解决不能绑定多个事件处理函数的问题 DOM2级事件定义了两个方法用于处理指定删除事件处理程序的操作: addEventListener removeEventListener ('click', function() { alert(this.id); }, false); </script> 总结:addEventListener 制定事件处理程序的不同 2、event的常见属性 event对象包含与创建它的特定事件有关的属性方法,触发事件的类型不同,可用的属性方法也不同,但是所有事件都会包含 ? 当存在嵌套的时候,两者不一样,具体详情可以见这篇文章链接描述,或者中文版event.target event.currentTarget。 五、阻止事件代理 哈哈哈写事件代理前,找到了这篇事件代理的文章用例子解释事件模型事件代理,这里写事件模型的历史也写得相当棒,所以先就转载过来了。

    2.3K21

    JavaScript绑定事件的三种方式

    此时,就需要使用addEventListener的方式来添加事件。 ("input")[0]; bt.addEventListener("click", function(){ alert(1) }) bt.addEventListener("click", 那么捕获冒泡又是什么呢? 捕获冒泡会影响到事件的执行顺序 var a = document.getElementById("a"); var b = document.getElementById("b"); var c = 或者是前面提到的return false 对于IE下的事件绑定 适用与IE6,7,8 IE的事件与模型与W3C的标准事件相比,主要是以下三点不同: 绑定事件的函数不同,IE中使用attachEvent()detachEvent

    19730

    浏览器 DOM 元素的事件代理指的是什么

    当然,浏览器开发者们早已根据 W3C 事件规范[1]实现好了底层的逻辑,我们只需要通过 Web API 中的 DOM Event[2],通过注册想监听的 DOM 元素事件的事件监听器(Event Listener 在使用 addEventListener 注册事件监听器时,可以通过传递第三个参数,指定此事件监听要在什么阶段触发: elem.addEventListener('click', eventHandler ) // 未指定,预设为冒泡 elem.addEventListener('click', eventHandler, false) // 冒泡 elem.addEventListener('click 库框架中的事件处理 在 DOM 事件处理的这部分,jQuery Vue 都将原生的事件监听器做了封装,方便我们快速设定、使用,甚至会自动帮你移除无用的事件监听。 ,事件监听器之间的执行顺序很有可能会预期不一致,在写 React 的时候要特别注意。

    28330

    面试官:考你几个简单的事件问题吧

    ---- 事件流的三个阶段:事件捕获阶段、目标阶段事件冒泡阶段(这个问题大多数同学都知道,很容易被问懵)。 事件处理函数(事件侦听器):响应的某个事件函数。 (){ console.log("按钮被点击了"); }); 上述这种onclickaddEventListener两种添加事件的方式有什么不同? attachEvent如果添加多个事件处理程序那么先执行后添加的后执行先添加的,这与addEventListener恰好相反(IE9IE10修改了执行顺序addEventListener一样了,先添加的先执行 body(或者window对象),img,script(IE9+),link(IEOpera支持)。 点击一下鼠标前后会调用那些事件? mousedown > mouseup > click。 捕获事件") },true); 执行的结果是: document.body捕获事件 冒泡事件1 冒泡事件2 捕获事件1 捕获事件2 document.body冒泡事件 事件是先捕获后冒泡的,所以第一个最后一个是没有问题的

    25330

    Event(事件)的传播与冒泡

    特性说明原理图: 标准浏览器Ie9+浏览器都支持事件的冒泡捕获,而IE8-浏览器只支持冒泡 标准Ie9+浏览器用stopPropagation()或cancelBubble阻止事件传播,而ie8 stopPropagatin()方法用于阻止事件的传播,如果设置在捕获阶段,则目标冒泡阶段不会被执行; cancelBubble属性只能阻止冒泡阶段,对捕获目标阶段的事件不能阻止 preventDefault ()window.event.returnValue用于标准浏览器ie9+,都可以阻止默认事件。 -
    "); setBorderColor($body,'#0866ff ',0,event); },true); $wrap[0].addEventListener }); }); 实现一个完整的event流的Demo 在cont的捕获事件处有阻止事件传播的代码 阻止默认事件只用于验证 应用场景 捕获阶段的事件应用场景较少,一般情况下都应用在目标冒泡阶段

    53590

    扫码关注腾讯云开发者

    领取腾讯云代金券