找回密码

给dom元素添加事件处理的两种方法

发布日期：2017-07-06 分类：javascript 阅读(1063) 评论(0)

给元素添加事件处理不只有两种方法，但本文只列出两种，当然可能会有给dom元素添加事件处理的其他方法。更多可以参考哈勃私语

第一种，直接在html代码上设置标签的事件处理，代码示例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6. <p id=”p”>点击按钮就执行displayDate()函数</p>
  7. <button id=”id” onclick=”displayDate()”>点击</button>//在此处onclick中只需要写出事件发生后对应处理的js代码即可
  8. <script>
  9.  function displayDate(){
  10. document.getElementById(“p”).innerHTML=”fighting”;
  11. };
  12. </script>
  13. </body>
  14. </html>

第二种，将html与js代码彻底分离，在js中为指定元素添加事件处理，代码示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6. <p id=“p”>点击按钮就执行displayDate()函数</p>
  7. <button id=“id”>点击</button>
  8. <script>document.getElementById(“id”).onclick=function(){displayDate()};/*注意！此处必须将处理时所调用的函数嵌套在一个函数定义中，至于这样做的原因，经过翻查，还是没有找到*/
  9.  function displayDate(){
  10. document.getElementById(“p”).innerHTML=“fighting”;
  11. };
  12. </script>
  13. </body>
  14. </html>

未经允许不得转载：哈勃私语 » 给dom元素添加事件处理的两种方法

本文共1305个字 创建时间：2017年7月6日10:51   
上一篇：
下一篇：

分享到：更多 ()
标签：

相关推荐