JS(DOM、事件)

DOM

  • 概念:Document Object Model,文档对象模型。
  • 将标记语言的各个组成部分封装为对应的对象:
  1. Document:整个文档对象
  2. Element:元素对象
  3. Attribute:属性对象
  4. Text:文本对象
  5. Comment:注释对象
  • JavaScript通过DOM,就能够对HTML进行操作:
  1. 改变 HTML 元素的内容
  2. 改变 HTML元素的样式(CSS)
  3. 对 HTML DOM 事件作出反应
  4. 添加和删除 HTML 元素

事件绑定

  • 方式一:通过HTML表签中的事件属性进行绑定

    复制代码
    <input type="button" onclick="on()" value="按钮1">
    <script>
         function on(){
             alert('我被点击了!'    );
         }
    </script>
  • 方式二:通过DOM元素属性绑定

    复制代码
    <input type="button" id="btn" value="按钮2">
    <script>
         document.getElementById('btn').onclick=function(){
             alert('我被点击了!');
    }
    </script>

常见事件

相关推荐
葡萄城技术团队2 分钟前
智慧表格(SpreadJS + AI):拥抱 Web 端对话式办公新时代
前端·人工智能
Ulyanov8 分钟前
《玩转QT Designer Studio:从设计到实战》 QT Designer Studio组件化开发与UI组件库构建
开发语言·python·qt·ui·雷达电子战系统仿真
词元Max9 分钟前
2.8 pydantic 数据校验:AI 开发的隐形利器
开发语言·人工智能·python
2401_8653825014 分钟前
各省政务信息化项目验收材料清单汇总及差异分析
java·开发语言·数据库
froginwe1117 分钟前
MySQL 删除数据库
开发语言
Rust研习社18 分钟前
深入浅出 Rust 泛型:从入门到实战
开发语言·后端·算法·rust
OpenTiny社区31 分钟前
电商系统集成GenUI SDK实操指南
前端·开源·ai编程
A_nanda32 分钟前
vue实现后端传输逐帧图像数据
前端·javascript·vue.js
YGY顾n凡34 分钟前
我开源了一个项目:一句话创造一个AI世界!
前端·后端·aigc
旷世奇才李先生37 分钟前
Python爬虫实战:多线程爬取\+数据清洗\+可视化(附完整源码)
开发语言·爬虫·python