<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>自定义对象方式2：{}形式</title><script type="text/javascript">//演示自定义对象方式2：{}形式var person = {//多个属性和方法之间都要用逗号隔开name: "孙悟空",age: 999,hi: function () {console.log("person信息=" + this.name + " " + this.age);},sum: function () {}};//使用console.log("外部访问 name=" + person.name);console.log("外部访问 age=" + person.age);person.hi();</script></head><body></body></html>
文章插图
10.事件JavaScript 事件 (w3school.com.cn)
10.1事件介绍什么是事件？事件是电脑输入设备与页面进行交互的响应 。我们称之为事件 。
HTML 事件可以是浏览器行为，也可以是用户行为 。
HTML 事件是发生在 HTML 元素上的“事情” 。
当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件 。
- 事件一览表
https://www.w3school.com.cn/jsref/dom_obj_event.asp
文章插图
- 事件的注册（绑定）
事件注册（绑定）：当事件响应（触发）后要浏览器执行哪些操作代码，叫事件注册或事件绑定
- 静态注册事件
通过html标签的事件属性直接赋于事件响应后的代码，这种方式叫做静态注册
- 动态注册事件
通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function(){}，这种方式叫做动态注册
js编程可以将浏览器整个页面的所有组件都映射成dom对象
- 动态注册事件步骤
- 获取标签对象/dom对象
- dom对象.事件名=function(){}
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>onload加载完成事件</title><script type="text/javascript">//定义函数// function sayOK() {//alert("静态注册 onload 事件sayOK");// }//1.在js中，将页面窗口映射成window dom对象//2.window对象有很多的属性和函数，可以使用//3.window.onload表示页面被加载完毕//4.后面的function(){}表示页面加载完毕后，要执行的函数/代码window.onload = function () {alert("动态注册 onload 事件");}</script></head><body>hello~~~<input type="text" value="https://www.huyubaike.com/biancheng/测试"/></body></html>
文章插图
10.3.2onclick点击事件onclick：鼠标点击某个对象
动态注册 onclick 事件
- 先拿到id=btn01的button对应的dom对象
- 通过dom对象动态绑定onclick事件
- 通过document的getElementById方法来获取对应的dom对象
一般使用window.onload让整个页面加载完毕后再动态注册
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>onclick 单击事件</title><script type="text/javascript">function sayOK() {alert("你点击了sayOK按钮");}//当页面加载完毕之后，我们再进行动态注册window.onload = function () {//因此想要成功获取button的dom对象，就应该让button加载完毕再获取 。//动态注册 onclick 事件//1.先拿到id=btn01的button对应的dom对象//2.通过dom对象动态绑定onclick事件//3.通过document的getElementById方法来获取对应的dom对象var btn01 = document.getElementById("btn01");btn01.onclick = function () {alert("你点击了sayHi按钮");}}</script></head><body><!--静态注册--><button onclick="sayOK()">sayOK按钮</button><!--动态注册--><button id="btn01">sayHi按钮</button></body></html>
经验总结扩展阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
