不推荐使用 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;">