JavaScrip——原生JS（个人学习）

最新推荐文章于 2024-03-30 05:22:30 发布

阿彤の小铃铛

最新推荐文章于 2024-03-30 05:22:30 发布

阅读量844

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_47295135/article/details/109747227

版权

本文详细介绍了JavaScript中的原生事件绑定，包括html事件处理程序、DOM0级事件处理程序和DOM2级事件处理程序，并讨论了各自的优缺点。此外，还讲解了JS原生DOM操作，如查找、插入、克隆和设置/获取属性的方法，为日常的JavaScript开发提供了实用的参考。

摘要由CSDN通过智能技术生成

原生JS

一、原生JS

1、JS原生事件如何绑定

JS原生绑定事件主要为三种：

一是html事件处理程序
二是DOM0级事件处理程序
三是DOM2级事件处理程序

* html事件处理程序

html事件现在早已不用了，就是在html各种标签上直接添加事件，类似于css的行内样式，缺点是不好维护，因为散落在标签中,也就是耦合度太高。
例如：

		<button onclick="事件处理函数">点点点</button>

* DOM0级事件处理程序

目前在PC端用的还是比较多的绑定事件方式，兼容性也好，主要是先获取dom元素，然后直接给dom元素添加事件

var btn=document.getElementById(‘id元素’)
   btn.onclick=function() {
   
     //要处理的事件逻辑
   }

DOM0事件如何移除呢？很简单：btn.οnclick=null;置为空就行
优点：兼容性好
缺点：只支持冒泡，不支持捕获

* DOM2级事件

移动端用的比较多，也有很多优点，提供了专门的绑定和移除方法

var btn=document.getElementById(‘id元素’)
    //绑定事件
   btn.addEventListener(‘click’,绑定的事件处理函数名,false)
   //移除事件
   btn.removeEventListener(‘click’,要移除的事件处理函数名，false)

优点：支持给个元素绑定多个相同事件，支持冒泡和捕获事件机制

2、JS原生常用dom操作方法

js原生dom操作方法有

* 查找

getElementByid => 根据指定的 id 属性值得到对象
getElementByTagName =>获取一个元素合集
querySelector => 返回文档中匹配指定 CSS 选择器的一个元素。
querySelectorAll => 返回所有的元素

* getElementByTagName =>获取一个元素合集

查找dom获取body标签有两种写法，第二种简单明了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title