专栏首页互联网杂技接上一篇事件详解

接上一篇事件详解

事件类型:

DOM3级事件规定了以下几类事件;如下:

UI事件: 当用户与页面上的元素交互时触发;

load事件:当页面加载完后(包括所有图像,所有javascript文件,css文件等外部资源),就会触发window上面的load事件,如下代码是加载图片的:

HTML代码:<img src = “event.png” id=”img”/>

JS代码如下:

var img = document.getElementById("img");
EventUtil.addHandler(img,'load',function(event){
      var event = EventUtil.getEvent(event);
      alert(EventUtil.getTarget(event).src);
});

当图片加载完后,就会弹出图片的url地址了;

如果在创建新的img元素时,可以为其指定一个事件处理程序,以便图像加载完成后给出提示,此时,最重要的是在指定src属性之前先指定事件;如下代码所示:

 EventUtil.addHandler(window,'load',function(){
    var img = document.createElement("img");
    EventUtil.addHandler(img,'load',function(e){
        e = EventUtil.getEvent(e);
        alert(EventUtil.getTarget(e).src);
    });
    document.body.appendChild(img);
    img.src = "event.png";
});

在图像加载完成后,会弹出图片地址了;

同样的功能,我们可以使用DOM0级的Image对象来实现,在DOM出现之前,开发人员经常使用Image对象在客户端预加载图像,如下代码:

EventUtil.addHandler(window,'load',function(){
    var img = new Image();
    EventUtil.addHandler(img,'load',function(e){
        alert(1);
    });
    img.src ="event.png";
});

Script元素也支持load事件,但是IE8及以下不支持,在IE9+,Firefox,Opera,chrome及Safari3+都支持,以便开发开发人员确定动态加载的javascript文件是否加载完毕;比如我们动态创建script标签后,通过load事件判断动态创建的script标签是否加载完毕,代码如下:

EventUtil.addHandler(window,'load',function(){
    var script = document.createElement("script");
    EventUtil.addHandler(script,'load',function(e){
        alert(1);
    });
    script.src = "a.js";
    document.body.appendChild(script);
});

焦点事件:当元素获得或失去焦点时触发;

有:blur:在元素失去焦点时触发,这个事件不会冒泡,所有浏览器都支持。

foucs:在元素获得焦点时触发,这个事件不会冒泡,所有浏览器都支持。

鼠标事件:当用户通过鼠标在页面操作时触发;

  1. click事件:在用户单击鼠标按钮或者按下回车键触发;
  2. dblclick事件:在用户双击鼠标按钮时被触发;
  3. mousedown事件:在用户按下了任意鼠标按钮时被触发,不能通过键盘触发这个事件。
  4. mouseenter事件:在鼠标光标从元素外部移动到元素范围之内被触发;这个事件不冒泡;
  5. mousemove事件:当鼠标指针在元素内部移动时重复地触发。
  6. mouseout事件:用户将其移入另一个元素内被触发。
  7. mouseover事件:鼠标指针在元素外部,用户将移入另一个元素的边界时触发,感觉和mouseenter事件类似;
  8. mouseup事件:用户释放鼠标按钮时触发;

页面上所有的元素都支持鼠标事件,除了mouseenter和mouseleave,所有鼠标事件都会冒泡,也可以被取消,而取消鼠标事件将会影响浏览器的默认行为。

理解客户区坐标位置

含义是:鼠标指针在可视区中的水平clientX和垂直clientY坐标;

理解页面坐标位置pageX和pageY:

pageX与pageY是指页面坐标的位置,与clientX和clientY的区别是:它包含页面滚动条的位置,

屏幕横坐标screenX和垂直坐标screenY属性是相对于整个屏幕的

理解鼠标滚轮事件:

IE6首先实现了mousewheel事件,此后opera,chrome和safari也都实现了这个事件,当用户通过鼠标滚轮与页面交互,在垂直方向上滚动页面时(无论向上还是向下),就会触发mousewheel事件,这个事件可以在任何元素上触发,最终会冒泡到document(IE8)或window(IE9,Opera,Chrome,Safari)对象,与mousewheel事件对应的event对象外,还有一个属性wheelDelta属性,当用户向前滚动鼠标滚轮时,wheelDelta是120的倍数,当用户向后滚动鼠标滚轮时,wheelDelta是-120的倍数。

将mousewheel事件给页面任何元素或document对象,即可处理鼠标滚轮操作;如下代码:

EventUtil.addHandler(btn,'mousewheel',function(e){
    e = EventUtil.getEvent(e);
    alert(e.wheelDelta);
});

如上代码,我不是在document对象或者window对象上,而是在页面btn元素上触发的;但是我们要注意,在Opera9.5之前的版本中,wheelDelta值的正负号是颠倒的,如果我们要支持Opera9.5版本之前的话,那么我们需要浏览器检测技术来检测下;如下代码

EventUtil.addHandler(document, "mousewheel", function(event){
    event = EventUtil.getEvent(event);
    // var delta = (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
       var delta = event.wheelDelta;
    alert(delta);
});

但是client.engine.opera 这句代码运行下会报错,因为目前还没有封装这个方法,所以等下一个博客我会研究代理检测封装下这个方法;所以先不考虑opera9.5,先注释掉这句代码;

但是FireFox支持一个为DOMMouseScroll的事件,也是在鼠标滚轮滚动时触发,与mousewheel事件一样,但是他的有关鼠标滚轮信息保存在detail属性中,当鼠标向前滚动时,这个属性值是-3的倍数,当鼠标滚轮向后滚动时,这个属性值是3的倍数;也可以给DOMMouseScroll事件使用在任何元素上,且这个事件会冒泡到window对象上,因此我们可以这样添加滚轮信息的代码如下:

EventUtil.addHandler(document, "DOMMouseScroll", function(event){
    event = EventUtil.getEvent(event);
    alert(event.detail);
});

我们现在可以给跨浏览器下的滚轮事件;代码如下:

function getWheelDelta (event) {
    if(event.wheelDelta) {
    // return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
         return  event.wheelDelta;
    }else {
        return -event.detail * 40
    }
}

getWheelDelta方法首先检测了事件对象是否包含了wheelDelta属性,如果包含则返回属性值,如果不包含,那么我们就当作是firefox浏览器,那么假设相应的值保存在detail属性中,有了上面的方法后,我们现在可以将相同的事件指定给mousewheel事件和DOMMouseScroll事件了;

EventUtil.addHandler(document, "DOMMouseScroll", handleMouseWheel);
EventUtil.addHandler(document, "mousewheel", handleMouseWheel);
function handleMouseWheel(event) {
    event = EventUtil.getEvent(event);
    var delta = EventUtil.getWheelDelta(event);
    alert(delta);
}

滚轮向上滚动是正数120,向下滚动是负数-120,所以根据是否大于0,可以判断是向下滚动还是向上滚动;

HTML5事件

1. contextmenu事件

contextmenu事件在windows操作系统下,我们是使用右键就可以自定义右键弹出菜单,但是我们使用右键的时候会有默认的菜单,因此我们需要使用阻止默认事件这个方法来阻止掉;此事件也是属于鼠标事件,因此此事件包含与光标位置中所有的属性

理解hashchange事件

HTML5中新增加了hashchange事件,以便在URL的参数列表(url中的#号后面的所有参数发生改变时通知开发人员),在Ajax应用中,开发人员经常使用url参数列表保存状态或导航信息;

我们必须把hashchange事件添加到window对象中,然后当url参数列表只要发生变化就会调用此事件,此事件对象event包含2个属性,oldURL和newURL,这两个属性分别保存着URL变化前后的完整URL;

支持的浏览器有:IE8+,firefox3.6+,safari5+,chrome和opera10.6+

在这些浏览器中,只有firefox3.6+,chrome和opera支持oldURL和newURL属性;

如下代码:

EventUtil.addHandler(window, "hashchange", function(event){
     alert("Old URL: " + event.oldURL + "\nNew URL: " + event.newURL);
});

设备事件中的—orientationchange事件

苹果公司为移动safari添加的orientationchange事件是能让用户确定何时将设备由横向查看模式切换到纵向模式触发的事件;此属性中包含三个值,0表示肖像模式;90表示向左旋转的横向模式(主屏幕按钮在右侧),-90表示向右旋转的横向模式(主屏幕按钮在左侧),

理解移动端的事件—触摸与手势事件

有以下几个触摸事件:

  1. touchstart: 当手指触摸屏幕时触发,即使是一个手指放在屏幕上也会触发。
  2. touchmove:当手指在屏幕上滑动时连续地触发,这个事件发生期间,我们可以使用preventDefault()事件可以阻止滚动。
  3. touchend: 当手指从屏幕上移开时触发。
  4. touchcancel: 当系统停止跟踪触摸时触发。

上面几个事件都属于冒泡事件,我们可以对此进行取消事件,每个触摸的event对象都提供了在鼠标中常见的属性;

bubbles, cancelable,view,clientX, clientY ,screenX, screenY,detail, altKey, shiftKey, ctrlKey, metaKey,

除了常见的DoM属性外,触摸事件还包含下列三个用于跟踪触摸的属性;

touches: 表示当前跟踪的触摸操作的Touch对象数组;

targetTouches: 特定与事件目标的Touch对象数组;

changeTouches: 表示自上次触摸以来发生了什么改变的Touch对象数组;

本文分享自微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer),作者:json

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-10-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 判断图片是否加载完成

    有时需要获取图片的尺寸,这需要在图片加载完成以后才可以。有三种方式实现,下面一一介绍。 1、load事件 <!DOCTYPE HTML> <html> <hea...

    前朝楚水
  • MVC 模式中的 3 种角色

    在 MVC 模式中,主要涉及 3 种角色——Model、View 和 Controller,下面简要介绍一下它们。  Model Model 负责保存应用数据...

    前朝楚水
  • 非名校出身的我,是如何拿到Facebook、谷歌、微软、亚马逊和Twitter的Offer的?

    非名校出身,也没有知名科技公司的工作经验,他竟同时拿到了美国5家顶尖科技公司的Offer。他究竟是如何做到的?

    前朝楚水
  • JavaScript学习笔记012-DOM2级事件监听-代理0冒泡-捕获模式

    Bootstrap,Foundation,Semantic UI,Angular,React Redux,Vue?

    Mr. 柳上原
  • Vue.js安装教程安装步骤安装中遇到的问题

    俞其荣
  • Sass 基础(八)

    @import       Sass 支持所有css 的@规则,以及一些Sass 专属的规则,也被称为“指令(directive)”.这些规则在Sass 中具...

    用户1197315
  • 从零构建以太坊(Ethereum)智能合约到项目实战——学习笔记8

    P35 、Solidity Types - 字符串(String Literals)

    墨文
  • 曾佳欣 | 智慧会展的风口,如何抓住机遇?

    ? 受到疫情影响,传统线下展会无法举行。将线下展会挪到线上进行,已成为破局展览业发展的一剂良方。 4月13日,商务部办公厅印发《关于创新展会服务模式,培育展览...

    腾讯文旅
  • SEO优化-robots.txt解读

    搜索引擎(爬虫),访问一个网站,首先要查看当前网站根目录下的robots.txt,然后依据里面的规则,进行网站页面的爬取。 也就是说,robots.txt起到一...

    我是leon
  • 网站页面优化:ROBOTS文件和META ROBOTS

    ROBOTS文件(robots.txt)位于网站根目录的文件,也称为机器人排除协议或标准,用于告知搜索引擎网站上的哪些网页要抓取,哪些页面不要抓取。META R...

    林雍岷

扫码关注云+社区

领取腾讯云代金券