HTML总结07（事件）

ZzZzZz
364 阅读6分钟

1. 网络状态改变事件

h5新增了两个监听网络状态改变的事件

  • online 网络已连接
  • offline 网络已断开
  • navigator.onLine 判断是否在线 navigator是window窗口的一个对象，包含有关访问者的信息，该对象可以不带window前缀来写

navigator.onLine是一个只读属性。

window.addEventListener("online", function(){ console.log('网络已连接') })
window.addEventListener("offline",function(){ console.log('网络断开') })

2. insertAdjacentElement(position,element) insertAdjacentText(position,text) insertAdjacentHTML(position,text)

  • 将一个给定的元素节点插入到相对于被调用的元素的给定的一个位置
  • position四个值: beforebegin 在该元素本身的面前 afterbegin 只在该元素当中，在该元素第一个子孩子之前 beforeend 在该元素当中，在该元素最后一个子孩子后面 afterend 在该元素本身的后面
 log.onclick = function () {
          this.insertAdjacentText('beforebegin','插入的元素')
      }

3. 全屏事件

  • HTML5 规范允许用户自定义网页上的任意元素全屏显示，但是因为浏览器厂商原因，各浏览器存在差异

  • 属性

    ① document.fullscreen 判断当前文档是否全屏显示内容，已弃用，不建议使用

    ② document.fullscreenElement 当前文档正以全屏模式显示的Element节点,如果没有全屏模式，则返回null，可以用于替代上面的属性

  • 方法

    ③ Element.requestFullscreen() 请求浏览器（user agent）将特定元素（甚至延伸到它的后代元素）置为全屏模式，隐去屏幕上的浏览器所有 UI 元素，以及其它应用。返回一个 Promise，并会在全屏模式被激活的时候变成 resolved 状态。

    ④ Document.exitFullscreen() 用于请求从全屏模式切换到窗口模式，会返回一个 Promise，会在全屏模式完全关闭的时候被置为resolved 状态。

  • 事件

    ① fullscreenchange事件，浏览器进入或者离开全屏时触发

    ② fullscreenerror事件，浏览器切换全屏状态报错回调

    由于兼容问题, 需要加兼容前缀,例如webkit内核浏览器: webkitRequestFullScreen

  • 轮子(fscreen)(github.com/rafgraph/fs…)

    import fscreen from './node_modules/fscreen/src/index.js';
console.log(fscreen.fullscreenEnabled);
console.log(fscreen.fullscreenElement);
if (fscreen.fullscreenEnabled) {
    document.addEventListener('keydown', function (e) {
        if (e.keyCode == 13) {
            if (!fscreen.fullscreenElement) {
                fscreen.requestFullscreen(dv);
            } else {
                fscreen.exitFullscreen();
            }
        }
    });
}

fscreen.addEventListener('fullscreenchange', function (e) {
    console.log(e);
    console.log(fscreen.fullscreenElement)
});

  • 全屏伪类选择器

        :full-screen .box{}
	:webkit-full-screen .box{}
    #dv:fullscreen {
      text-align: center;
      vertical-align: middle;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  • PC端事件

    1. onclick 鼠标点击触发(点击)
    2. onmousedown 鼠标按下触发
    3. onmousemove 鼠标移动触发
    4. onmouseup 鼠标抬起触发
    dv.onclick = function () {
// 类似于手势
// 一个组合的过程
console.log('点击了。');
};

// 原始指针事件
dv.onmousedown = function () {
console.log('鼠标按下');
};

dv2.onmousemove = function () {
console.log('鼠标移动');
};

dv2.onmouseup = function () {
console.log('鼠标抬起');
};

  • 移动端触屏事件

    1. ontouchstart 手指按下触发(相当于mousedown)
    2. ontouchmove 手指移动触发
    3. ontouchend 手指抬起触发
    dv.ontouchstart = function () {
console.log('移动端touch事件')
}
dv.ontouchmove = function() {
    console.log('移动端touch move')
}
dv.ontouchend = function () {
    console.log('移动端 touch end')
}

  • 事件监听

    1. addEventListener(‘不带on的事件名’,事件函数，是否冒泡 )事件绑定
    2. 绑定多少个事件就执行多少个，不会存在前后事件覆盖的问题
    3. 冒泡 从下往上，把事件一直向上传递，点击最下面的元素，最下面先执行
    4. 捕获 从上往下，把事件一直向下传递，点击最上面的元素，最上面先执行
    t2.addEventListener('touchstart', function (e) {
console.log('第一个事件');
});
t2.addEventListener('touchstart', function (e) {
    console.log('第二个事件');
    e.stopPropagation(); // 阻止冒泡
});
outside.addEventListener(
    'touchstart',
    function () {
        console.log('第三个事件');
    },
    {
        capture: false, // 是否在捕获阶段触发
    }
);

  • event对象

    1. 标准事件函数默认的第一个参数
    2. 是描述发生事件的详细信息

  • 阻止默认事件

    1. 事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情
    2. 比如正常情况下，鼠标可以拖拽图片，a标签跳转，手指长按可以选中文字，右键菜单等
    3. e.preventDefault( ) 阻止默认行为，且解决在IOS上有网页回弹的橡皮筋现象
    4. 选中文本use-select: none; 阻止选择

  • 阻止冒泡

    1. 在需要的时候的，标准用e.stopPropagation( ) 阻止冒泡问题，
    2. 配合capture使用，阻止冒泡

  • 获取手指对象

    1. touches 当前屏幕上的手指列表(所有触点的集合)
    2. targetTouches 当前元素上的手指列表(触发事件元素上的触点集合)
    3. changedTouches 触发当前事件的手指列表
    4. 获取手指的个数 e.changedTouches.length
    5. 获取坐标 e.changedTouches[0].pageX TouchEvent

  • 手指对象的区别

    1. 在touchend的时候想要获取手指列表，只能用changedTouches
    2. 原因在于，手指抬起了，也就没有touches,targetTouches了，只能用changedTouches
    document.addEventListener('touchstart', function (e) {
    console.log(e.touches);
    console.log(e.targetTouches);
    console.log(e.changedTouches);
});

document.addEventListener('touchend', function (e) {
    console.log(e.touches);
    console.log(e.targetTouches)
    console.log(e.changedTouches)
});

  • 防止误触问题

    1. 用JS做判断，手指移动就不跳转，没有移动，说明是点击，就跳转
    box.addEventListener(
"touchmove",
function() {
this.isMove = true;//定义一个变量来标识用户是否在元素上移动,
})

box.addEventListener(
"touchend",
function() {
//如果是移动就不会走if里边的事件.
if(!this.isMove) {
// window.location.href = this.href;
console.log(1)
}
this.isMove = false;
console.log(1)
}

  • 300ms延迟

    移动端网页点击历史问题
    1. 移动端屏幕小,pc网页大
    2. 网页缩小了,双击放大
    3. 单击后等待300ms, 判断用户是不是双击

解决300ms延迟

300 毫秒延迟的主要原因是解决双击缩放(double tap to zoom)。双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢？ 假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。 鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。 解决方案：

1)添加viewpoint meta标签

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

2)FastClick FastClick

移动端事件触发顺序：在移动端，手指点击一个元素，会经过：touchstart --> touchmove -> touchend -->click。 fastclick.js的原理是：FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉。 点透现象：当A/B两个层上下z轴重叠，上层的A点击后消失或移开（这一点很重要），并且B元素本身有默认click事件（如a标签）或绑定了click事件。在这种情况下，点击A/B重叠的部分，就会出现点透的现象。点透现象的关键点： A/B两个层上下z轴重叠。 上层的A点击后消失或移开。（这一点很重要） B元素本身有默认click事件（如a标签） 或 B绑定了click事件。 在以上情况下，点击A/B重叠的部分，就会出现点透的现象。

if('addEventListener' in document) {
  document.addEventListener('DOMContentLoaded', function() {
      FastClick.attach(document.body);
  }, false);
}
avatar
文章
阅读
粉丝