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

最新推荐文章于 2022-06-24 14:23:56 发布

阿彤の小铃铛

最新推荐文章于 2022-06-24 14:23:56 发布

阅读量481

点赞数 1

分类专栏： JavaScript

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

版权

原生JS

文章目录

一、原生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"

最低0.47元/天解锁文章

阿彤の小铃铛

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScrip——原生JS（个人学习）

原生JS文章目录一、原生JS1、JS原生事件如何绑定JS原生绑定事件主要为三种：* html事件处理程序* DOM0级事件处理程序* DOM2级事件2、JS原生常用dom操作方法js原生dom操作方法有* 查找* 插入* 克隆*设置和获取属性总结一、原生JS1、JS原生事件如何绑定JS原生绑定事件主要为三种：一是html事件处理程序二是DOM0级事件处理程序三是DOM2级事件处理程序* html事件处理程序html事件现在早已不用了，就是在html各种标签上直接添加事件，类似于c
复制链接

扫一扫