欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

事件

程序员文章站 2022-04-27 19:44:59
...

DOM0级事件和DOM2级事件的区别:
1、DOM0同一事件只能执行一次,DOM2同一事件可以绑定多次
2、DOM0基本都是冒泡,DOM2可以指定捕获或冒泡
3、不是所有事件DOM0都支持,例:FF的滚轮事件只能使用DOM2

冒泡与捕获:
冒泡:同一事件由子级向父级逐层传递称之为冒泡(先实现子级的方法)
捕获:同一事件由父级向子级逐层传递称之为捕获(先实现父级的方法)

阻止冒泡的兼容写法

var e = e || window.event;
if(e.stopPropagation){
	// 非IE浏览器阻止冒泡写法
	e.stopPropagation();
}else{
	// IE浏览器阻止冒泡写法
	e.cancelBubble = true;
}

阻止捕获的兼容写法

var e = e || window.event;
if(e.preventDefault){
	// 非IE浏览器阻止捕获写法
	e.preventDefault();
}else{
	// IE浏览器阻止捕获写法
	e.returnValue = true;
}

委托事件
自己的事件交由父级实现,通过事件对象的target属性获取对应子级标签

键盘事件
keydown当用户按下键盘上的任意键时触发,按住不动将重复触发
keyup(event.keyCode键码)当用户释放键盘上的键时触发
keypress当用户按下键盘上的字符键时触发,按住不动将重复触发(不能检测到所有按键,有局限性)

鼠标事件
坐标位置:screenX、screenY在屏幕中的X、Y坐标
clientX、clieintY表示事件发生时鼠标指针在视口中的水平坐标和垂直坐标 (不包括滚动距离)
offsetX、sffsetY获取点击目标的坐标(有兼容性)
pageX、pageY在页面中的x、y坐标(保活滚动距离,IE不支持这两个属性)

触屏事件(移动端)
touchstart不止会产生一个触摸点所以会产生一个touches数组
解除默认preventDefault()
touchstart:当手纸触摸屏幕时触发
touchmove:当手指在屏幕上滑动时连续触发
touchend:当手指从屏幕上移开时触发

判断设备是否是移动端

function isPhone(){
	var is = false;
	var arr = ['iOS','iPhone','Android','iPad','iPod']
	for(var i = 0; i < arr.lenght; i++){
		if(navigator.userAgent.includes(arr[i])){
			is = true;
			break;
		}
	}
	return is;
}

检测是否碰撞

function isCash(a, b){
	var l1 = a.offsetLeft;
	var t1 = a.offsetTop;
	var r1 = l1 + a.offsetWidth;
	var b1 = t1 + a.offsetHeight;

	var l2 = b.offsetLeft;
	var t2 = b.offsetTop;
	var r2 = l2 + b.offsetWidth;
	var b2 = t2 + b.offsetHright;
	
	if(r2 < l1 || b2 < t1 || r1 < l1 || b1 < t2){
		return false;
	}else{
		return true;
	}
}