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>

常见事件

相关推荐
饭碗的彼岸one20 小时前
C++设计模式之单例模式
c语言·开发语言·c++·单例模式·设计模式·饿汉模式·懒汉模式
東雪蓮☆21 小时前
从零开始掌握 Web 与 Nginx:入门详解
运维·服务器·前端·nginx
脑子慢且灵21 小时前
【JavaWeb】一个简单的Web浏览服务程序
java·前端·后端·servlet·tomcat·web·javaee
青铜发条21 小时前
【Qt】PyQt、原生QT、PySide6三者的多方面比较
开发语言·qt·pyqt
柯南二号21 小时前
【大前端】 断点续传 + 分片上传(大文件上传优化) 的前端示例
前端
前端小超超21 小时前
如何配置capacitor 打包的安卓app固定竖屏展示?
android·前端·gitee
xiaopengbc21 小时前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
前端AK君21 小时前
React中台系统如何嵌入到业务系统中
前端
Slice_cy21 小时前
不定高虚拟列表
前端
前端AK君1 天前
React组件库如何在vue项目中使用
前端