zoukankan      html  css  js  c++  java
  • 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>

      

      

  • 相关阅读:
    MySQL多实例配置
    MySQL8.0启动和关闭流程
    MySQL8.0初始化配置方式 ——维护使用
    MySQL多种连接方式
    MySQL 8.0用户及安全管理
    MySQL 5.7安装及版本升级到8.0
    五十六、linux 编程——UDP 编程模型
    五十五、linux 编程——TCP 连接和关闭过程及服务器的并发处理
    五十四、linux 编程——TCP 编程模型
    五十三、linux 编程——TCP 编程基本介绍
  • 原文地址:https://www.cnblogs.com/96weibin/p/8527918.html
Copyright © 2011-2022 走看看