JavaScript（十二）事件

Dom事件

1.DOM0级事件

　　on事件 只能 监听冒泡阶段 切只能绑定一个事件

dom.onclick = function(){};

2.Dom2级事件

　　可以绑定多次事件    可以通过设置flag来监听冒泡和捕获阶段　　先捕获再冒泡 捕获自上至下 冒泡从下向上

dom.addEventListener('click',function(){},flag)    //flag true为捕获 false 为默认冒泡

3.常见的事件

DOMContentLoaded	DOM加载完成
onblur	元素失去焦点
onclick	鼠标点击某个对象
ondbclick	鼠标双击某个对象
onfocus	元素得到焦点
onkeydown	键盘某个按键按下(event.key/event.keycode)
onkeypress	某个按键被按下或按住
onkeyup	某个按键被松开
onload	某个页面火元素被加载完成
onmousedown	当鼠标按键被按下
onmousemove	当鼠标移动
onmouseout	当鼠标移出某个元素
onmouseup	当鼠标按键松开
onmouseover	当鼠标位于某元素上
onselect	文本被选定
onresize	当窗口大被调整
onsubmit	提交按钮被惦记
onunload	用户退出页面

 

4.事件的冒泡捕获（低版本的IE没有事件捕获）

<div class="box">
      <button>按钮</button>
</div>

 

<script>
    var btn = document.getElementsByTagName('button')[0];
    var box = document.getElementsByClassName('box')[0];
    box.addEventListener('click',function(){
      console.log('box true')
    },true)
    box.addEventListener('click',function(){
      console.log('box false');
    },false)
    btn.addEventListener('click',function(){
      console.log('btn true');
    },true);
  </script>

结果是 

 

 4.取消事件绑定

 　　取消on事件    

btn.onclick=null;

　　取消二级事件(removeEventListener(type,function-name))

btn.removeEventListener('click',move);//只有有名的函数 事件才能取消

 　　阻止默认事件

event.preventDefault()

　　或者

return false；　　//这即停止了 默认事件 也 阻止了冒泡

 

5.event 对象　　ele.onclick = function(event){}　(event是一个json 对象 )

　　currentTarget　　目标事件，在冒泡中依然是 触发事件的那个元素

　　target　　　　　时间不妙

　　bubbles　　　　等属性

　　offsetX/Y　　　　鼠标距离元素边框的 x/y

　　screenX/Y　　　　鼠标距离显示器边界的X/Y

　　clientX/Y　　　　鼠标距离body的X/Y

6.阻止冒泡

　　cancleBubble 或者 stopPropagation

btn.onclick = function(){
      event.cancelBubble=true;
      event.stopPropagation();
      console.log(event)
    }

7.需要的兼容

　　event = event || window.event;

　　target = event.target || event.srcElement 

8.事件委托

　　

 <ul>
    <li id="1">1</li>
    <li id="2">2</li>
    <li id="3">3</li>
    <li id="4">4</li>
    <li id="5">5</li>
    <li id="6">6</li>
    <li id="7">7</li>
    <li id="8">8</li>
    <li id="9">9</li>
    <li id="10">10</li>
  </ul>

<script>
    var oUl = document.getElementsByTagName('ul')[0];
    oUl.addEventListener('click',function(event){
      var event = event || window.event;
      var target = event.target || event.srcEelement;
      
      console.log(target.id)
    })
  </script>

 9.获取滚动条距离顶端的距离

　　

document.documentElement.scrollTop;

 10.阻止A标签的默认跳转事件

  <a href="#"></a>
  <a href="" onclick="return false"></a>
  <a href="javascript:void(0);"></a>