学习JavaScript笔记

简介: 学习JavaScript笔记

不推荐使用 HTML 元素中可以添加事件属性 的方式来添加属性。

例子:

onclick="getElementById('demo').innerHTML=Date()">现在的时间是?

因为遵从“高内聚,低耦合”的编程原则。

高内聚是说模块内部要高度聚合,低耦合是说模块与模块之间的藕合度要尽量低。前者是说模块内部的关系,后者是说模块与模块间的关系。

很形象的比拟:严于律己,宽以待人。


添加事件句柄实例:

id="test"type="button"value="提交"/>

</span><span style="color: #000000;"></span></div><div>window<span style="color: #666600;">.</span><span style="color: #000000;">onload </span><span style="color: #666600;">=</span><span style="color: #000000;"> </span><span style="color: #000088;">function</span><span style="color: #666600;">(){</span><span style="color: #000000;"></span></div><div>    <span style="color: #000088;">var</span><span style="color: #000000;"> test </span><span style="color: #666600;">=</span><span style="color: #000000;"> document</span><span style="color: #666600;">.</span><span style="color: #000000;">getElementById</span><span style="color: #666600;">(</span><span style="color: #008800;">"test"</span><span style="color: #666600;">);</span><span style="color: #000000;">   </span></div><div>    test<span style="color: #666600;">.</span><span style="color: #000000;">addEventListener</span><span style="color: #666600;">(</span><span style="color: #008800;">"click"</span><span style="color: #666600;">,</span><span style="color: #000000;">myfun2</span><span style="color: #666600;">);</span><span style="color: #000000;">   </span></div><div>    test<span style="color: #666600;">.</span><span style="color: #000000;">addEventListener</span><span style="color: #666600;">(</span><span style="color: #008800;">"click"</span><span style="color: #666600;">,</span><span style="color: #000000;">myfun1</span><span style="color: #666600;">);</span><span style="color: #000000;"></span></div><div><span style="color: #666600;">}</span><span style="color: #000000;"></span></div><div><span style="color: #000088;">function</span><span style="color: #000000;"> myfun1</span><span style="color: #666600;">(){</span><span style="color: #000000;">  </span></div><div>    alert<span style="color: #666600;">(</span><span style="color: #008800;">"你好1"</span><span style="color: #666600;">);</span><span style="color: #000000;"></span></div><div><span style="color: #666600;">}</span><span style="color: #000000;"></span></div><div><span style="color: #000088;">function</span><span style="color: #000000;"> myfun2</span><span style="color: #666600;">(){</span><span style="color: #000000;"> </span></div><div>    alert<span style="color: #666600;">(</span><span style="color: #008800;">"你好2"</span><span style="color: #666600;">);</span><span style="color: #000000;"></span></div><div><span style="color: #666600;">}</span><span style="color: #000000;"></span></div><div><span style="color: #000088;">

目录
相关文章
|
22天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
34 0
|
4天前
|
自然语言处理 JavaScript 前端开发
[JS]同事看了我做的this笔记,直摇头,坦言:我还是参考启发博文吧
本文介绍了JavaScript中`this`关键字的重要性和使用规则。作者回顾了早期笔记,总结了`this`指向的各种情况,并分享了最新的理解。文章强调了`this`在不同上下文中的指向,包括对象方法、全局函数、箭头函数等,并提供了改变`this`指向的方法。适合JavaScript开发者参考。
14 2
|
28天前
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
35 4
js学习--制作猜数字
|
27天前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
42 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
27天前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
15 2
|
27天前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
15 2
|
27天前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
32 1
|
27天前
|
JavaScript
js学习--抽奖
js学习--抽奖
12 1
|
27天前
|
JavaScript
js学习--隔行换色
js学习--隔行换色
29 1
|
26天前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
32 0