DOM注册事件的三种方式~满满的干货哦 |
您所在的位置：网站首页 › js绑定事件的三种方式 › DOM注册事件的三种方式~满满的干货哦 |
DOM注册事件的三种方式~满满的干货哦
|
Hello ~ 下面是对DOM注册事件的三种方式，希望可以帮助到有需要的小伙伴 注册事件就是将JavaScript函数与指定的事件相关联。 当该事件被触发时，绑定的函数会被调用。 HTML页面元素提供的事件属性 HTML页面元素提供的事件属性 #btn { width: 300px; height: 90px; background-color: aquamarine; color: coral; font-size: 35px; } 点我有惊喜哦~ function myClick() { console.log("漂亮的小姐姐、帅气的小哥哥，你终于来了 ^=^ ~ ") } DOM对象的事件属性通过DOM标准规范中的Document对象定位HTML页面元素 返回的DOM对象提供了一系列的事件属性 通过这些事件属性可以注册事件 通过DOM对象的事件属性方式注册事件，不允许重复注册。如果通过DOM对象的事件属性方式为某个元素多次注册事件的话，只有最后一次注册的函数有效。 实例如下： DOM对象的事件属性 #btn { width: 300px; height: 90px; background-color: rgb(141, 200, 235); color: coral; font-size: 35px; } 点我有惊喜哦~ var btn = document.getElementById("btn"); // DOM对象的事件属性 btn.onclick = myClick; // 注意：函数名后面没有小括号 function myClick() { alert("漂亮的小姐姐、帅气的小哥哥，你终于来了 ^=^ ~ ") } 事件监听器element.addEventListener(eventName,functionName,capture) eventName：为元素指定具体的事件名称（例如单击事件是click等） functionName：注册事件的句柄 capture：设置事件是捕获阶段还是冒泡阶段。false为默认值，表示冒泡阶段 实例： 事件监听器 #btn { width: 300px; height: 90px; background-color: rgb(215, 159, 230); color: coral; font-size: 35px; } 点我有惊喜哦~ var btn = document.getElementById("btn"); // 给指定元素添加事件监听器 btn.addEventListener('click', function () { alert("漂亮的小姐姐、帅气的小哥哥，你终于来了 ^=^ ~ ") })
|
【本文地址】