zoukankan      html  css  js  c++  java
  • 第 9 章 事件对象

    JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象。但由于浏览器 的兼容性,开发者总是会做兼容方面的处理。jQuery 在封装的时候,解决了这些问题,并且 还创建了一些非常好用的属性和方法。

    一.事件对象 事件对象就是 event 对象,通过处理函数默认传递接受。之前处理函数的 e 就是 event 事件对象,event 对象有很多可用的属性和方法,我们在 JavaScript 课程中已经详细的了解 过这些常用的属性和方法,这里,我们再一次演示一下。

    //通过处理函数传递事件对象
    $('input').bind('click',function(e){
    //接受事件对象参数
    alert(e);
    }); 

    //通过 event.type 属性获取触发事件名
    $('input').click(function(e){ alert(e.type); });


    //通过 event.target 获取绑定的 DOM 元素
    $('input').click(function(e){ alert(e.target); });


    //通过 event.data 获取额外数据,可以是数字、字符串、数组、对象
    $('input').bind('click',123,function(){ //传递 data 数据 alert(e.data); //获取数字数据 });
    注意:如果字符串就传递:'123'、如果是数组就传递:[123,'abc'],如果是对象就传递: {user:'Lee',age:100}。数组的调用方式是:e.data[1],对象的调用方式是:e.data.user。
    //event.data 获取额外数据,对于封装的简写事件也可以使用
    $('input').click({user:'Lee', age:100},function(e){ alert(e.data.user); });
    注意:键值对的键可以加上引号,也可以不加;在调用的时候也可以使用数组的方式: alert(e.data['user']);


    //获取移入到 div 之前的那个 DOM 元素
    $('div').mouseover(function(e){ alert(e.relatedTarget); });
    //获取移出 div 之后到达最近的那个 DOM 元素
    $('div').mouseout(function(e){ alert(e.relatedTarget); });


    //获取绑定的那个 DOM 元素,相当于 this,区别与
    event.target $('div').click(function(e){ alert(e.currentTarget); });
    注意:event.target 得到的是触发元素的 DOM,event.currentTarget 得到的是监听元素的 DOM。而 this 也是得到监听元素的 DOM。


    //获取上一次事件的返回值
    $('div').click(function(e){ return'123'; });
    $('div').click(function(e){ alert(e.result); });


    //获取当前的时间戳
    $('div').click(function(e){ alert(e.timeStamp); });


    //获取鼠标的左中右键
    $('div').mousedown(function(e){ alert(e.which); });


    //获取键盘的按键
    $('input').keyup(function(e){ alert(e.which); });


    //获取是否按下了 ctrl 键,meta 键不存在,导致无法使用
    $('input').click(function(e){ alert(e.ctrlKey); });


    //获取触发元素鼠标当前的位置
    $(document).click(function(e){ alert(e.screenY+','+e.pageY+',' +e.clientY); });

    二.冒泡和默认行为 

    如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出 现冒泡问题。

    //HTML 页面
    <divstyle="200px;height:200px;background:red;">
    <inputtype="button"value="按钮"/>
    </div>
    //三个不同元素触发事件
    $('input').click(function(){
    alert('按钮被触发了!');
    });
    $('div').click(function(){
    alert('div 层被触发了!');
    });
    $(document).click(function(){
    alert('文档页面被触发了!');
    });
    注意:当我们点击文档的时候,只触发文档事件;当我们点击 div 层时,触发了 div 和 文档两个;当我们点击按钮时,触发了按钮、div 和文档。触发的顺序是从小范围到大范围。 这就是所谓的冒泡现象,一层一层往上。

    jQuery 提供了一个事件对象的方法:event.stopPropagation();这个方法设置到需要触发 的事件上时,所有上层的冒泡行为都将被取消。 $('input').click(function(e){
        alert('按钮被触发了!');
        e.stopPropagation();
    });

    网页中的元素,在操作的时候会有自己的默认行为。比如:右击文本框输入区域,会弹 出系统菜单、点击超链接会跳转到指定页面、点击提交按钮会提交数据。
    //点击超链接会跳转到指定页面 
    $('a').click(function(e){ e.preventDefault(); });
    //禁止提交表单跳转
    $('form').submit(function(e){ e.preventDefault(); });
    注意:如果想让上面的超链接同时阻止默认行为且禁止冒泡行为,可以把两个方法同时 写上:event.stopPropagation()和 event.preventDefault()。这两个方法如果需要同时启用的时候, 还有一种简写方案代替,就是直接 return false。
    $('a').click(function(e){
           returnfalse;
    });

    冒泡和默认行为的一些方法
    方法名 描述
    preventDefault() 取消某个元素的默认行为
    isDefaultPrevented() 判断是否调用了 preventDefault()方法
    stopPropagation() 取消事件冒泡
    isPropagationStopped() 判断是否调用了 stopPropagation()方法
    stopImmediatePropagation() 取消事件冒泡,并取消该事件的后续事件处理函数
    isImmediatePropagationStopped() 判断是否调用了 stopImmediatePropagation()方法

    //判断是否取消了元素的默认行为
    $('input').keyup(function(e){
     e.preventDefault();
     alert(e.isDefaultPrevented());
    });

    //弹出是true

    //判断是否取消了元素的默认行为
    $('input').keyup(function(e){ 
     alert(e.isDefaultPrevented());
    });

    //弹出是false

    //取消冒泡并取消后续事件处理函数
    $('input').click(function(e){
      alert('input');
      e.stopImmediatePropagation();
    });
    $('input').click(function(){
      alert('input2');
    });
    //弹出input 不弹出input2

     //判断是否执行了 stopImmediatePropagation()方法
    $('input').click(function(e){
      e.stopImmediatePropagation();
      alert(e.isImmediatePropagationStopped());
    });
    //弹出是true

  • 相关阅读:
    vue中$router和$route的区别
    移动端rem自适应
    如何用Mac自带的QuickTime Player录制视频并制作GIF动图
    vue页面刷新重定向
    JavaScript Functional Programming:声明式与命令式
    配置一个可以使用Vue的History模式的后端服务
    vue使用jsx语法开发
    vue多页面项目配置
    JavaScript的本来面貌之默认结构
    JavaScript的本来面貌之默认值
  • 原文地址:https://www.cnblogs.com/Xuman0927/p/6016122.html
Copyright © 2011-2022 走看看