JS事件监听_js监听onclick

作者：寸_铁 | 2024-07-10 05:55:15

踩

js监听onclick

事件监听

事件监听案例

事件监听

事件：HTML事件是发生在HTML元素上的“事情”
- 按钮点击
- 鼠标移动到元素上
- 按下键盘按键
事件监听：JS可以在事件被检测到时执行代码
事件绑定
- 方法一：通过HTML标签中的事件属性进行绑定
  - <input type="button" οnclick="on()" value="按钮一" />
    
    <script>
    
    function on() {
    
    alert("我被点了");
    
    }
    
    </script>
- 方法二：
  - 通过DOM元素属性进行绑定
    - <input type="button" id="btn" value="按钮二" />
      
      <script>
      
      document.getElementById("btn").onclick = function () {
      
      alert("我被点了");
      
      };
      
      </script>

具体代码如下：


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件绑定</title>
  </head>
  <body>
    <input type="button" onclick="on()" value="按钮一" /> 通过HTML标签中的事件属性进行绑定<br>
    <input type="button" id="btn" value="按钮二" /> 通过DOM元素属性进行绑定
    <script>
      function on() {
        alert("按钮一我被点了");
      }
    </script>
    <script>
      document.getElementById("btn").onclick = function () {
        alert("按纽二我被点了");
      };
    </script>
  </body>
</html>

运行效果：

点击按钮一

点击按钮二

常见事件

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像完成加载时
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从元素上移开

事件监听案例

实现效果

点击’点亮‘按钮点亮灯泡，点击’熄灭‘按钮熄灭灯泡
输入框鼠标聚焦后展示小写鼠标离焦后展示大写
点击’全选‘ 按钮使所有复选框呈现被选中的状态点击’反选‘ 按钮使所有复选框呈现取消勾选的状态

具体实现代码如下:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS-事件-案例</title>
  </head>
  <body>
    <img src="img/off.gif" id="img" /><br />
    <input type="button" name="button1" id="b1" value="点亮" onclick="on()" />
    <input
      type="button"
      name="button"
      id="b2"
      value="熄灭"
      onclick="off()"
    /><br />
    <input
      type="text"
      name="text"
      id="text"
      value="HELLO JS"
      onfocus="lower()"
      onblur="upper()"
    /><br />
    <input type="checkbox" name="hobby" value="电影" />电影
    <input type="checkbox" name="hobby" value="旅游" />旅游
    <input type="checkbox" name="hobby" value="游戏" />游戏
    <br />
    <input type="button" value="全选" onclick="checkAll()" />
    <input type="button" value="反选" onclick="reverse()" />
 
    <script>
      // 设置对应的方法实现不同的操作
      // 1.点击'点亮'按钮 点亮灯泡，点击'熄灭'按钮 熄灭灯泡
      // 触发onclick事件
      function on() {
        // 获取img元素对象
        var img = document.getElementById("img");
        // 设置属性
        img.src = "img/on.gif";
      }
      function off() {
        // 获取img元素对象
        var img = document.getElementById("img");
        // 设置src属性
        img.src = "img/off.gif";
      }
      // 2.输入框鼠标聚焦后 展示小写 鼠标离焦后展示大写
      // 触发onblur 和onfocus事件
      // 常见对应事件触发的函数
      function lower() {
        // 获取输入框元素对象;
        var text = document.getElementsByName("text");
        for (let i = 0; i < text.length; i++) {
          const element = text[i];
          // 查询W3C网站得到改变String字符串大小写的方法
          element.value = element.value.toLowerCase();
        }
      }
      function upper() {
        var text = document.getElementsByName("text");
        for (let i = 0; i < text.length; i++) {
          const element = text[i];
          element.value = element.value.toUpperCase();
        }
      }
      // 点击'全选' 按钮使所有复选框呈现被选中的状态 点击'反选' 按钮使所有复选框呈现取消勾选的状态
      function checkAll() {
        var checks = document.getElementsByName("hobby");
        for (let i = 0; i < checks.length; i++) {
          const element = checks[i];
          element.checked = true;
        }
      }
      function reverse() {
        var checks = document.getElementsByName("hobby");
        for (let i = 0; i < checks.length; i++) {
          const element = checks[i];
          element.checked = false;
        }
      }
    </script>
  </body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/805033