DOM注册事件的三种方式~满满的干货哦

Hello ~
下面是对DOM注册事件的三种方式，希望可以帮助到有需要的小伙伴
注册事件就是将JavaScript函数与指定的事件相关联。
当该事件被触发时，绑定的函数会被调用。

HTML页面元素提供的事件属性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML页面元素提供的事件属性</title><style>#btn {width: 300px;height: 90px;background-color: aquamarine;color: coral;font-size: 35px;}</style>
</head><body><button onclick="myClick()" id="btn">点我有惊喜哦~</button><script>function myClick() {console.log("漂亮的小姐姐、帅气的小哥哥，你终于来了 ^=^ ~ ")}</script>
</body></html>

DOM对象的事件属性

通过DOM标准规范中的Document对象定位HTML页面元素
返回的DOM对象提供了一系列的事件属性
通过这些事件属性可以注册事件
通过DOM对象的事件属性方式注册事件，不允许重复注册。如果通过DOM对象的事件属性方式为某个元素多次注册事件的话，只有最后一次注册的函数有效。
实例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM对象的事件属性</title><style>#btn {width: 300px;height: 90px;background-color: rgb(141, 200, 235);color: coral;font-size: 35px;}</style>
</head><body><button id="btn">点我有惊喜哦~</button><script>var btn = document.getElementById("btn");// DOM对象的事件属性btn.onclick = myClick;  // 注意：函数名后面没有小括号function myClick() {alert("漂亮的小姐姐、帅气的小哥哥，你终于来了 ^=^ ~ ")}</script>
</body></html>

事件监听器

element.addEventListener(eventName,functionName,capture)
eventName：为元素指定具体的事件名称（例如单击事件是click等）
functionName：注册事件的句柄
capture：设置事件是捕获阶段还是冒泡阶段。false为默认值，表示冒泡阶段

实例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件监听器</title><style>#btn {width: 300px;height: 90px;background-color: rgb(215, 159, 230);color: coral;font-size: 35px;}</style>
</head><body><button id="btn">点我有惊喜哦~</button><script>var btn = document.getElementById("btn");// 给指定元素添加事件监听器btn.addEventListener('click', function () {alert("漂亮的小姐姐、帅气的小哥哥，你终于来了 ^=^ ~ ")})</script>
</body></html>

DOM注册事件的三种方式~满满的干货哦相关推荐

java的如何创建js_[Java教程]JS创建事件的三种方式（实例）
[Java教程]JS创建事件的三种方式(实例) 0 2016-05-11 14:00:16 1.普通的定义方式 οnclick="Sfont=prompt('请在文本框中输入红色','红色' ...
java c 事件对比_javacsript绑定事件的三种方式与各自特点
javacsript绑定事件的三种方式与各自特点 javacsript绑定事件的三种方式与各自特点点击打开链接 javacsript绑定事件的三种方式与各自特点 feipeng8848 2017-0 ...
注册事件的两种方式（传统注册事件、方法监听注册事件）
注册事件的两种方式 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
[js]绑定点击事件的三种方式
绑定点击事件的三种方式使用 onclick 属性(不推荐) <!doctype html> <html lang="en"> <head>&l ...
【Spring杂烩】探讨Spring向容器注册Bean的三种方式
探讨Spring向容器注册Bean的三种方式重点了解@Import实现的三种子方式前提概要 Spring向容器注册Bean的三种方式通过@ComponentScan.@Componet 通过@B ...
java 异步事件_处理异步事件的三种方式
在网站开发中,异步事件是项目必然需要处理的一个环节,也因为前端框架的兴起,通过框架实现的 SPA 已经是快速建构网站的标配了,一部获取数据也就成了不可或缺的一环:本文来就讲一讲 JavaScript ...
为 Angular service 注册 provider 的三种方式
对于要用到的任何服务(service),你必须至少注册一个提供者(provider).服务可以在自己的元数据中把自己注册为提供者,这样可以让自己随处可用.或者,你也可以为特定的模块或组件注册提供者. ...
jquery调用click事件的三种方式
第一种方式: $(document).ready(function(){$("#clickme").click(function(){alert("Hello World ...
jquery 调用 click 事件的三种方式
第一种方式: $(document).ready(function(){ $("#clickme").click(function(){ alert("Hello Wor ...

DOM注册事件的三种方式~满满的干货哦

HTML页面元素提供的事件属性

DOM对象的事件属性

事件监听器

DOM注册事件的三种方式~满满的干货哦相关推荐

最新文章

热门文章