一、鼠标事件
1、单击事件
box.onclick
2、双击事件(双击时也会触发单击)
box.ondblonclick
3、鼠标右键
box.oncontextmenu=function(){ console.log('右键事件'); //取消鼠标的默认事件 return false;}
4、按下|移动|抬起|鼠标悬浮|鼠标移开|鼠标右键
onmousedown 鼠标按下onmousemove 鼠标移动onmouseup 鼠标抬起onmouseover 鼠标悬浮onmouserout 鼠标移开(从父集移至子集,触发out事件,紧接着触发子集的over事件,并可以冒泡给父集(触发父集的over))oncontextmenu 鼠标右键onmouseenter 鼠标悬浮()onmouseleave 鼠标移开(leave默认子集是父集的一部分,所以从子集移到父集不会触发,enter事件也不会触发)
enter:父集enter 子集enter (不支持冒泡)over:子集over 父集over(想当于子集冒泡给父集) (支持冒泡)
总结: 将父集和自己分开考虑盒子的悬浮离开事件,用over | out组合;
将子集纳入父集的考虑当中,只考虑父集的相应悬浮离开事件,采用 enter | leave组合;
单独考虑一个盒子的悬浮离开事件,都可以使用
二、js的盒模型
1、应用
==>100px
2、数字字符转换
var a="1213124"//转化成整型a=+a//如果待单位会转化成NaNa=parseInt(a)//字符的切割a.substr(0,3)==>123 //从0往后取3个单位a.slice(0,2)==>12 //从0取到2,前取后不取
3、获取padding
三、鼠标事件的拖拽案例
1.v1版本
2、鼠标拖拽事件v2版本
四、键盘事件
1、键盘按下事件(键盘按下会一直触发事件)
2、键盘按下移动盒模型案例
四、javascript其他事件
1、onload(文档加载事件)
2、onscroll事件
*100