JS基础

 获取鼠标点击的位置（相对于显示区域的位置）
 // e.clientX  X轴
 // e.clientY  Y轴
 
 keydown //键盘按下
 keyup //键盘抬起
 
 // 如果鼠标移入或者移出 子元素 范围 
 // mouseover 和 mouseout  会触发~
 // mouseenter 和 mouseleave 不受 子级元素范围干扰
 
 // 获取鼠标点击的位置（相对于页面左上角位置）
 // e.pageX X轴
 // e.pageY Y轴
 
 // 将事件添加到父级身上  - 事件委托
 e.target.parentNode
 e.target.tagName=='LI'
 
 // 获取事件源 元素
 // console.log(e.target);
 
 // js当中有一个特性： 事件会冒泡
 //  DOM树 
 // html > body > div > p 
 // p标签 包含在 div/body/html
 // 执行子元素事件同时，父元素如有同样事件，也会执行
 // 事件冒泡的执行顺序  ： 由小到大  p > div > body > html 
 
 // addEventListener('ev',fn,[Boolean,{}])  默认冒泡执行的
 // 默认第三个参数是 false （不捕获）
 // 第三个参数：如果是布尔值：true 是进行捕获执行， false 不捕获
 document.body.addEventListener('click',function(){
     alert('body');
 },true);
 // 事件捕获： 由大到小  html > body > div > p 
 
 // 第三个参数 还可以 传递对象：{}
 // capture:true/false 是否在捕获阶段执行
 // once:true/false 只执行一次事件
 div.addEventListener('click',function(){
     alert('div');
 },{
     once:true
 });
 // passive:false/true //阻止取消默认事件
 a.addEventListener('click',function(e){
     alert('a');
     // 阻止浏览器默认行为
     e.preventDefault();
 },{
     // 阻止取消默认事件 true(不允许阻止) 、 false （允许阻止）
     passive:false
 });
 
 表单方法：
 focus //获取焦点时
 change //内容改变时
 input //当内容修改时
 submit //提交事件
 reset //重置事件
 keydown // 键盘按下快门时候
 keyCode //获取按键
 
 键盘事件
 e.keyCode // keyCode 键码
 e.key // e.key 键值
 e.ctrlKey //是否按下Ctrl键
 e.altKey  //是否按下alt键
 e.shiftKey //是否按下shift键
 
 
 默认行为
 // 阻止浏览器默认行为！
 e.preventDefault();
 return false
 在事件绑定中 return false 无法实现取消默认行为功能
 //只能在直接添加事件的写法下使用
 document.oncontextmenu=function(e){
 	...
 	return false;
 }
 
 双击事件
 dblclick
 
 鼠标右键
 contextmenu 
 
 鼠标滚轮事件
 // 谷歌和ie
 mousewheel 
 // e.wheelDelta
 // 滚轮向上 - > 120
 // 滚轮向下 - >  -120
 // firefox
 DOMMouseScroll
 // e.detail
 // 滚轮向上  ->  -3
 // 滚轮向下  ->  3
 
 鼠标跟随：
 mousemove
 e.clientX //可是区域宽度
 e.pageX //页面宽度
 
 // 元素本身有事件，不想执行父级身上的事件
 // 取消事件冒泡
 
  p.addEventListener('click',function(e){
     // 取消事件冒泡
     // ie支持 
     e.cancelBubble = true;
     alert('p')
 })
 
 p.addEventListener('click',function(e){
     // 取消事件冒泡
     e.stopPropagation()
     alert('p')
 })
 
 div.addEventListener('click',function(){
     alert('div');
 },{
     once:true
 });
 
 浏览器可视区宽度 - 自身宽度
 document.documentElement.clientWidth - div.offsetWidth;