学习内容

• 事件流
• 阻止事件冒泡
• 阻止默认行为
• 获取事件对象
• 事件委托
• 封装tap事件
• 左滑右滑事件封装

事件流

//事件传播
//一、浏览器内的事件流机制
//当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发相同的事件
//二、事件捕获 / 目标 / 冒泡
//1. 事件捕获: 从上到下、从祖先到子孙依次传递事件的过程
//2. 事件目标: 触发事件的对象，点击在哪个元素上，这个事件的'目标'就是什么
//3. 事件冒泡: 从下到上、从子孙到祖先依次传递事件的过程
//4. 浏览器默认启动了事件冒泡
//5. IE和欧朋浏览器不支持事件捕获。

阻止事件冒泡

//标准浏览器: event.stopPropagation()
//IE浏览器: event.cancelBubble = true;
//阻止事件冒泡的兼容
//function stopPropagation(evt){
//    var e = evt || window.event;
//    e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
//}

阻止默认行为

//默认行为，就是不用我们注册，它自己就存在的事情
//比如我们点击鼠标右键的时候，会自动弹出一个菜单
//比如我们点击 a 标签的时候，我们不需要注册点击事件，他自己就会跳转页面
//...
//这些不需要我们注册就能实现的事情，我们叫做'默认事件'//阻止浏览器默认行为
//标准浏览器: event.preventDefault()
//IE浏览器: event.returnValue = false
//阻止浏览器默认行为的兼容
//function preventDefault(evt){
//    var e = evt || window.event;
//    e.preventDefault ? e.preventDefault() : e.returnValue = false;
//}> return false : 既阻止默认行为，也阻止事件冒泡！
复制
剪切
粘贴

获取事件对象

//arguments : 存储实参的地方
//标准浏览器的事件对象？给函数传递的第一个参数（实参）
//什么时候使用事件对象？
/*1. 获取鼠标坐标值的时候2. 获取键盘编码值的时候3. 实现快捷键的时候4. 阻止事件冒泡的时候5. 阻止默认行为的时候
*/document.onclick = function(e){console.log(e);
}

事件委托

//事件委托就是把我要做的事情委托给别人来做
//因为我们的冒泡机制，点击子元素的时候，也会同步触发父元素的相同事件
//所以我们就可以把子元素的事件委托给父元素来做
//将加到子元素上的事件，添加到父元素上，为了提高性能。原理是利用了事件冒泡//1. 实现事件委托
//事件添加到父元素
//通过事件对象获取事件源
//进行过滤
//2. 事件源//target
//target 这个属性是事件对象里面的属性，表示你点击的目标
//当你触发点击事件的时候，你点击在哪个元素上，target 就是哪个元素
//这个 target 也不兼容，在 IE 下要使用 srcElement
//标准浏览器: event.target
//IE浏览器: event.srcElement// 获取事件源的兼容
//function getTarget(evt){
//    var e = evt || window.event;
//    return e.target || e.srcElement;
//}//
1
2
3
呵呵
4
5
6
7
哈哈
8
9
10

//
苦心人
天不负
卧薪尝胆
三千越甲可吞吴

封装tap事件

//封装事件
//dom: 事件源，触发事件的对象
//tapCallback: 轻击后的回调函数，轻击后想要执行什么？
/ clickCallback: 点击后的回调函数，点击后想要执行什么？

左滑右滑事件封装

/*
Touch事件:
touches: 当前位于屏幕上的所有手指的一个列表
targetTouches: 位于当前DOM元素上的手指的一个列表；
changedTouches: 涉及当前事件的手指的一个列表；
screenX，screenY: 触摸点相对于屏幕上边缘的坐标；
clientX，clientY: 触摸点相对于浏览器的 viewport 左边缘的坐标，不包括左边的滚动距离；
pageX，pageY: 触摸点相对于 document 的左边缘的坐标，与 clientX 不同的是它包括左边滚动的距离，如果有的话；
target: 总是表示手指最开始放在触摸设备上的触发点所在位置的 element。
*//*
用 touch 事件模拟点击、左滑、右滑、上拉、下拉等事件，
是利用 touchstart 和 touchend 两个事件发生的位置来确定是什么操作。
例如:
1、touchstart 和 touchend 两个事件的位置基本一致，也就是没发生位移，那么可以确定用户是想点击按钮等。
2、touchend 在 touchstart 正左侧，说明用户是向左滑动的。
利用上面的原理，可以模拟移动端的各类事件。
*/

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！