一、触摸事件
- 描述：在移动端设备中由触摸操作触发的事件
类型：
- (1)touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发
- touchmove:当手指在屏幕上滑动时连续的触发
- touchend:当手指从屏幕上移开时触发
- *touchcancel:当系统停止跟踪触摸时触发。(如电话接入或者弹出信息,一般在这个操作中来做一些暂停游戏类的操作)
注意：
- ps：如非特殊说明，事件均为冒泡事件
- pss：手机触摸事件必须使用dom2来进行绑定
- psss：可以给一个元素添加多个触摸事件
<div style="width: 200px;height: 200px ;background-color: aqua" ;></div>
<script>
var div = document.querySelector('div');
div.addEventListener('touchstart', function() {
console.log('开始触摸');
})
div.addEventListener('touchmove', function() {
console.log('在屏幕上滑动');
})
div.addEventListener('touchend', function() {
console.log('触摸结束');
})
div.addEventListener('touchcancel', function() {
console.log('触摸中断');
})
</script>
【触摸对象】的属性
- 触摸对象，即【事件对象的touches属性】中的每一个元素；一次触摸会创建一个触摸对象
触摸属性：
- clientX：触摸目标在视口中的X坐标
- clientY：触摸目标在视口中的Y坐标
- identifier：表示触摸的唯一ID
- pageX：触摸目标在页面中的X坐标
- pageY：触摸目标在页面中的Y坐标
- screenX：触摸目标在屏幕中的X坐标
- screenY：触摸目标在屏幕中的Y坐标
- target：触摸的DOM节点坐标
通常情况下都会在触摸事件被触发的时候，通过这至少两个属性来获取当前节点的位置
【事件对象】的属性
- 事件对象，即【事件触发时】用来保存【事件相关的所有信息的对象】
- 事件对象基本都是系统为我们自动生成，不必手动创建
- touches：表示当前跟踪的触摸操作的Touch对象的数组（当前屏幕上所有的触摸点列表）
- targetTouches：特定于事件目标的Touch对象的数组（当前对象上所有的触摸点列表）
- changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组（涉及当前事件的触摸点列表）
- 获取触摸点的坐标 语法：event.touches[n].pageX\pageY
<div></div>
<style>
div {
width: 50%;
height: 800px;
background-color: aqua;
}
</style>
<script>
var div = document.querySelector('div');
div.onmousemove = function() {
console.log("(x,y):" + '(' + event.clientX + ',' + event.clientY + ')')
console.log(event);
}
//获取触摸点的坐标
div.addEventListener('touchstart', function() {
console.log(event.touches[0].pageX);
console.log(event.touches[0].pageY);
})
</script>
二、this对象
- 描述：this代表【函数运行时】【自动生成的】一个【用来指代函数调用者】的对象，this只能在函数内部使用
- 注意：函数的调用者是谁，this就是谁
<script>
function test() {
console.log(this);
}
test();
</script>
<script>
function test() {
console.log(this);
}
document.addEventListener('click',test);
</script>
当鼠标单击时：
<div style="width: 200px;height: 200px;background-color: red"></div>
<script>
function test() {
console.log(this);
}
document.querySelector('div').addEventListener('click', test);
</script>
当鼠标在div区域单击时：
三、非IE下的event
1.非IE下的event对象
- 描述：当dom tree中某个事件被触发的时候，会同时自动产生一个用来描述事件所有的相关信息（比如出发事件的元素、或者是事件的类型）的对象，这个对象就是event（事件对象）
获取方式：
- 在脚本中直接通过event来获取
<div style="width: 200px;height: 200px;background-color: aqua"></div>
<script>
var div = document.querySelector('div');
div.onclick = function() {
console.log(event);
console.log(typeof event);
}
console.log(event);
</script>
- 还可以通过函数传参数的形式来使用，一般而言我们使用【形参e或eve】来代替
<div style="width: 200px;height: 200px;background-color: aqua"></div>
<script>
var div = document.querySelector('div');
div.onclick = function(aa) {
console.log(aa);
console.log(event);
}
</script>
非IE下event对象的常用属性
type属性
- 描述：type属性用来获得【当前触发事件】的类型，此属性只读
- 语法：event.type
<div style="width: 200px;height: 200px;background-color: aqua"></div>
<script>
var div = document.querySelector('div');
div.onclick = function() {
console.log(event.type);
}
</script>
bubbles属性
- 描述：bubbles属性用来获得**【当前触发事件的类型】是否冒泡**，如果当前事件类型支持冒泡则返回true，否则返回false
- 注意：bubbles属性指的是该事件是否冒泡。和事件处理机制无关
- 语法：event.bubbles
<div style="width: 200px;height: 200px;background-color: aqua"></div>
<script>
var div = document.querySelector('div');
div.onclick = function(eve) {
console.log('div受到监听');
console.log(event.bubbles);
//阻止事件传播
eve.stopPropagation();
}
document.body.onclick = function(e) {
console.log('body受到监听');
}
</script>
2.非IE下的event对象属性
eventPhase属性
- 描述：事件传导至【当前节点】时处于什么的状态
- 说明：本属性是只读属性，有三个可能的值—事件处于捕获状态；事件处于真正的触发者；事件处于冒泡状态
<div class="div" style="width: 200px; height: 200px; background-color: #f40;"></div>
<script>
// 获得元素
// var div1 = document.querySelector('.div1');
// var div2 = document.querySelector('.div2');
var div = document.querySelector('.div');
//冒泡状态
div.onclick = function(eve) {
console.log('div:' + eve.eventPhase);
}
document.body.onclick = function(eve) {
console.log('body:' + eve.eventPhase);
}
document.onclick = function(eve) {
console.log('document:' + eve.eventPhase);
}
//捕获状态
div.addEventListener('click', function(eve) {
console.log('div:' + eve.eventPhase);
}, true)
document.body.addEventListener('click', function(eve) {
console.log('body:' + eve.eventPhase);
}, true)
document.addEventListener('click', function(eve) {
console.log('document:' + eve.eventPhase);
}, true)
</script>
单击div区域时：
target属性
- 描述：获取事件的真正触发者
- 语法：eve.target
- 注意：事件内部可以认为eve.target等同于this作用
<ul>
<li>首页</li>
<li>娱乐</li>
<li>军事</li>
<li>游戏</li>
</ul>
<style>
ul {
list-style: none;
padding: 0
}
li {
width: 100px;
height: 30px;
line-height: 30px;
display: inline-block;
text-align: center;
background-color: aqua;
}
ul .orange {
background-color: orange;
}
</style>
<script>
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
lis[i].onmousedown = function(eve) {
// this.className='orange';
eve.target.className = 'orange';
};
lis[i].onmouseup = function(eve) {
// this.className='';
eve.target.className = '';
}
}
</script>
当鼠标按下时：
示例2：
<div class="div1">div1
<div class="div2">div2</div>
</div>
<style>
.div1 {
width: 200px;
height: 200px;
background-color: aqua
}
.div2 {
width: 100px;
height: 100px;
background-color: orange
}
</style>
<script>
// 获得元素
var div1 = document.querySelector('.div1');
var div2 = document.querySelector('.div2');
div1.onclick = function(eve) {
console.log('div1上事件对象的target：' + eve.target.innerHTML);
}
div2.onclick = function(eve) {
console.log('div2上事件对象的target：' + eve.target.innerHTML);
}
</script>
当分别单击div1和div2区域后：
currentTarget 属性
- 描述：返回事件的监听者（当前触发者）
- 语法：eve.currentTarget
- 注意：事件在哪个节点触发，currentTarget属性就是谁
<div class="div1">div1
<div class="div2">div2</div>
</div>
<style>
.div1 {
width: 200px;
height: 200px;
background-color: aqua
}
.div2 {
width: 100px;
height: 100px;
background-color: orange
}
</style>
<script>
// 获得元素
var div1 = document.querySelector('.div1');
var div2 = document.querySelector('.div2');
div1.onclick = function(eve) {
console.log('div1上事件对象的currentTarget：' + eve.currentTarget.innerHTML);
}
div2.onclick = function(eve) {
console.log('div2上事件对象的currentTarget：' + eve.currentTarget.innerHTML);
}
</script>
当分别单击div1和div2区域后：
3.非IE下的event对象方法
stopPropagation（）方法
- 描述：用来阻止事件从当前节点传播到下一个节点
- 语法：eve.stopPropagation()
- 注意：ps:stopPropagation方法虽然能够阻断事件的传播，但是并不会影响同一节点上的其他事件句柄
<div class="div1">div1
<div class="div2">div2</div>
</div>
<style>
.div1 {
width: 200px;
height: 200px;
background-color: aqua
}
.div2 {
width: 100px;
height: 100px;
background-color: orange
}
</style>
<script>
var div1 = document.querySelector('.div1');
var div2 = document.querySelector('.div2');
div1.onclick = function(eve) {
console.log('div1被点击了');
}
div2.onclick = function(eve) {
console.log('div2被点击了');
// eve.stopPropagation();
}
</script>
当分别单击div1和div2区域后：
<div class="div1">div1
<div class="div2">div2</div>
</div>
<style>
.div1 {
width: 200px;
height: 200px;
background-color: aqua
}
.div2 {
width: 100px;
height: 100px;
background-color: orange
}
</style>
示例2：
<script>
var div1 = document.querySelector('.div1');
var div2 = document.querySelector('.div2');
div1.onclick = function(eve) {
console.log('div1被点击了');
}
div2.onclick = function(eve) {
console.log('div2被点击了');
// eve.stopPropagation();
}
</script>
此时分别单击div1区域、单击div2区域以及双击div2区域后：
preventDefault()方法
- 描述：用来取消当前节点的默认行为(譬如超级链接的点击跳转行为)。该方法没有返回值。
- 语法：eve.preventDefault()
<a href="http://www.baidu.com">点击</a>
<script>
var anchor = document.querySelector('a');
anchor.onclick = function(eve) {
eve.preventDefault();
}
</script>
此时当单击a标签后，并无跳转现象产生！！！
cancelable属性
- 描述：用来判断当前节点能否使用preventDefault方法来取消默认行为。
- 语法：eve.cancelable
<a href="http://www.baidu.com">点击</a>
<script>
var anchor = document.querySelector('a');
anchor.onclick = function(eve) {
if (eve.cancelable) {
//如果存在默认行为就取消当前节点的默认行为
eve.preventDefault();
} else {
//否则就输出如下内容
console.log('当前节点没有默认行为可以取消');
}
}
</script>
此时由于a标签存在默认行为，因此当单击a标签后并无任何现象产生！！！
四、IE下event事件对象获取
1.1 区别：
1.1.1非IE下event的值默认为undefined，而IE中event的值默认为null
console.log(event);
非IE环境下：
IE环境下（低版本10及其以下）：
1.1.2 非IE下可以随意通过dom0或dom2中的参数来使用event，而IE中dom0级无法使用传参的形式来使用event（dom2可以）。
<div class="div1">div1
<div class="div2">div2</div>
</div>
<style>
.div1 {
width: 200px;
height: 200px;
background-color: aqua
}
.div2 {
width: 100px;
height: 100px;
background-color: orange
}
</style>
<script>
// 得到元素
var div1 = document.querySelector('.div1');
var div2 = document.querySelector('.div2');
div2.onclick = function(eve) {
console.log(eve);
console.log(event);
console.log(window.event);
}
</script>
非IE环境下：
IE环境下（IE8及其以下）：
<script>
// 得到元素
var div1 = document.querySelector('.div1');
var div2 = document.querySelector('.div2');
// div2.onclick = function(eve) {
// console.log(eve);
// console.log(event);
// console.log(window.event);
// }
div2.attachEvent('onclick', function(eve) {
console.log(eve);
console.log(event);
console.log(window.event);
})
</script>
IE环境下（IE8及其以下）：
1.2 注意：
- 无论在哪个浏览器下，window.event或者直接写event都是可以获取event对象的
- 因为event本身是归属于window的一个属性，因此我们可以在函数中通过
var eve = e||window.event
来解决获取event对象的兼容性问题
<div class="div1">div1
<div class="div2">div2</div>
</div>
<style>
.div1 {
width: 200px;
height: 200px;
background-color: aqua
}
.div2 {
width: 100px;
height: 100px;
background-color: orange
}
</style>
<script>
// 得到元素
var div1 = document.querySelector('.div1');
var div2 = document.querySelector('.div2');
div2.onclick = function(eve) {
//e在非IE下时为eve，在IE下时为window.event
var e = eve || window.event;
console.log(e);
}
</script>
非IE环境下：
IE环境下：
五、事件委托
- 描述：给父元素绑定事件，用来监听子元素的冒泡事件，并能找到是哪个子元素的事件
1.未利用事件委托时：
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
<button>点我</button>
<script>
// 获得元素
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
console.log(this.innerHTML);
}
}
var but = document.querySelector('button');
var ul = document.querySelector('ul');
but.onclick = function() {
var li = document.createElement('li');
li.innerHTML = '新创建的li';
li.onclick = function() {
console.log(this.innerHTML);
}
ul.appendChild(li);
}
</script>
当点击li1–li4时：
当点击按钮时：
当点击新建的li时：
2.利用事件委托时：
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
<button>点我</button>
<script>
// 获得元素
var but = document.querySelector('button');
var ul = document.querySelector('ul');
ul.onclick = function(eve) {
console.log(eve.target.innerHTML);
}
but.onclick = function() {
var li = document.createElement('li');
li.innerHTML = '新创建的li';
ul.appendChild(li);
}
</script>
当点击li1–li4时：
当点击按钮时：
当点击新建的li时：
六、IE下event事件对象的属性和方法
1.srcElement属性
- 描述：等同于非IE下target
- 注意： 利用 var target = eve.target || eve.srcElement; 来解决兼容性问题
<div class="div1">div1
<div class="div2">div2</div>
</div>
<style>
.div1 {
width: 200px;
height: 200px;
background-color: aqua
}
.div2 {
width: 100px;
height: 100px;
background-color: orange
}
</style>
<script>
var div1 = document.querySelector('.div1');
var div2 = document.querySelector('.div2');
div2.onclick = function(eve) {
var e = eve || window.event;
var myTarget = e.target || e.srcElement;
console.log(myTarget);
}
</script>
IE环境下：
非IE环境下：
cancelBubble属性
- 描述：cancelBubble属性用来阻止事件在当前节点上的冒泡行为。作用类似于非IE下的stopPropagation方法。
语法：
- event.cancelBubble = false;(默认值)
- event.cancelBubble = true;(可以取消冒泡)
<div class="div1">div1
<div class="div2">div2</div>
</div>
<style>
.div1 {
width: 200px;
height: 200px;
background-color: aqua
}
.div2 {
width: 100px;
height: 100px;
background-color: orange
}
</style>
<script>
var div1 = document.querySelector('.div1');
var div2 = document.querySelector('.div2');
div2.onclick = function(eve) {
var e = eve || window.event;
console.log('这是div2的点击事件');
e.cancelBubble = true; //表示阻断
}
div1.onclick = function(eve) {
var e = eve || window.event;
console.log('这是div1的点击事件');
}
</script>
IE环境下：
3.returnValue属性
- 描述：returnValue属性用来设置【是否取消当前节点的默认行为】作用类似于非IE下的preventDefault方法
** 语法：**
- event.returnValue = false;(取消默认行为)
- event.returnValue = true;(默认值)
<a href="http://www.bjsxt.com">尚学堂</a>
<script>
var anchor = document.querySelector('a');
anchor.onclick = function(eve) {
var e = eve || window.event;
e.returnValue = false; //表示取消默认行为
}
</script>
此时当你单击a标签后，a标签不会出现任何反应
4.总结：
七、其他
7.1阻止事件默认行为
const oA = document.querySelector("a");
oA.onclick = function(event) {
event = event || window.event;
//阻止事件默认行为方式1
return flase; //推荐写法，对于高级浏览器、低级浏览器都有效
//阻止事件默认行为方式2
event.preventDefault(); //注意：只支持高级版本的浏览器
// 针对低级版本
event.returnValue = false; //IE9及其以下
};
7.2阻止事件冒泡
const oA = document.querySelector("a");
oA.onclick = function(event) {
event = event || window.event;
//阻止事件冒泡
event.stopPropagation(); //注意：只支持高级版本的浏览器
// 针对低级版本
event.cancelBubble = true; //IE9及其以下
//推荐
if (event.cancelBubble) {
event.cancelBubble = true;
} else {
event.stopPropagation();
}
};
7.3 事件源
当事件触发时，将与事件本身相关的一系列信息存储在了一个对象中，这个对象就是事件源对象
事件源对象的获取:
document.getElementById("a").onclick=function(e){
//在一个事件的函数中使用事件源对象
if(!e){
e=event;
}
console.log(e);
}
事件位置获取–offsetX、offsetY、clientX、clientY、pageX、pageY、screenX、screenY
注意：
clientX/clientY无论高级浏览器还是低级浏览器都支持
pageX/pageY只有高级浏览器支持，低级浏览器不支持（IE9以下）
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background: red;
margin-left: 100px;
margin-top: 100px;
}
<div class="box"></div>
const oDiv = document.querySelector('.box');
oDiv.onclick = function(e) {
e = e || window.e;
//触发事件相对于当前元素的位置
// console.log(e.offsetX);
// console.log(e.offsetY);
//触发事件相对于浏览器左下角(可视区)的位置，不包括滚动出去的范围
// console.log(e.clientX);
// console.log(e.clientY);
//触发事件相对于浏览器左下角(可视区)的位置，包括滚动出去的范围
// console.log(e.pageX);
// console.log(e.pageY);
//触发事件相对于显示器的位置（了解）
console.log(e.screenX);
console.log(e.screenY);
};
1708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
