JavaWeb-JS入门（自定义对象，DOM，事件监听）

阿里嘎多鑫

已于 2025-04-12 11:18:29 修改

阅读量218

点赞数 3

文章标签： javascript 前端开发语言 javaweb

于 2025-04-12 11:17:05 首次发布

本文链接：https://blog.csdn.net/2202_75942062/article/details/147161356

版权

自定义对象

JS自定义对象语法

let对象={属性名：属性值，属性名：属性值，方法名：function（）{...}}

let对象={属性名：属性值，属性名：属性值，方法名：（）{...}}

注意：在定义对象中的方法是，尽量不要使用箭头函数（this并不指向当前对象，指向的是当前对象的父级（不推荐））

json

概念：JavaScript Object Notation，JavaScript对象标记法（JS对象标记书写的文本）。

由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

<!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>
  

  <script>
    //1. 自定义对象
    // let user = {
    //   name: 'Tom',
    //   age: 18,
    //   gender: '男',
    //   sing: function(){
    //     alert(this.name + '悠悠的唱着最炫的民族风~')
    //   }
    // }

    //let user = {
    //  name: 'Tom',
    //  age: 18,
    //  gender: '男',
    //  sing(){
    //    alert(this.name + '悠悠的唱着最炫的民族风~')
    //  }
    //}

    // let user = {
    //   name: 'Tom',
    //   age: 18,
    //   gender: '男',
    //   sing: () => { //注意: 在箭头函数中, this并不指向当前对象 - 指向的是当前对象的父级 【不推荐】
    //     alert(this + ':悠悠的唱着最炫的民族风~')
    //   }
    // }

    //2. 调用对象属性/方法
    //alert(user.name);
    //user.sing();


    //3. JSON - JS对象标记法
    let person = {
      name: 'itcast',
      age: 18,
      gender: '男'
    }
    alert(JSON.stringify(person)); //js对象 --> json字符串

    let personJson = '{"name": "heima", "age": 18}';
    alert(JSON.parse(personJson).name);

  </script>
</body>
</html>

DOM

概念：Document Object Model，文档对象模型。

将标记语言的各个组成部分封装为对应的对象：
Document：整个文档对象

Elment：元素对象

Attribute：属性对象

Text：文本对象

Comment：注释对象

JavaScript通过DOM，就能够对HTML进行操作：

改变HTML元素的内容

改变HTML元素的样式（CSS）

对HTML DOM事件做出反应

添加和删除HTML元素

例（可根据下图自己寻找相对应的部分）：

DOM操作

DOM操作核心思想：将网页中所有的元素当作对象来处理。(标签的所有属性在该对象上都可以找到)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS-DOM</title>
</head>
<body>

  <h1 id="title1">11111</h1>
  <h1>22222</h1>
  <h1>33333</h1>

  <script>
    //1. 修改第一个h1标签中的文本内容
    //1.1 获取DOM对象
    // let h1 = document.querySelector('#title1');
    //let h1 = document.querySelector('h1'); // 获取第一个h1标签

    let hs = document.querySelectorAll('h1');

    //1.2 调用DOM对象中属性或方法
    hs[0].innerHTML = '修改后的文本内容';
  </script>
</body>
</html>

事件监听

监听事件（Event Listener）是指当某个事件发生时，指定的函数会自动被调用。这种机制使得 JavaScript 能够捕获用户的操作，比如点击、键盘输入、鼠标悬停等，并根据这些操作执行相应的逻辑。

语法：事件源.addEventListener('事件类型'，事件触发执行的函数)；

事件监听三要素

事件源：哪个dom元素触发了事件，要获取dom元素

事件类型：用什么方式触发，比如：鼠标点击 click

事件触发执行的函数：要做什么事

早期版本写法（了解）：事件源.on事件=function（）{...}

区别：on方式会被覆盖，addEventListener方式可以绑定多次，拥有更多特性，推荐使用

<!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>
  
  <input type="button" id="btn1" value="点我一下试试1">
  <input type="button" id="btn2" value="点我一下试试2">

  <script>
    //事件监听 - addEventListener (可以多次绑定同一事件)
    document.querySelector('#btn1').addEventListener('click', () => {
      console.log('试试就试试~~');
    });
    document.querySelector('#btn1').addEventListener('click', () => {
      console.log('试试就试试22~~');
    });
    //事件绑定-早期写法 - onclick (如果多次绑定同一事件, 覆盖) - 了解
    document.querySelector('#btn2').onclick =  () => {
      console.log('试试就试试~~');
    }
    document.querySelector('#btn2').onclick =  () => {
      console.log('试试就试试22~~');
    }
  </script>
</body>
</html>