1、鼠标的移入移除
js部分
//onmouseover、onmouseout子集到父级和父级到子集都活触发
yellow.onmouseover = function(){ }
yellow.onmouseout = function(){ }
//鼠标进去 onmouseenter.onmouseleave只在当前目标元素触发一次
yellow.onmouseenter = function(){ }
yellow.onmouseleave = function(){}
2、鼠标事件
js部分
//鼠标单击 onclick
div1.onclick = function(){}
// 鼠标双击 ondblclick
div1.ondblclick = function(){ }
// 鼠标按下 onmousedown
div1.onmousedown = function(){ }
// 鼠标抬起onmouseup
div1.onmouseup = function(){}
// 右击鼠标oncontextmenu
div1.oncontextmenu = function(){}
// 鼠标移动 onmousemove
div1.onmousemove = function(){}
3、事件对象
js部分
我们可以通过事件对象来拿到鼠标事件、 键盘事件所携带信
息。获取事件对象可以 直接通过 window.event 拿到这个对
象,但是由于火狐浏览器并不支持这个方法,所以 我们一般需
要在触发事件的函数中传入 event 参数,以适配火狐
// 为什么加window 为了兼容浏览器更早的版本
document.onmouseup = function(e){
var ev = e||window.event;
}
4、键盘事件
js部分
onkeydown按下键盘 携带的一个参数是:keyCode，这
个参数的每个按键的编码，我们可以通过编码判断用户按下
的键
练习：（上、下、左、右键控制div的移动）
部分代码如下：
document.onkeydown = function(e){
var ev= e||window.event;
switch (e.keyCode)
{
case 37:
div1.style.left = div1.offsetLeft-10+'px';
break;
case 38:
div1.style.top = div1.offsetTop-10+'px';
break;
case 39:
div1.style.left = div1.offsetLeft+10+'px';
break;
case 40:
div1.style.top = div1.offsetTop+10+'px';
break;
default;
console.log('其他按键');
}
}
5、输入框事件
js部分
// onfocus当输入框聚焦时触发
btn.onfocus = function(){ }
// onblur当输入框失焦时触发
btn.onblur = function(){}
// oninput当在输入框输入内容的时候触发 实时监听
btn.oninput = function(){}
// onchange 当输入框内的内容修改时触发 提交监听
btn.onchange = function(){}
6、表单事件
js部分
// onsubmit表单提交事件
form1.onsubmit = function(e){
var e= ev||window.event;
if (userName.value==''|| passWord.value == '') {
//方式1. 阻止默认事件
// e.preventDefault() ie6-ie8不兼容 只针对on事件;
//方式2. 阻止默认事件
return false;
}
}
7、事件冒泡与下沉、如何阻止事件传递 、事件的绑定/监听
js部分
// 事件冒泡 子节点事件带动父节点一级级执行
// 事件冒泡 父级先执行，一级级到下面的子集执行
// 阻止事件传递
// 1.cancelBubble = true;(非标准)
// 2.stopPropagation();
用法： event.cancelBubble = true;
event.stopPropagation();
//事件的绑定/监听 addEventListener(‘事件’，函数，true/false);
注意： true下沉 false 冒泡(默认)
// 移除事件removeEventListener
例：
var color = document.querySelectorAll('div');
for (var i = 0; i < color.length; i++) {
color[i].addEventListener('click',function(e){
var ev= e||window.event;
e.stopPropagation();
console.log(this.id);
},true);
}
练习：（div的拖拽 js部分代码）
document.addEventListener('mousedown',function(){
div1.addEventListener('mousemove',FN,false);
},false);
document.addEventListener('mouseup',function(){
div1.removeEventListener('mousemove',FN,false);
},false);
function FN(e){
var ev= e||window.event;
div1.style.left = e.clientX-div1.offsetWidth/2+'px';
div1.style.top = e.clientY-div1.offsetHeight/2+'px';
}
