DOM—addEventListener() & removeEventListener()

DOM EventListener:
方法:
addEventListener():用于向指定元素添加事件句柄
removeEventListener():移除方法添加的事件句柄

<body>
    <button id="btn">按钮</button>
    <script>
        //放在button标签后面,放在前面,无法获取标签
        var x = document.getElementById("btn");
        x.addEventListener("click", hello);//添加句柄
        x.addEventListener("click", world);//为事件添加多个句柄,不会被覆盖
        x.removeEventListener("click", hello);//移除句柄
        function hello() {
            alert("Hello");
        }
        function world() {
            alert("World");
        }
    </script>
</body>
时间: 2025-01-06 14:20:10

DOM—addEventListener() & removeEventListener()的相关文章

js addEventListener removeEventListener

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px "Helvetica Neue"; color: #454545 } li.li2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } li.li3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px &quo

HTML DOM addEventListener() 方法

实例 为 <button> 元素添加点击事件. 当用户点击按钮时,在 id="demo" 的 <p> 元素上输出 "Hello World" : document.getElementById("myBtn").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "

dom addeventlistener与id 绑定事件的区别

文档中有写. //addEventListener() 方法用于向指定元素添加事件句柄. //提示: 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄. //Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法,,Opera 7.0 及 Opera 更早版本也不支持. 但是,对于这些不支持该函数的浏览器,你可以使用 attachEvent() 方法来添加事件句柄 (查看 "更

Dom addEventlistener与id 绑定事件的区别(续)

addEventListener 第三个参数为 useCapture. 以一个例子说明. <div id="div1" style="background: blue;width: 100px; height: 100px;"> <div id="div2" style="background: red;width: 70px; height: 70px;"> <div id="div3

vue 创建监听,和销毁监听(addEventListener, removeEventListener)

最近在做一个有关监听scroll的功能, 发现我添加监听之后一直不起作用: 1 2 mounted() {     window.addEventListener("scroll", this.setHeadPosition); //this.setHeadPosition方法名 1 后来发现要在后面添加一个true之后才行: 1 2 3 mounted() {   window.addEventListener("scroll", this.setHeadPosi

HTML DOM addEventListener() 方法笔记

element.addEventListener(event, function, useCapture) 参数useCapture可选.布尔值,指定事件是否在捕获或冒泡阶段执行.可能值:true - 事件句柄在捕获阶段执行false- false- 默认.事件句柄在冒泡阶段执行 http://www.runoob.com/try/try.php?filename=tryjsref_element_addeventlistener_capture 查看事例:该实例演示了在添加事件监听时冒泡与捕获

js事件之this获得元素的属性 | 删除onclick事件 | 使事件失效 | addEventListener() | removeEventListener()

js操作DOM动态添加和移除事件

非IE下,注意事件名不带on,如onclick为click 添加事件:DOM对象.addEventListener('事件名',函数名,true/false); 删除事件:DOM对象.removeEventListener('事件名',函数名,true/false); 第三个参数是useCapture,如果为true,浏览器采用capture截获处理事件顺序:如果为false,浏览器采用bubbing冒泡方式处理事件顺序 一般为false 给个例子,可以自己修改true或false来看效果: <

从原型链看DOM--Node类型

前言: 本系列从原型,原型链,属性类型等方面下手学习了DOM文档对象模型,旨在弄清我们在DOM中常用的每一个属性和方法都清楚它从哪里来要到哪里做什么事,这样对于理解代码有一定启发.全靠自己在总结中摸索,所以对于一个问题要是深究还真能挖出许多有意思的东西,现在觉得JavaScript这个东西简直越来越有意思了. 正文:DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加,移除,修改页面某一部分,现在它已成为表现和操作页面