事件流描述的是从页面中接纳事件的逐意气风发

事件流

事件流描述的是从页面中吸收接纳事件的逐大器晚成,IE和Netscape建议来大约完全相反的轩然大波流的定义,IE事件流是事件冒泡流,Netscape事件流是事件捕获流。

事件冒泡

IE的轩然大波流叫做事件冒泡,即事件初阶时由最实际的要素(文书档案中嵌套最深的不得了节点卡塔尔(قطر‎选拔,然后逐级向上(一直到文书档案);如下代码:

<div id = "div">

        <a id="aTag">事件测试</a>

</div>

JS如下:

document.getElementById("aTag").addEventListener('click',aTag);
document.getElementById("span").addEventListener('click',span);
document.getElementById("div").addEventListener('click',div);
function aTag(e) {
    alert("点击的是a标签");
}
function span(e) {
    alert("点击的是span标签");
}
function div(e) {
    alert("点击的是div标签");
}

当单击 “事件测量检验”文字后,那么click事件会按部就班如下顺序传播;

1卡塔尔国先打字与印刷出:点击的是a标签

2卡塔尔国 再打字与印刷出:点击的是span标签

3卡塔尔 最终打字与印刷出:点击的是div标签

4卡塔尔国  最后一定是document文档。

享有现代浏览器都扶持事件冒泡。

事件捕获:

事件捕获与事件冒泡事件流赶巧相反的依次,事件捕获的风浪流是最外层逐级向内传出,也正是先document,然后逐级div标签
, span标签 , a标签;

上边的JS代码改成如下:

document.getElementById("div").addEventListener('click',div,true);
document.getElementById("aTag").addEventListener('click',aTag,true);
document.getElementById("span").addEventListener('click',span,true);

其八个参数设置为true,即为捕获事件,默以为false;不然的话,事件流照旧和方面包车型地铁等同,因为无论是在IE依然专门的学业浏览器下,事件冒泡浏览器都扶植的。

DOM事件流

DOM2级事件规定的风浪流包罗多少个阶段,分别是:事件捕获阶段,处于目的阶段和事件冒泡阶段。暗意图就不画了,具体的能够看看书。

DOM0级事件管理程序

平日来说代码是DOM0级事件管理程序:

var btn = document.getElementById("btn");
btn.onclick = function(){
     alert("Clicked");
};

动用DOM0级方法钦命的事件管理程序被以为是因素的不二法门,处理程序是在要素的效率域进行的,程序中this是援引的是当前成分。

<div id="btn">btn</div>
var btn = document.getElementById("btn");
btn.onclick = function(){
    alert(this.id); // 弹出btn
}

单击元素btn后,通过this.id获得成分的性质id,还足以由此this访问成分的其余性质和办法,以这种措施丰裕的政工处理程序在事件流的冒泡阶段管理。

也能够去除通过DOM0级方法钦赐的事件管理程序,只要将事件管理程序的属性值设置为null就能够。

btn.onclick = null; // 删除事件管理程序;

通常来讲JS代码改成如下:

var btn = document.getElementById("btn");
btn.onclick = function(){
    alert(this.id);
}
btn.onclick = null;

再单击btn后,未有其余反应;

DOM2级事件处理程序

DOM2级事件定义了2个章程,用于拍卖内定和删除事件管理程序的操作;

add伊芙ntListener(卡塔尔国和removeEventListener(卡塔尔。全体DOM节点都饱含那四个艺术,他们带有多个参数,第四个参数为事件类型;第四个参数为事件函数,第八个参数为布尔值,假使是true的话,表明是事件流是捕获事件,就算是false的话,那么事件流是冒泡事件;

比如如上的btn代码,大家改成如下:

var btn = document.getElementById("btn");
btn.addEventListener('click',function(e){
    alert(this.id);
},false);

地方的点击事件是在冒泡阶段被触发,与DOM0级方法风姿洒脱致,这里充分的事件管理程序也是在其依副的要素作用域中运维,使用DOM2级增加事件管理程序的裨益是足以加上三个事件管理程序,如下代码:

var btn = document.getElementById("btn");
btn.addEventListener('click',function(e){
    alert(this.id);
},false);
btn.addEventListener('click',function(e){
    alert("我是来测试的");
},false);

地点的代码被弹出2次会话框,而在DOM0级是不得以的;它永世是实施最终叁次的。

add伊夫ntListener增添的事件只好采用remove伊夫ntListener来删除相呼应的平地风波,那么如上的JS不能够根据上面包车型大巴办法来编排哦!需求给定义多个函数;如下:

btn.addEventListener('click',handler,false);
function handler(e){
   alert(this.id);
}

能够动用如下格局对click事件删除;如下代码:

btn.removeEventListener(‘click’,handler);

上面包车型大巴是在规范浏览器下管理的事件,下边大家来探视在IE下管理的平地风波;

IE事件处理的顺序

IE达成了与DOM相近的2个点子,分别是attachEvent(卡塔尔国和detach伊芙nt(卡塔尔(قطر‎,那七个议程只选拔2个参数,第多少个参数是事件名称,第三个参数是要拍卖的函数;由于IE8及更早版本只辅助事件冒泡,所以经过attachEvent(State of Qatar增添的事件处理程序会被增多到冒泡阶段;

上边是IE事件管理程序的代码如下:

btn.attachEvent('onclick',handler);
function handler(e){
    alert(this); // window
}

当心:attach伊芙nt的事件名称是onclick,而addEventListener的风云名称是click,且IE中动用的attachEvent(卡塔尔与运用DOM0级方法的的首要性区别在于事件管理程序的功用域,在应用dom0级意况下,事件管理程序在其所属成分的作用域内运转,在选用attachEvent(卡塔尔方法的情形下,事件处理程序在大局成效域下运作,个中的this等于window。

与add伊芙ntListener一样,attachEvent也得以注册八个点击click事件,如下代码:

btn.attachEvent('onclick',function(e){
    alert("1");
});
btn.attachEvent('onclick',function(e){
    alert("2");
});

而是与Dom方法分歧的是,这几个事件管理程序不是以增多他们的次第施行,而是以相反的顺序触发,比如如上代码,会先弹出2,然后弹出1对话框;

应用attach伊夫nt注册的平地风波只好动用detach伊芙nt(卡塔尔(قطر‎方法来移除;

下面大家能够来编排跨浏览器的事件管理程序;代码如下:

var EventUtil = {
    addHandler: function(element,type,handler) {
        if(element.addEventListener) {
                        element.addEventListener(type,handler,false);
        }else if(element.attachEvent) {
                    element.attachEvent("on"+type,handler);
        }else {
            element["on" +type] = handler;
        }
    },
    removeHandler: function(element,type,handler){
        if(element.removeEventListener) {
                    element.removeEventListener(type,handler,false);
        }else if(element.detachEvent) {
                    element.detachEvent("on"+type,handler);
        }else {
            element["on" +type] = null;
        }
    }
};

上边大家能够动用这么些包裹的函数代码来测验以前的代码了,代码改成如下所示:

function handler(){
    alert(1);
}
EventUtil.addHandler(btn,'click',handler);

在IE恐怕专门的工作浏览器下都会弹出1;假若我们必要移除click事件的话,大家得以应用如下代码:

EventUtil.removeHandler(btn,’click’,handler);

下一场在专门的工作浏览器下如故IE下点击btn成分都不曾影响;

事件目的:

在触发DOM上的某部事件时,会发生三个事件指标event,这几个指标中隐含着全部与事件有关的新闻;包罗引致事件的因素,事件的类型以至此外与一定事件有关的音讯。大家来探视dom0级和dom2级的事件指标Event;

诸如如下代码:

var btn = document.getElementById("btn");
btn.onclick = function(e){
    console.log(e);
}

打字与印刷如下:

图片 1

下边大家来探访最基本的积极分子的含义吧;如下:

属性/方法 类型 含义
bubbles Boolean 事件是否冒泡
cancelable Boolean 是否可以取消事件的默认行为
currentTarget Boolean 事件处理程序当前正在处理事件的那个元素
defaultPrevented Boolean 为true 表示已经调用了preventDefault()
detail Integer 与事件相关的细节信息
eventPhase Integer 调用事件处理程序的阶段:1表示捕获阶段,2表示“处于目标”,3表示冒泡阶段
preventDefault() Function 取消事件的默认行为。如果cancelable是true,则可以使用这个方法
stopImmediatePropagation() Function 取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用
stopPropagation() Function 取消事件的进一步捕获或冒泡。如果bubbles为true,则可以使用这个方法
target Element 事件的目标
type String 被触发的事件的类型
view AbstractView 与事件关联的抽象视图。等同于发生事件的window对象

理解currentTarget与target

在事件管理程序内部,this始终等于currentTarget值,即currentTarget是指当前被触发也许说正在处总管件的老大成分,而target是指当前的靶子成分;举例如下代码,对btn按钮触发点击事件,那么e.currentTraget指向了this,e.target也针对了this;如下代码:

var btn = document.getElementById("btn");
btn.onclick = function(e){
    console.log(e.currentTarget == this); // true
    console.log(e.target == this);  // true
}

唯独只要自身对document.body触发点击的话,那么e.currentTarget就本着了document.body了,那么e.target
指向与 btn那多少个成分了,如下代码:

document.body.onclick = function(e){
    console.log(e.currentTarget === document.body); // true
    console.log(document.body === this);  // true
    console.log(e.target === document.getElementById("btn")); //true
};

现在应有能知道currentTarget与target的区分呢!currentTarget就是指被点击的不胜成分,不过target是现阶段点击的对象成分,如上代码,由于btn上并从未挂号事件,结果click事件就冒泡到了document.body,在此边事件才得到了拍卖。

驾驭规范浏览器下的风浪指标与IE下的平地风波指标

专门的学业浏览器下的平地风波目的是event,举例btn点击后;如下代码:

var btn = document.getElementById("btn");
btn.onclick = function(){
    console.log(event); //标准浏览器下打印事件对象
    console.log(event.type);//'click'
}
btn.onclick = function(){
    // IE下打印的事件对象window.event
    console.log(window.event);
    console.log(window.event.type); // 'click'
 }

上边的写法是在DOM0级上注册事件,即使我们在Dom2级上登记事件的话,那么就能够有贰个风云指标event作为参数字传送入事件到函数中,如下:

var btn = document.getElementById("btn");
EventUtil.addHandler(btn,'click',function(e){
    console.log(e);
});

明白特定事件的暗中同意行为事件

在行业内部浏览器下,在阻止特定事件的私下认可行为,能够利用preventDefault(卡塔尔(قطر‎方法,例如如下,小编点击二个连连,按道理是张开一个新连接窗口,可是本人使用preventDefault(卡塔尔国方法能够阻止暗中同意行为,阻止展开新窗口;如下代码:

HTML:<a href="http://www.baidu.com" id="alink" target="_blank">打开新连接</a>
JS如下:
var alink = document.getElementById("alink");
alink.onclick = function(e){
    console.log(e)
    e.preventDefault();
}

就能够阻挡页面实行跳转了~
那是正经浏览器下管理格局,下边大家来探问IE是何等管理默许事件的;

IE下使用returnValue属性来裁撤给定事件的暗中认可行为,只要将returnValue属性值设置为false就能够,就能够阻挡浏览器的暗中同意行为,如下代码:

alink.onclick = function(){
    console.log(window.event)
    window.event.returnValue = false;
}

正规浏览器下与IE下的风云指标的差异

行业内部浏览器下行使e.target来钦命当前被点击的指标元素,如下代码所示:

var btn = document.getElementById("btn");
btn.onclick = function(){
    console.log(event); 
    console.log(event.target); // 打印事件目标元素
}

IE下是行使event.srcElement来内定当前的目的成分,如下代码:

btn.onclick = function(){
    console.log(event); 
    console.log(window.event.srcElement);
}

清楚标准浏览器与IE下阻止事件传播的界别

在职业浏览器下大家得以动用stopPropagation(卡塔尔(قطر‎方法来终止事件在DOM等级次序中的传播,即撤消事件中的冒泡只怕捕获。进而幸免接触注册在document.body下面的事件管理程序,如下所示:

var btn = document.getElementById("btn");
btn.onclick = function(e){
    alert(1);
    e.stopPropagation();
}
document.body.onclick = function(){
    alert(2);
}

如上代码,假使作者不行使stopPropagation(卡塔尔(قطر‎阻止冒泡事件的话,那么在页面中会先弹出1,然后弹出2,就算应用stopPropagation(State of Qatar方法的话,只会在页面上弹出1,就不会冒泡到body上面去;

IE下甘休冒泡的话,我们得以选用cancelBubble属性,我们倘诺将此属性设置为true,就可以阻止事件经过冒泡触发document.body中的注册事件。不过IE是不支持捕获事件的,不过stopPropagation(State of Qatar即扶持捕获事件又帮衬冒泡事件的。如下代码:

btn.onclick = function(e){
    alert(1);
    window.event.cancelBubble = true;
}
document.body.onclick = function(){
    alert(2);
}

假诺不设置window.event.cancelBubble
为true的话,就能够先弹出1,然后弹出2,即使加上的话,就只会弹出1对话框。

清楚了地点的分别后,大家今后得将来EventUtil对象里面增添跨浏览器的情势了;

跨浏览器的事件指标

var EventUtil = {
    addHandler: function(element,type,handler) {
        if(element.addEventListener) {
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent) {
            element.attachEvent("on"+type,handler);
        }else {
            element["on" +type] = handler;
        }
    },
    removeHandler: function(element,type,handler){
        if(element.removeEventListener) {
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent) {
            element.detachEvent("on"+type,handler);
        }else {
            element["on" +type] = null;
        }
    },
    getEvent: function(event) {
        return event ? event : window.event;
    },
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    preventDefault: function(event){
        if(event.preventDefault) {
            event.preventDefault();
        }else {
            event.returnValue = false;
        }
    },
    stopPropagation: function(event) {
        if(event.stopPropagation) {
            event.stopPropagation();
        }else {
            event.cancelBubble = true;
        }
    }
};

事件类型:

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

UI事件: 当顾客与页面上的因素人机联作时接触;

load事件:当页面加载完后(包含富有图像,全体javascript文件,css文件等外界财富State of Qatar,就能触发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坐标;

日常来讲图所示:

图片 2

代码如下:

EventUtil.addHandler(btn,'click',function(e){
    e = EventUtil.getEvent(e);
    console.log("可视区X轴坐标为:"+e.clientX + " "+ "可视区Y轴坐标为:"+e.clientY);
});

瞩目:顾客区坐标地方不含有滚动条滚动的岗位,由此那么些职分不意味着鼠标在页面上的职位;

精通页面坐标地方pageX和pageY:

pageX与pageY是指页面坐标的职责,与clientX和clientY的区分是:它富含页面滚动条之处,如下图所示:

图片 3

代码如下:

EventUtil.addHandler(btn,'click',function(e){
    e = EventUtil.getEvent(e);
    console.log("页面X轴坐标为:"+e.pageX + " "+ "页面Y轴坐标为:"+e.pageY);
});

在页面未有滚动条的情事下,pageX与clientX相等,同理pageY与clientY相等。

不过IE8及更早的版本不扶助pageX与pageY,但是大家能够使用顾客区坐标(client,clientYState of Qatar和滚动坐标总结出来;因而我们要求用到document.body(混杂形式下)或
document.documentElement(标准方式下)中的scrollLeft和scrollTop属性;

对此我们得以打包代码如下:

EventUtil.addHandler(btn,'click',function(e){
    e = EventUtil.getEvent(e);
    var pageX = e.pageX,
          pageY = e.pageY;
    if(!pageX) {
    pageX = e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
    }
    if(!pageY) {
    pageY = e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
    }
    console.log("页面X轴坐标为:"+pageX + " "+ "页面Y轴坐标为:"+pageY);
});

知晓显示屏坐标的职分

显示器横坐标screenX和垂直坐标screenY属性是相对于全部显示器的。如下图所示:

图片 4

如下代码测量检验:

EventUtil.addHandler(btn,'click',function(e){
    e = EventUtil.getEvent(e);
    console.log("屏幕X轴的坐标为:"+e.screenX + " "+"屏幕Y轴的坐标为:"+e.screenY);
});

理解鼠标滚轮事件:

IE6首先落到实处了mousewheel事件,从此opera,chrome和safari也都落到实处了那个事件,当客商通过鼠标滚轮与页面交互作用,在笔直方向上滚动页面时(无论向上依然向下State of Qatar,就能够触发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,能够判明是向下滚动依旧进步滚动;

清楚字符编码charCode

IE9+,firefox,chrome和safari的event对象都扶助一个charCode属性,这么些天性独有在发生keypress事件时才含有值,何况以此值是按下的要命键所代表字符的ASCLL编码,然则IE8及前边还是opera不扶持这么些性格,不过大家得以行使keyCode那一个属性庖代.在获取了字符编码之后,就足以采纳String.fromCharCode(State of Qatar将其调换到实际的字符。

日常来讲代码:

getCharCode: function(event) {
    if(typeof event.charCode == 'number') {
        return event.charCode;
    }else {
        return event.keyCode;
    }
}

咱俩今日得以给伊夫ntUtil增添事件了,如下代码:

var EventUtil = {
    addHandler: function(element,type,handler) {
        if(element.addEventListener) {
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent) {
            element.attachEvent("on"+type,handler);
        }else {
            element["on" +type] = handler;
        }
    },
    removeHandler: function(element,type,handler){
        if(element.removeEventListener) {
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent) {
            element.detachEvent("on"+type,handler);
        }else {
            element["on" +type] = null;
        }
    },
    getEvent: function(event) {
        return event ? event : window.event;
    },
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    preventDefault: function(event){
        if(event.preventDefault) {
            event.preventDefault();
        }else {
            event.returnValue = false;
        }
    },
    stopPropagation: function(event) {
        if(event.stopPropagation) {
            event.stopPropagation();
        }else {
            event.cancelBubble = true;
        }
    },
    getRelatedTarget: function(event){
        if (event.relatedTarget){
            return event.relatedTarget;
        } else if (event.toElement){
            return event.toElement;
        } else if (event.fromElement){
            return event.fromElement;
        } else {
            return null;
        }
    },
    getWheelDelta: function(event) {
        if(event.wheelDelta) {
            return event.wheelDelta;
        }else {
            return -event.detail * 40
        }
    },
    getCharCode: function(event) {
        if(typeof event.charCode == 'number') {
            return event.charCode;
        }else {
            return event.keyCode;
        }
    }
};

我们未来得以做叁个demo如下:

如下代码:
var inputDiv = document.getElementById("inputDiv");
EventUtil.addHandler(inputDiv,'keypress',function(event){
    event = EventUtil.getEvent(event);
    var code = EventUtil.getCharCode(event);
    alert(EventUtil.getCharCode(event)); // 弹出字符编码
    alert(String.fromCharCode(code));  // 弹出字符
});

HTML5事件

1.   contextmenu事件

contextmenu事件在windows操作系统下,大家是采用右键就能够自定义右键弹出菜谱,可是大家选拔右键的时候会有默认的美食做法,由此大家要求选用阻止暗许事件这一个艺术来阻拦掉;那件事件也是归属鼠标事件,因而那一件事件蕴涵与光标地点中持有的习性,譬如咱们右键如下图所示:

图片 5

HTML代码如下:
<div id="myDiv">Right click or Ctrl+click me to get a custom context menu.Click anywhere else to get the default context menu.
</div>
<ul id="myMenu" style="position:absolute;visibility:hidden;background-color:
    silver">
<li><a href="http://www.nczonline.net">Nicholas’ site</a></li>
<li><a href="http://www.wrox.com">Wrox site</a></li>
<li><a href="http://www.yahoo.com">Yahoo!</a></li>
</ul>

JS代码如下:
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "contextmenu", function(event){
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
    var menu = document.getElementById("myMenu");
    menu.style.left = event.clientX + "px";
    menu.style.top = event.clientY + "px";
    menu.style.visibility = "visible";
});
EventUtil.addHandler(document, "click", function(event){
    document.getElementById("myMenu").style.visibility = "hidden";
});

如上,大家是透过右键的clientX和clientY来鲜明菜单的任务;当自身点击文书档案document的时候
就暗藏该菜单;

浏览器帮忙有:IE,Firefox,Safari,chrome和Opera11+

beforeunload事件

那一件事件是给页面在卸载以前,给客户七个升迁,是或不是须要卸载页面提醒给顾客,为了显得那么些对话框,对IE和firefox来讲,必需将event.returnValue的值设置为要出示给客户的字符串;可是对于safari和chrome来讲,能够重返此字符串就能够;

通常来讲代码:

EventUtil.addHandler(window, "beforeunload",function(event){
    event = EventUtil.getEvent(event);
    var message = "I'm really going to miss you if you go.";
    event.returnValue = message;
    return message;
});

当客商关闭参观器的时候,会弹出如下窗口给客户提示,如下:

图片 6

点击离开此页按键 即关闭窗口,点击留在此页开关即留在当前页面,可是当本身按F5刷新页面包车型地铁时候,相像会弹出窗口提醒,如下:

图片 7

浏览器接济:IE,firefox,chrome和safari都扶持,不过Opera11及前边的本子不帮衬;

理解hashchange事件

HTML第55中学新净增了hashchange事件,以便在U宝马7系L的参数列表(url中的#号后边的全部参数发生变动时通报开拓人士卡塔尔国,在Ajax应用中,开荒职员日常使用url参数列表保存景况或导航消息;

我们必须把hashchange事件增加到window对象中,然后当url参数列表只要产生变化就能够调用这事件,那一件事件目的event包含2个性格,oldUTucsonL和newUTiguanL,那七个属性分别保存着U逍客L变化前后的全部U翼虎L;

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

在这里些浏览器中,唯有firefox3.6+,chrome和opera协理oldU奇骏L和newUTucsonL属性;

如下代码:

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

当小编首先次#号参数后边是aa,今后改成aaaa,就能触发这事件,如下所示:

图片 8

有个别浏览器并不帮忙oldUEvoqueL和newU奥迪Q5L,由此大家得以选取location.hash来保存当前的参数列表,如下代码:

EventUtil.addHandler(window, "hashchange", function(event){

      alert(location.hash);

});

当#号前面笔者改成bbb参数时候,会弹出如下所示:

图片 9

能够利用如下代码来检验浏览器是不是扶助hashchange事件;

var isSupported = ("onhashchange" in window);
alert(isSupported);

倘使IE8 是在IE7
文书档案方式下运维,尽管功效失效它也会回到true。为减轻那个主题材料,可以运用

以下那些更稳妥的检查评定方法:

var isSupported = ("onhashchange" in window) && (document.documentMode === undefined || document.documentMode > 7);

设备事件中的—orientationchange事件

苹果公司为运动safari增加的orientationchange事件是能让客户显著什么日期将设备由横向查看方式切换成纵向格局触发的平地风波;此属性中带有多个值,0意味着肖像情势;90意味向左旋转的横向方式(主荧屏开关在左侧),-90象征向右旋转的横向形式(主荧屏按键在左边卡塔尔国,如下图所示:

图片 10

万大器晚成顾客改动了配备的查阅情势,就能够触发orientationchange事件,

利用IOS设备就能够演示效果:代码如下:

EventUtil.addHandler(window, "load", function(event){
    var div = document.getElementById("myDiv");
    div.innerHTML = "Current orientation is " + window.orientation;
    EventUtil.addHandler(window, "orientationchange", function(event){
        div.innerHTML = "Current orientation is " + window.orientation;
    });
});

知情移动端的事件—触摸与手势事件

有以下多少个触摸事件:

  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对象数组;

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website