javascript 学习笔记(onchange等)

JavaScript 学习笔记（onchange等）完整攻略

什么是 JavaScript？

JavaScript是一种轻量级、解释型的编程语言，常用于为网页添加交互功能、创建动态效果等。

onchange事件

onchange是JavaScript中的一个事件，当用户在页面上触发文本框、下拉菜单、单选框等元素的值改变时，就会触发这个事件。

onchange函数

在HTML页面中，我们可以使用以下代码为元素绑定onchange事件：

<select onchange="myFunction()">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

以上代码在用户选择下拉框中的选项时会触发myFunction函数，myFunction函数的实现则由开发者自行定义。

onchange方法

在JavaScript中，我们也可以通过以下代码为元素绑定onchange事件：

element.onchange = function() {
  // do something
}

以上代码在用户选择select元素中的选项时会触发函数体中的代码执行。

除此之外，我们还可以使用addEventListener方法绑定onchange事件，示例如下：

element.addEventListener('change', function() {
  // do something
})

onchange事件示例

下面给出两个onchange事件的示例：

示例一

任务：当用户选择不同的选项，页面上的文本框内容会发生变化。

代码实现如下：

<select id="mySelect">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<input type="text" id="myInput" value="1">

<script>
  document.getElementById("mySelect").onchange = function() {
    document.getElementById("myInput").value = this.value;
  };
</script>

当用户选择不同的选项，文本框中的值也会相应地改变。

示例二

任务：实现文件上传时，在文件选择框中选择文件后，页面上会出现文件名，并通过向服务器发送请求，返回文件的一些基本信息。

代码实现如下：

<input type="file" onchange="uploadFile(this)">

<script>
  function uploadFile(input) {
    var file = input.files[0];
    var formData = new FormData();
    formData.append('file', file);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    xhr.send(formData);

    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var fileInfo = JSON.parse(xhr.responseText);
        alert('文件名：' + fileInfo.name + '，文件大小：' + fileInfo.size);
      }
    }
  }
</script>

当用户选择文件后，文件名和文件大小将会显示在弹出的alert窗口中，并向服务器发送POST请求，并接收服务器返回的JSON格式的文件信息，解析后显示在页面上。

总结

onchange事件是JavaScript中比较常用的事件之一，可以实现很多交互功能。开发者可以选择适合自己的方法和技巧来实现所需的功能。