• 中文
    • English
  • 注册
  • 赞助本站

    • 支付宝
    • 微信
    • QQ

    感谢一直支持本站的所有人!

    • 查看作者
    • 8:JS事件

      一.  点击事件

      添加点击事件有两种方式:

      • 根据id找到指定标签,为该标签添加事件

      • 直接在该标签上添加点击事件

      第一种方法的示例:

      <body>
      <button id="btn1">按钮1</button>
      <button id="btn2">按钮2</button>
      <script type="text/javascript">
          var btn1 = document.getElementById("btn1");
          var btn2 = document.getElementById("btn2");
          btn1.onclick = function () {
              alert("点击了按钮1");
      
          }
          btn2.onclick = function () {
              alert("点击了按钮2");
      
          }
      
      </script>
      </body>

      再来看一下第二种方法示例:

      <script type="text/javascript">
          var fun1 = function () {
              alert("点击了按钮1");
      
          }
          var fun2 = function () {
              alert("点击了按钮2");
      
          }
      
      </script>

      二 .  输入框事件

      和点击事件一样,添加输入框事件也有两种方式:

      • 根据id找到指定标签,为该标签添加输入框事件

      • 直接在该标签上添加输入框事件

      第一种方法的示例:

      <input id = "input" type="text" />
      <script type="text/javascript">
          var input = document.getElementById("input");
          input.onfocus = function () {
              console.log("得到了焦点");
          }
          input.onblur = function () {
              console.log("失去了焦点");
          }
      </script>

      再来看一下第二种方法示例:

      <input id = "input" type="text" onfocus="fun1()" onblur="fun2()"/>
      <script type="text/javascript">
          var input = document.getElementById("input");
          var fun1 = function () {
              console.log("得到了焦点");
          }
          var fun2 = function () {
              console.log("失去了焦点");
          }
      </script>

      三.  文档加载事件

      如果我们把script标签放在两个按钮中间,会发现按钮1的功能正常,但是按钮2的功能出了问题,这是因为我们在script标签中通过getElementById("btn2");获取按钮2时,按钮2还不存在。

      <body>
      <button id="btn1">按钮1</button>
      <script type="text/javascript">
          var btn1 = document.getElementById("btn1");
          var btn2 = document.getElementById("btn2");
          btn1.onclick = function () {
              alert("点击了按钮1");
          }
          btn2.onclick = function () {
              alert("点击了按钮2");
          }
      </script>
      <button id="btn2">按钮2</button>
      </body>

      为了解决上面的问题,我们有两种解决方案,首先可以和以前一样,把scrip标签放在两个按钮下面,但是该方法有一定的局限性,一般不采用这种方法,一般我们会在整个文档加载完成的时候,再去获取元素。可以使用window.onload来实现:

      <body>
      <button id="btn1">按钮1</button>
      <script type="text/javascript">
          window.onload = function () {
              var btn1 = document.getElementById("btn1");
              var btn2 = document.getElementById("btn2");
              btn1.onclick = function () {
                  alert("点击了按钮1");
              }
              btn2.onclick = function () {
                  alert("点击了按钮2");
              }
          };
      </script>
      <button id="btn2">按钮2</button>
      </body>

      山东省
    • 0
    • 0
    • 0
    • 420
    • 请登录之后再进行评论

      登录
    • 做任务
    • 实时动态
    • 偏好设置
    • 返回顶部
    • 单栏布局 侧栏位置: