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联系笔者 删除。
笔者:苦海

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575376.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段

transitionend过渡监听事件&#xff1a; 过渡监听事件transitionend指的是CSS3中过渡效果执行一次后触发事件处理函数&#xff0c;如下案例&#xff1a; <!DOCTYPE html><html><head><meta charset"utf-8"><title></title><…

Unix/Linux环境C编程入门教程(18) kali-linuxCCPP开发环境搭建

1. Kali linux是BT5的晋级版本&#xff0c;用于信息安全。基于Debian7内核。新建虚拟机。2. 选择默认虚拟机3. 选择稍后安装操作系统4.选择Linux Debian7 64位&#xff0c;因为KaliLinux基于Linux Debian7。5. 设置虚拟机名称为KaliLinux6.设置处理器为双核。7. 设置内存为2G8.…

javascript中BOM介绍、屏幕尺寸、历史记录、URL解析、计算机信息获取、定时器、三大系列及兼容代码、封装动画函数、同步和异步

BOM介绍&#xff1a; BOM指的是浏览器对象模型&#xff0c;是用来操作浏览器的&#xff0c;例如浏览器弹窗、地址栏、滚动条等&#xff0c;浏览器顶级对象&#xff1a;window&#xff1b;页面中的所有内容都是属于window的&#xff0c;window可以省略&#xff1b;confirm(‘带…

javascript中实例对象和构造函数关系、原型语法、原型链、call实现继承、apply调用函数、bind拷贝函数、拷贝继承、class类、super、严格模式、高阶函数、闭包、递归、es6简介

实例对象和构造函数的关系及原型&#xff1a; 实例对象是通过构造函数创建出来的&#xff0c;实例对象的构造器constructor就是指向构造函数的&#xff1b;每个实例对象中的同一方法的指向是各不相同的&#xff0c;但是其属性值相同的属性可以相同&#xff0c;这样会造成内存浪…

移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)

移动端web现状&#xff1a; 移动端常见浏览器&#xff1a;UC浏览器&#xff0c;QQ浏览器&#xff0c;Opera浏览器&#xff0c;百度手机浏览器&#xff0c;360安全浏览器&#xff0c;谷歌浏览器&#xff0c;搜狗手机浏览器&#xff0c;猎豹浏览器及杂牌浏览器。移动端常见的浏览…

jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件

jQuery事件&#xff1a; jQuery中的事件和javascript中的事件基本相似&#xff0c;不同的是jQuery中的事件处理函数写在事件后面的括号中&#xff0c;如&#xff1a; <script>$(input).click(function() {alert(hello word);});</script>jQuery中常见事件&#xf…

BigQuery 分区表简介和使用

大纲 什么是分区表 我们先看定义&#xff1a; 分区表是一种数据库表设计和管理技术&#xff0c;它将表中的数据划分为逻辑上的多个分区&#xff0c;每个分区包含一组特定的数据。每个分区都根据定义的分区键&#xff08;通常是一个列或字段&#xff09;的值进行分类&#xff…

jQuery操作属性、设置文本、遍历元素、元素创建添加删除、操作元素尺寸、操作元素位置、注册事件、事件处理、解绑事件、拷贝、多库共存、jQuery插件

jQuery操作属性&#xff1a; jQuery中提供三种方法操作属性&#xff0c;分别是&#xff1a;prop()、arrt()、data(),具体如下&#xff1a; prop()操作自带属性&#xff1a;用来操作元素本身自带的属性&#xff08;包括没有显示在DOM上的自带属性&#xff09;&#xff0c;如:a…

分享MYSQL中的各种高可用技术(源自姜承尧大牛)

图片和资料来源于MYSQL大牛姜承尧老师&#xff08;MYSQL技术内幕作者&#xff09; 姜承尧&#xff1a; 网易杭州研究院 技术经理 主导INNOSQL的开发 mysql高可用各个技术的比较 数据库的可靠指的是数据可靠 数据库可用指的是数据库服务可用 可靠的是数据&#xff1a;例如工商银…

数据库、MySQL介绍及安装流程、SQL语句中增删改查、SQL注入、通过php操作数据库,plugin ‘caching_sha2_password加密规则,分表查询

MySQL数据库&#xff1a; 数据库&#xff1a; 存放数据的仓库&#xff0c;用来按照特定的结构去组织和管理我们的数据&#xff0c;有数据库就可以更加方便的储存数据&#xff1b; 数据库只是存储数据的一种手段&#xff0c;最终数据是存放在硬盘中的&#xff0c;只是存放的格…

chartjs和echartsjs库简介

chart.js和echarts.js: 尽管我们已经掌握了canvas绘图和SVG矢量图&#xff0c;在实际开发中我们依旧不会使用canvas和SVG&#xff0c;因为考虑到开发成本&#xff0c;一般会采用相关的图表库进行辅助开发&#xff0c;市面上常用的图表库有chart.js和echarts.js&#xff1b;如果…

弱智的我

【你能看到多少个人头? 】 0—4张: 弱智; 5—8张: 一般人; 9—11张: 特别感性; 11—13张: 精神分裂. 晕倒, 我是弱智的...就看到一个人头...转载于:https://www.cnblogs.com/zhangzujin/p/3877222.html

typecho和wordpress模板了解、开发流程介绍、前台后台前端后端区分

网站模板搭建网站&#xff1a; 使用网站模板搭建网站很简单&#xff0c;只需要将相关文件放到你自己的服务器上面&#xff0c;之后在进行相关的配置即可。这里给大家介绍两款网站模板&#xff1a; typecho&#xff1a; 是一个轻量高效&#xff0c;简单操作就能搭建网站的模板…

在浏览器端调试代码并直接修改原文件、移动端虚拟键盘中实现搜索按钮

在浏览器端调试代码并直接修改原文件&#xff1a; 此调试方法可以避免在浏览器调试完代码后在到原文件手动修改代码的弊端&#xff0c;其具体方法如下&#xff1a; 1.先将要调试的页面在浏览器&#xff08;Google&#xff09;打开&#xff0c;这里小编打开桌面test文件夹中的…

Bootstrap简介、下载bootstrap及引入文件说明、响应式容器和满屏容器、栅格系统

Bootstrap简介&#xff1a; Bootstrap是Twitter&#xff08;推特&#xff09;开发的&#xff0c;目前最受欢迎的前端开源框架&#xff0c;基于jQuery用于开发HTML、CSS、JavaScript&#xff0c;简洁灵活&#xff0c;常用于开发响应式布局及移动端开发。其中文官方文档&#xf…

openerp child_of操作符深度解析

child_of 此操作符&#xff0c;从代码来看&#xff0c;等价于&#xff1a; [(x,child_of,id)] > x.prarent_left >id.parent_left && x.parent_left < id.parent_right , 求x&#xff08;的集合&#xff09;。 为了形象的说明&#xff0c;我们一步步来&…

当ASP.NET Forms验证方式遭遇苹果IOS

一、问题出现 我在用ASP.NET MVC4做微信开发的时候&#xff0c;用Forms验证方式做为authentication。 一般都是在web.config加&#xff1a; <authentication mode"Forms" ><forms loginUrl"~/Account/Login" name"webcookies" sliding…

bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象

轮播图&#xff1a; bootstrap封装了轮播图的功能&#xff0c;其具体如下&#xff1a; 类名描述.carousel创建一个轮播图块的容器&#xff0c;实质是做布局用&#xff1b;且此容器应该有一个di属性&#xff0c;其属性值提供给下面左右按钮href锚点值&#xff0c;用于左右按钮…

node简介及安装、下载及运行hexo

node简介&#xff1a; 1.node.js的可以打开服务端的黑盒子及高级前端(Vue、React 、Angular)的学习&#xff0c;例如&#xff1a;文件的读写、网络服务的构建、网络通信等。 2.node.js是操作服务器的一种工具&#xff0c;构建于Chrome的v8引擎之上&#xff0c;可以操作服务器…

Repository 仓储,你的归宿究竟在哪?(一)-仓储的概念

写在前面 写这篇博文的灵感来自《如何开始DDD(完)》&#xff0c;很感谢young.han兄这几天的坚持&#xff0c;陆陆续续写了几篇有关于领域驱动设计的博文&#xff0c;让园中再次刮了一阵“DDD探讨风”&#xff0c;我现在不像前段时间那样“疯狂”了&#xff0c;写博文需要灵感&a…