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

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、divvar 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时，执行callbackcallback && 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联系笔者删除。
笔者：苦海

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

获取dom元素的方法
在 JavaScript 中,获取 DOM 元素的方式有多种.下面列出了一些常用的方法: 1.用 document.getElementById() 方法:该方法需要传入一个参数,即要获取元素的 id ...
Vue 获取DOM元素，给DOM增加事件的特殊情况
Vue 获取DOM元素 ,给DOM增加事件的特殊情况给标签绑定ref属性使用this.$refs.xxx 获取原生的jsDOM对象 ref属性值不能重名 Vue.component('subCom ...
通过原生js获取dom元素的九种方式
获取dom元素 <body><!-- <div id="box">我是一个DIV</div><p class="item& ...
vue获取dom元素的几种方式
在任意标签上:ref="xx" 获取dom元素:this.$refs.xx. 如图: mounted()时才能获取this.$refs.xx 获取dom标签:this.$refs. ...
提升对前端的认知，不得不了解Web API的DOM和BOM
了解Web API的DOM和BOM 引言正文一.DOM操作 1.DOM的本质 2.DOM节点操作 (1)property形式 (2)attribute形式 3.DOM结构操作 (1)新增/插入节点 ...
vue如何获取div的宽度_vue获取dom元素高度的方法
获取DOM高度: 要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作(参照生命周期钩子mounted语法:https://cn.vuejs.org/v2/api/#mo ...
vue获取dom元素值
1.通过refs来获取dom元素内容 2.需要利用到jq,但是不支持,学习vue.js,都说需要抛弃jq,否则会禁锢你的思想通过refs方法 ref 被用来给元素或子组件注册引用信息.引用信息将会注 ...
获取DOM元素方法小结
在开发中不可避免的需要操作DOM,现在就来总结一下原生的获取DOM的API. getElementById() 该方法是最常用的通过元素的id属性来获取DOM元素的API,返回一个DOM元素. < ...
vue 获取id元素,vue.js怎么获取dom元素？
vue.js怎么获取dom元素?下面本篇文章给大家介绍一下vue.js获取dom元素的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 使用Vue.js获取dom元素标签中添加 ...

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

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

最新文章

热门文章