JavaScript（十二）事件

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 69 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/96weibin/p/8527918.html

文章标签：

#javascript #json #ViewUI

本文详细介绍了DOM事件的不同级别，包括DOM0级和DOM2级事件的特点与使用方式，并列举了多种常见事件类型及其应用场景。此外还讲解了事件冒泡与捕获机制、事件委托技巧以及如何取消事件绑定等。

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>

转载于:https://www.cnblogs.com/96weibin/p/8527918.html