web api、获取DOM元素的方式、事件理解、click事件在移动端300ms延时、事件对象、事件委托、常见事件类型

苦海123

已于 2024-03-19 23:06:19 修改

阅读量243

点赞数 2

分类专栏： javascript 文章标签： javascript 前端

于 2021-04-26 07:40:43 首次发布

本文链接：https://blog.csdn.net/weixin_46758988/article/details/116142154

版权

javascript 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

web api:

API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。

前面对ECMAscript语法进行了学习，接下来将学习DOMScript文档对象模型（处理HTML和XML及CSS的接口）和BOMScript浏览器对象模型：

文档：一个页面就是一个文档，DOM中使用document表示文档。

元素：页面中所有的标签都是元素，DOM中使用element表示元素。

节点：页面中的所有内容都是节点：标签、属性、文本、注释等，DOM中使用node表示。
在这里插入图片描述
获取元素的方式：

根据id获取、根据标签名获取、通过HTML5新增的方法获取、特殊元素获取等，返回的是一个对象，console.dir()可以打印出对象的属性和方法，便于观察对象。

	<script>
        // 1、通过id名获取元素：声明变量关键字  变量名 = document.getElementById(标签id名字符串); id名区分大小写,返回一个对象
        var box = document.getElementById('box');
        console.dir(box);
    
        //2、通过标签名获取元素：声明变量关键字 变量名 = document.getElementsByTagName(标签名字符串);返回一个以伪数组为形式的对象集合,如需要拿到所有的元素，通过遍历可以实现。
        const liList = document.getElementsByTagName('li');
        console.log(liList);
    
        //3、通过类名获取元素：声明变量关键字 变量名 = document.getElementsByClassName(类名字符串);返回一个以伪数组为形式的对象
        var classBox = document.getElementsByClassName('box');
        console.log(classBox);
    
     		//4、通过name属性值获取元素：声明变量关键字 变量名 = document.getElementsByName(name属性值字符串);返回一个以伪数组为形式的对象
        var classBox = document.getElementsByName('box');
        console.log(classBox);
    
        //5、通过querySelector获取元素：声明变量关键字 变量名 = document.querySelector('任何选择器名字符串');选择相同选择器的第一个元素，括号中可以传入任何类型的选择器名字符串，如：.box、#box、div
        var querySelectorLi = document.querySelector('li');
        console.log(querySelectorLi);
    
        // 6、通过querySelectorAll获取元素：声明变量关键字 变量名 = document.querySelectorAll('任何选择器名字符串');选择相容选择器的所有元素，返回一个以伪数组为形式的对象
        var querySelectorAllLi = document.querySelectorAll('li');
        console.log(querySelectorAllLi);
    
        //7、获取特殊元素body、html等：声明变量关键字 变量名 = document.documentElement或document.body;
        var htmlElement = document.documentElement;
        var bodyElement = document.body;
        bodyElement.style.backgroundColor = 'yellow';
        bodyElement.style.color = 'blue';
    
        // 总结：因为某些获取元素的方式获取的是伪数组形式的对象集合，因此在变量名后面加[index]可以获取到具体的某个元素；因为最终获取的是对象，因此可以通过console.dir()查看对象的属性来设置对象的属性值；document可以替换为具体的某个元素，如：div.getElementsByTagName('li');
    </script>

事件：

JS使我们有能力创建动态页面，而事件是可以被JS侦测到的行为，可理解为触发响应机制。事件组成部分（事件三要素）:事件源（事件被触发的对象）、事件类型（如何触发，什么事件，例如：onclick点击事件）、事件处理程序(函数),执行事件的步骤如下：

	<body>
        <button class="button">弹出警示框</button>
        <script>
            var btn = document.getElementsByClassName('button');//1、获取事件源
            btn[0].onclick = function() {//2、事件源.事件类型：注册事件（绑定事件） 3、赋值后面的函数：添加事件处理程序
                alert('通过onclick事件触发的弹框');
              	this.disable = false;//事件处理函数中的this指向当前的事件源
            };
        </script>
    </body>

fastclick.js插件：

由于click事件在移动端会有300ms的延迟，fastclick.js插件可以很好的解决这两个问题，详情可以查阅官方文档，这里以封装函数的方式来解决这个问题，但是每次只能控制一个元素，实际开发中推荐插件：

	<script>
        //封装函数解决移动端click事件300ms延时问题
        function clicks(elements, callback) {
            var flag = false; //定义一个变量判断手指是否在屏幕滑动
            var start; //定义一个时间变量，用于记录手指刚触摸到屏幕时的时间点
            elements.addEventListener('touchstart', function(e) {
                start = Date.now(); //触摸时间点赋值给变量start
            });
            elements.addEventListener('touchmove', function(e) {
                flag = true; //当手指在屏幕上滑动时，改变flag值为true，下面if语句中取反，callback函数不执行
            });
            elements.addEventListener('touchend', function(e) {
                if (!flag && (Date.now() - start) < 100) { //当手指在屏幕上没有滑动时，flag值依然是false，取反后进入逻辑与语句，当后面时间差小于100ms时，执行callback
                    callback && callback();
                };
                // 当执行一次callback时，初始化flag和start：
                flag = false;
                start = 0;
            });
        };
        clicks(document.querySelector('input'), function() {
            console.log('input被点击了')
        });
    </script>

iscroll.js插件：

iscroll.js是一款常用的js插件，里面包含很多功能，这里主要是介绍用来做区域滚动的，详细教程请查阅官方文档。

zepto.js库：

zepto.js是一款轻量级针对高版本浏览器的javascript库，与jQuery有这个类似的API，多用于移动端开发，相关教程查阅官方网站：https://www.zeptojs.com.cn/

swiper.js:

swiper.js是一款简单轻量，强大，免费开源，稳定的触摸滑动插件，相关教程查阅官方文档：https://www.swiper.com.cn/
事件对象：

事件对象指的是事件处理函数中传入的参数，需要注意的是处理函数中的参数在IE低版本浏览器是不支持的，为此有代码：window.event可以代替，常见写法是将此代码 e = e ||window.event 放入处理函数中，若支持参数e则使用e,若不支持参数e则给e赋值window.event；这个参数的this属性和这个参数的currentTarget属性效果一样，但是有兼容性问题，通常使用this，其它相关属性和方法如下：
在这里插入图片描述
事件委托(代理)：

事件委托是指：将事件监听设置给父级节点，来解决多个子节点需要设置事件监听器而多次访问DOM的问题，其原理是利用冒泡影响设置每个子节点；如给ul注册点击事件，但是是通过点击li冒泡到ul,也可通过e.target属性可以设置其被点击的元素：

	<script>
        var ulList = document.querySelector('ul');
        ulList.onclick = function(e) {
            alert('点击li冒泡到ul触发事件');
            e.target.style.backgroundColor = 'pink';      
        };
    </script>

常见事件类型：

鼠标事件：
通过鼠标控制事件的触发，总结如下表：
在这里插入图片描述
键盘事件：

通过键盘上面的按键控制事件的触发
在这里插入图片描述
触屏事件：

移动端中没有鼠标，常常是用手指触摸，因此产生了触屏事件touch，touch代表一个触摸点，响应手指或触控笔触碰屏幕或触控板的处理函数；其相关事件如下：
在这里插入图片描述
触摸事件对象：

同样在触摸事件中也有触摸事件对象，通过在触摸事件处理函数中传入一个参数拿到，其相关属性和方法如下：
在这里插入图片描述
注意：上述只是常用事件，如果想要了更多，请阅读官方文档。

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

苦海123

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
web api、获取DOM元素的方式、事件理解、click事件在移动端300ms延时、事件对象、事件委托、常见事件类型

web api:API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。前面对ECMAscript语法进行了学习，接下来将学习DOMScript文档对象模型（处理HTML和XML及CSS的接口）和BOMScript
复制链接

扫一扫