1,实现一个拖拽的小功能
//小方块的拖拽
function drag(elem){}
var div = document.getElementsByTagName('div')[0];
var disX,
disY;
div.onmousedown = function (e) {
disX = e.pageX - parseInt(div.style.left);//确定移动的中心点
disY = e.pageY - parseInt(div.style.top);
document.onmousemove = function(e) {
var event = e || window.event;
div.style.left = e.pageX - disX + "px";
div.style.top = e.pageY - disY +"px";
}
document.onmouseup = function (){
div.onmousemove = null;
}
}
一个非常老版的方法,只有IE能用,它会把页面所有的事件捕获到自己身上,那么就可以解决拖拽的时候,鼠标快于系统帧频的速度。(鼠标指针飞出去了,但是div没有跟着移动的问题)
elem.setCapture();
elem.releaseCapture();
2,事件分类
鼠标事件
- click
- mousemove
- mousedown------------mouseup
- contextmenu(右键菜单栏)
- mouseover-----------mouseout
- mouseenter----------mouseleave(迎合h5的新特性)
//一次click = mousedown + mouseup
document.onclick = function() {
console.log('onclick');
}
document.onmousedown = function() {
console.log('mousedown');
}
document.onmouseup = function() {
console.log('mouseup');
}
拓展一下:移动端onmousemove,onmousedown,onmouseup不好使,要用 touchmove ,touchstart ,touchend
- 用button来区分鼠标的左右键
DOM3标准规定:click事件只能监听左键,只能通过mousedown和mouseup才能区分鼠标左右键
document.onmousedown = function(e) {
if(e.button == 2){
console.log('right');
}else if(e.button == 0){
console.log('left');
}
}
- 案例:实现一个a标签的小方块拖拽(拖拽不等于点击)
用时间差来确定它是点击还是拖拽,点击的时间差是非常短的。
var firstTime = 0;
var lastTime = 0;
var key = false;
document.onmousedown = function () {
firstTime = new Date().getTime();
}
document.onmouseup = function () {
lastTime = new Date().getTime();
if(lastTime - firstTime < 300){
key = true;
}
}
document.onclick = function () {
if(key){
console.log('click');
key = false;
}
}
键盘事件
- keydown
- keyup
- keypress
- keydown > keypress > keyup
- keydown 和keypress很相似,但是也有区别
- keydown 可以敲响任意按键
- keypress只可以敲响字符类键盘按键,然后返回ASCII码,可以转换成相应字符
//转换成相应字符
document.onkeypress = function (e) {
console.log(String.fromCharCode(e.CharCode));
}
//一次keypress 不等于keydown + keyup, 它们是这样的关系:keydown > keypress > keyup
document.onkeypress = function() {
console.log('onkeypress');
}
document.onkeydown = function() {
console.log('onkeydown');
}
document.onkeyup = function() {
console.log('keyup');
}
文本操作事件
- input
- focus
- blur
- change
input事件监听input输入栏的值
var input = document.getElementsByTagName('input')[0];
input.oninput = function(e){
console.log(this.value);
}
change事件其实是比较聚焦前和失焦时候的两个状态的不同
var input = document.getElementsByTagName('input')[0];
input.onchange = function(e){
console.log(this.value);
}
- 小案例,实现输入栏的聚焦输入信息,失焦依旧有提示信息
<input type = "text" value="请输入用户名" onfocus="if(this.value == '请输入用户名'){this.value = ''}" onblur="if(this.value == ''){this.value = '请输入用户名'}">
窗体操作类(window上的事件)
- scroll
- load(window.onload()是要等到DomTree和CssTree生成后渲染成RenderTree后,才开始调用js)
ie6没有position : fixed定位
实现兼容
3,总结