javascript中的addEventListener()方法

xiaoqihv8个月前 (04-08)前端设计39

我们操作HTML DOM对象的时候,可以利addEventListener()方法为某个被选中的DOM对象添加一个事件,用来操作这个被选中的对象。下面就记录一下,如果利javascript的addEventListener方法,为HTML的ODM对象添加一个事件!

addEventListener()定义与语法

addEventListener()用于向指定的元素添加事件

element.addEventListtener(event,function,useCapture);

addEventListener()举个例子:

点击按钮一个ID为button的按钮,并向一个ID为la的div层中插入内容自定义内容,飞鸟慕鱼博客

html代码:

<button id="buttom">点我</button><div id="la"></div>

javascript代码1:

document.getElementById("button").addEventListener("click" function(){    document.getElementById(la).innerHTML = "飞鸟慕鱼博客";})

javascript代码2:

document.getElementById("button").addEventListener("click" dome1);function dome1(){    document.getElementById("la").innerHTML = "飞鸟慕鱼博客";}

关于addEventListener()整体代码:

addeventlistener 参数, addeventlistener 用法

<!DOCTYPE html><html>    <head>    </head>    <body>        <button id="buttom">点我</button>        <div id="la"></div>        <script>        //第一种            document.getElementById("button").addEventListener("click" function(){                document.getElementById(la).innerHTML = "飞鸟慕鱼博客";            })        //第二种            document.getElementById("button").addEventListener("click" dome1);            function dome1(){                document.getElementById("la").innerHTML = "飞鸟慕鱼博客";            }        </script>    </body></html>

代码未作完整测试,只做一个记录备注,使用前请测试!

相关文章

javascript在指定的元素前或后插入新元素

javascript在指定的元素前或后插入新元素

在前几篇的博文中,我们说了利用appendChild方法可以在DOM文档流中指定的元素后追加利用createElement方法和createTextNode方法创建的新元素,但是appendChild...

JavaScript中for...in 语句详解

JavaScript中for...in 语句详解

在编程中我们会使用到各式各样的循环语句,以使我们可以对一个数组进行读操作或是写入赋值的操作,当然在javascript中这少不了这样的循环语句的存在。今天记录一下关于JavaScript for......

JavaScript中常见获取元素的方法汇总

JavaScript中常见获取元素的方法汇总

网页的制作离不开JavaScript(JS)今天就说说那些关于JavaScript(JS)操作DOM节点的一些属性,做个记录,以备后续查找!getattribute()DOM提供了一个名为getEle...

javascript中的addLoadEvent函数解析

javascript中的addLoadEvent函数解析

onload事件是HTML DOM Event 对象的一个属性,又叫事件句柄(Event Handlers),它会在页面或图像加载完成后(注意是加载完成后)立即发生。window.onload = f...

javascript中的innerHTML属性有什么作用

javascript中的innerHTML属性有什么作用

innerHTML在javaScript中具有双向功能,一是可以从指定的元素对象中获取内容,二是可以把自定义内容插入到指定的元素对象中去。定义和用法innerHTML属性用于设置或返回指定标签之间的H...

JaveScript操作DOM节点的childNodes属性

JaveScript操作DOM节点的childNodes属性

在一棵节点树上(DOM文档),childNodes属性可以获取任何一个节点下的所有子元素节点,它获取的值是一个包含这个元素全部子元素的数组,但是这个数组中包含的东西太多,几乎每一样东西都是一个节点,甚...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。