JavaScript事件使用指南,JavaScript实现按Ctrl键打开

时间:2019-07-25 17:45来源:2020欧洲杯冠军竞猜官方网站
(译者注: 本文消除的是按 Ctrl键时采纳JS展开新页面的标题) 事件流事件流描述的是从页面中接收事件的顺序,IE和Netscape提出来差不多完全相反的事件流的概念,IE事件流是事件冒泡流,

(译者注: 本文消除的是按 Ctrl键时采纳JS展开新页面的标题)

事件流
事件流描述的是从页面中接收事件的顺序,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个方法,用于处理指定和删除事件处理程序的操作;
addEventListener()和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级是不可以的;它永远是执行最后一次的。

addEventListener添加的事件只能使用removeEventListener来删除相对应的事件,那么如上的JS不能按照上面的方式来编写哦!需要给定义一个函数;如下:

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

可以使用如下方式对click事件删除;如下代码:

btn.removeEventListener(‘click’,handler);

上面的是在标准浏览器下处理的事件,下面我们来看看在IE下处理的事件;
IE事件处理的程序
IE实现了与DOM类似的2个方法,分别是attachEvent()和detachEvent(),这两个方法只接受2个参数,第一个参数是事件名称,
第二个参数是要处理的函数;由于IE8及更早版本只支持事件冒泡,所以通过attachEvent()添加的事件处理程序会被添加到冒泡阶段;
下面是IE事件处理程序的代码如下:

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

注意:attachEvent的事件名称是onclick,而addEventListener的事件名称是click,且IE中使用的attachEvent()与使用DOM0级方法的的主要区别在于事件处理程序的作用域,
在使用dom0级情况下,事件处理程序在其所属元素的作用域内运行,在使用attachEvent()方法的情况下,事件处理程序在全局作用域下运行,其中的this等于window。

与addEventListener一样,attachEvent也可以注册多个点击click事件,如下代码:

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

但是与Dom方法不同的是,这些事件处理程序不是以添加他们的顺序执行,而是以相反的顺序触发,比如如上代码,会先弹出2,然后弹出1对话框;
使用attachEvent注册的事件只能使用detachEvent()方法来移除;

下面我们可以来编写跨浏览器的事件处理程序;代码如下:

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);
}

下面我们来看看最基本的成员的含义吧;如下:

属性/方法    类型    含义
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()方法的话,
只会在页面上弹出1,就不会冒泡到body上面去;

IE下停止冒泡的话,我们可以使用cancelBubble属性,我们只要将此属性设置为true,即可阻止事件通过冒泡触发document.body中的注册事件。
但是IE是不支持捕获事件的,但是stopPropagation()即支持捕获事件又支持冒泡事件的。如下代码:

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文件等外部资源),就会触发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:在元素获得焦点时触发,这个事件不会冒泡,所有浏览器都支持。
鼠标事件:当用户通过鼠标在页面操作时触发;

click事件:在用户单击鼠标按钮或者按下回车键触发;
dblclick事件:在用户双击鼠标按钮时被触发;
mousedown事件:在用户按下了任意鼠标按钮时被触发,不能通过键盘触发这个事件。
mouseenter事件:在鼠标光标从元素外部移动到元素范围之内被触发;这个事件不冒泡;
mousemove事件:当鼠标指针在元素内部移动时重复地触发。
mouseout事件:用户将其移入另一个元素内被触发。
mouseover事件:鼠标指针在元素外部,用户将移入另一个元素的边界时触发,感觉和mouseenter事件类似;
mouseup事件:用户释放鼠标按钮时触发;
页面上所有的元素都支持鼠标事件,除了mouseenter和mouseleave,所有鼠标事件都会冒泡,也可以被取消,而取消鼠标事件将会影响浏览器的默认行为。

理解客户区坐标位置
含义是:鼠标指针在可视区中的水平clientX和垂直clientY坐标;
代码如下:

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

注意:客户区坐标位置不包含滚动条滚动的位置,因此这个位置不代表鼠标在页面上的位置;

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

代码如下:

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,clientY)和滚动坐标计算出来;
因此我们需要用到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属性是相对于整个屏幕的

如下代码测试:

EventUtil.addHandler(btn,'click',function(e){
    e = EventUtil.getEvent(e);
    console.log("屏幕X轴的坐标为:" e.screenX   " " "屏幕Y轴的坐标为:" e.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,可以判断是向下滚动还是向上滚动;

理解字符编码charCode

IE9 ,firefox,chrome和safari的event对象都支持一个charCode属性,这个属性只有在发生keypress事件时才包含值,
而且这个值是按下的那个键所代表字符的ASCLL编码,但是IE8及之前或者opera不支持这个属性,
但是我们可以使用keyCode这个属性代替.在取得了字符编码之后,就可以使用String.fromCharCode()将其转换成实际的字符。

如下代码:

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

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

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;
});

当用户关闭游览器的时候,会弹出如下窗口给用户提示
点击离开此页按钮 即关闭窗口,点击留在此页按钮 即留在当前页面,但是当我按F5刷新页面的时候,同样会弹出窗口提示

浏览器支持:IE,firefox,chrome和safari都支持,但是Opera11及之前的版本不支持;

理解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);
});

当我第一次#号参数后面是aa,现在改成aaaa,就会触发此事件
有些浏览器并不支持oldURL和newURL,因此我们可以使用location.hash来保存当前的参数列表,如下代码:

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

      alert(location.hash);

});

当#号后面我改成bbb参数时候
可以使用如下代码来检测浏览器是否支持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表示向右旋转的横向模式(主屏幕按钮在左侧)

只要用户改变了设备的查看模式,就会触发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;
    });
});

理解移动端的事件—触摸与手势事件
有以下几个触摸事件:

touchstart: 当手指触摸屏幕时触发,即使是一个手指放在屏幕上也会触发。
touchmove:当手指在屏幕上滑动时连续地触发,这个事件发生期间,我们可以使用preventDefault()事件可以阻止滚动。
touchend: 当手指从屏幕上移开时触发。
touchcancel: 当系统停止跟踪触摸时触发。
上面几个事件都属于冒泡事件,我们可以对此进行取消事件,每个触摸的event对象都提供了在鼠标中常见的属性;

bubbles, cancelable,view,clientX, clientY ,screenX, screenY,detail, altKey, shiftKey, ctrlKey, metaKey,
除了常见的DoM属性外,触摸事件还包含下列三个用于跟踪触摸的属性;
touches: 表示当前跟踪的触摸操作的Touch对象数组;
targetTouches: 特定与事件目标的Touch对象数组;
changeTouches: 表示自上次触摸以来发生了什么改变的Touch对象数组;

js完毕window.open不被拦住的减轻方法汇总,jswindow.open

本文实例叙述了js完毕window.open不被阻止的消除办法。分享给大家供我们参照他事他说加以考察。具体剖判如下:

一、问题:

今天在拍卖页面ajax须要进程中,想完毕央浼后展开新页面,就想开通过 js window.open 来达成,可是最后都被浏览器拦截了。

二、分析:

在谷歌(Google)寻找有未有消除办法,有个别说能够经过新建a标签,模拟点击来兑现,可是测量检验开掘都落成持续,照样被浏览器拦截。
最终找到了二个折中的办法,能够兑现新页面展开,不过并未有a标签的这种直接流量新页面包车型大巴效益。

三、完结代码:

复制代码 代码如下:

$obj.click(function(){
 var newTab=window.open('about:blank');
 $.ajax({
  success:function(data){
   if(data){
    //window.open('');
    newTab.location.href="";
   }
  }
 })
})

别的形式:

复制代码 代码如下:

<script type="text/javascript">
<!--
$(
function()
{
//方法一
window.showModalDialog("");
window.showModalDialog("");  

//方法二
var aa=window.open();
setTimeout(function(){
aa.location="";
}, 100);  

var b=window.open();
setTimeout(function(){
b.location="";
}, 200);  

var c=window.open();
setTimeout(function(){
c.location="";
}, 300);  

var d=window.open();
setTimeout(function(){
d.location="";
}, 400);  

var ee=window.open();
setTimeout(function(){
ee.location="";
}, 500);  

var f=window.open();
setTimeout(function(){
f.location="";
}, 600);  

var g=window.open();
setTimeout(function(){
g.location="";
}, 700);  

var h=window.open();
setTimeout(function(){
h.location="";
}, 800);  

var i=window.open();
setTimeout(function(){
i.location="";
}, 900);  

var j=window.open();
setTimeout(function(){
j.location="";
}, 1000);  

//方法三
var a = $("<a href='' target='_blank'>Apple</a>").get(0);
var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
a.dispatchEvent(e);  

var a = $("<a href='' target='_blank'>Apple</a>").get(0);
var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
a.dispatchEvent(e);
}
 
);
//-->
</script>

可望本文所述对我们基于javascript的web程序设计有所扶助。

在简化的HTML5行业内部中,允许在 A 标签内富含八个 DIV 和/或另外块级成分. 以后若是用 <a> 标签包住块成分,就会化解原本供给用JavaScript来监听并调用 window.location 完结页面跳转(redirect)功能.

 

有未有能够替代windowopen的js函数?只怕不被阻碍弹出

有一个绝对漂亮貌的jquery插件叫做boxy.js

能够驾驭下,原理是在div层里面动态加载叁个iframe然后加载你的页面。  

但选取<a>标签的这种包装格局也会有糟糕使的气象 —— 譬如,有个别块成分(block)内还应该有一对 <a> 标签, 这种情况下大家只想在点击parent中<a>以外的任何一些时才跳转到三个加以的地点。

事件流事件流描述的是从页面中接收事件的次第,IE和Netscape建议来大概完全相反的事件流的定义,IE事件流是事件冒泡流,Netscape事件流是事件捕获流。
事件冒泡IE的平地风波流叫做事件冒泡,即事件始于时由最实际的因素(文书档案中嵌套最深的极度节点)接收,然后逐级进步(一向到文书档案);如下代码:
<div id = "div">    <span id="span">        <a id="aTag">事件测量试验</a>    </span></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个措施,用于拍卖钦命和删除事件管理程序的操作;addEventListener()和remove伊芙ntListener()。全部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.add伊夫ntListener('click',function(e){    alert("作者是来测验的");},false);
地点的代码被弹出2次会话框,而在DOM0级是不能的;它世代是实行最终一回的。
addEventListener增多的平地风波只可以动用removeEventListener来删除相对应的事件,那么如上的JS不可能依照地点的措施来编排哦!要求给定义二个函数;如下:
btn.addEventListener('click',handler,false);function handler(e){   alert(this.id);}
能够行使如下格局对click事件删除;如下代码:
btn.removeEventListener(‘click’,handler);
上面的是在行业内部浏览器下管理的风云,上面大家来拜访在IE下拍卖的平地风波;IE事件管理的程序IE落成了与DOM类似的2个点子,分别是attachEvent()和detachEvent(),那四个主意只接受2个参数,第二个参数是事件名称,第1个参数是要拍卖的函数;由于IE8及更早版本只帮忙事件冒泡,所以经过attach伊芙nt()增多的事件管理程序会被增多到冒泡阶段;下边是IE事件管理程序的代码如下:
btn.attachEvent('onclick',handler);function handler(e){    alert(this); // window}
细心:attachEvent的风浪名称是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对话框;使用attachEvent注册的轩然大波只可以利用detachEvent()方法来移除;
上边我们得以来编排跨浏览器的事件管理程序;代码如下:
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级的风波目的伊夫nt;
例如如下代码:
var btn = document.getElementById("btn");btn.onclick = function(e){    console.log(e);}
上面我们来探问最宗旨的分子的意思吧;如下:
性情/方法类型含义bubblesBoolean事件是不是冒泡cancelableBoolean是不是足以收回事件的默许行为currentTargetBoolean事件管理程序当前正在处理事件的十三分成分defaultPreventedBoolean为true 表示已经调用了preventDefault()detailInteger与事件相关的细节音讯eventPhaseInteger调用事件管理程序的阶段:1意味着捕获阶段,2意味“处于目的”,3意味冒泡阶段preventDefault()Function打消事件的暗许行为。即便cancelable是true,则可以利用这些办法stopImmediatePropagation()Function裁撤事件的愈加捕获或冒泡,同一时间阻止任何事件处理程序被调用stopPropagation()Function撤消事件的越来越捕获或冒泡。假使bubbles为true,则足以动用那一个艺术targetElement事件的对象typeString被触发的风云的体系viewAbstractView与事件波及的空洞视图。等同于发惹事件的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="" 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()方法的话,只会在页面上弹出1,就不会冒泡到body下边去;
IE下终止冒泡的话,大家能够动用cancelBubble属性,大家假诺将此属性设置为true,就能够阻止事件经过冒泡触发document.body中的注册事件。但是IE是不扶助捕获事件的,但是stopPropagation()即协助捕获事件又帮衬冒泡事件的。如下代码:
btn.onclick = function(e){    alert(1);    window.event.cancelBubble = true;}document.body.onclick = function(){    alert(2);}
倘若不设置window.event.cancelBubble 为true的话,就能够先弹出1,然后弹出2,借使加上的话,就只会弹出1对话框。驾驭了地点的分化后,大家明日可以往伊芙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;        }    }};
事件类型: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:在要素得到主旨时接触,那几个事件不会冒泡,全体浏览器都支持。鼠标事件:当用户通过鼠标在页面操作时接触;
click事件:在用户单击鼠标开关大概按下回车键触发;dblclick事件:在用户双击鼠标按键时被触发;mousedown事件:在用户按下了自由鼠标按键时被触发,不能够透过键盘触发那几个事件。mouseenter事件:在鼠标光标从要素外界移动到成分范围之内被触发;这些事件不冒泡;mousemove事件:当鼠标指针在要素内部移动时再一次地接触。mouseout事件:用户将其移入另二个成分内被触发。mouseover事件:鼠标指针在要素外界,用户将移入另三个要素的界限制期限接触,以为和mouseenter事件类似;mouseup事件:用户自由鼠标按键时接触;页面上具有的因素都帮忙鼠标事件,除了mouseenter和mouseleave,全数鼠标事件都会冒泡,也足以被撤除,而打消鼠标事件将会潜移暗化浏览器的私下认可行为。
明白客户区坐标地点含义是:鼠标指针在可视区中的水平clientX和垂直clientY坐标;代码如下:
伊夫ntUtil.addHandler(btn,'click',function(e){    e = EventUtil.get伊夫nt(e);    console.log("可视区X轴坐标为:" e.clientX " " "可视区Y轴坐标为:" e.clientY);});
注意:客户区坐标地点不带有滚动条滚动的地方,由此那么些岗位不代表鼠标在页面上的岗位;
清楚页面坐标地点pageX和pageY:pageX与pageY是指页面坐标的职分,与clientX和clientY的界别是:它包涵页面滚动条的职位
代码如下:
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,clientY)和滚动坐标总计出来;由此我们需求用到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属性是相对于漫天显示器的
如下代码测验:
伊夫ntUtil.addHandler(btn,'click',function(e){    e = 伊夫ntUtil.get伊夫nt(e);    console.log("荧屏X轴的坐标为:" e.screenX " " "显示器Y轴的坐标为:" e.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,能够看清是向下滚动仍然升高滚动;
领悟字符编码charCode
IE9 ,firefox,chrome和safari的event对象都协助多个charCode属性,这些个性独有在暴发keypress事件时才含有值,何况那一个值是按下的老大键所代表字符的ASCLL编码,不过IE8及前边依旧opera不援救那特性情,可是我们能够动用keyCode这么些属性代替.在收获了字符编码之后,就足以接纳String.fromCharCode()将其转变来实际的字符。
如下代码:
getCharCode: function(event) {    if(typeof event.charCode == 'number') {        return event.charCode;    }else {        return event.keyCode;    }}
咱们明天能够给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;        }    },    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");伊芙ntUtil.addHandler(inputDiv,'keypress',function(event){    event = 伊芙ntUtil.get伊夫nt(event);    var code = 伊芙ntUtil.getCharCode(event);    alert(EventUtil.getCharCode(event)); // 弹出字符编码    alert(String.fromCharCode(code));  // 弹出字符});HTML5事变
1.contextmenu风浪contextmenu事件在windows操作系统下,大家是使用右键就足以自定义右键弹出美食指南,不过大家使用右键的时候会有暗中同意的美食指南,因而大家要求利用阻止暗许事件这几个办法来堵住掉;此事件也是属于鼠标事件,由此此事件涵盖与光标地方中存有的天性
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=" site</a></li><li><a href=" site</a></li><li><a href=";
JS代码如下:var div = document.getElementById("myDiv");EventUtil.addHandler(div, "contextmenu", function(event){    event = EventUtil.get伊夫nt(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;});
当用户关闭游览器的时候,会弹出如下窗口给用户提醒点击离开此页开关即关闭窗口,点击留在此页按钮即留在当前页面,可是当本身按F5刷新页面包车型客车时候,一样会弹出窗口提醒
浏览器帮衬:IE,firefox,chrome和safari都帮助,不过Opera11及前边的版本不帮忙;
理解hashchange事件
HTML5中新添了hashchange事件,以便在U途观L的参数列表(url中的#号前边的持有参数爆发转移时通报开拓人士),在Ajax应用中,开拓人士日常使用url参数列表保存情形或导航新闻;大家务必把hashchange事件增添到window对象中,然后当url参数列表只要产生变化就能调用那一件事件,这件事件指标event包括2天性子,oldU翼虎L和newU牧马人L,那多少个性格分别保存着UPRADOL变化前后的总体U路虎极光L;
帮忙的浏览器有:IE8 ,firefox3.6 ,safari5 ,chrome和opera10.6 在这一个浏览器中,独有firefox3.6 ,chrome和opera辅助oldU福特ExplorerL和newU大切诺基L属性;
一般来说代码:
EventUtil.addHandler(window, "hashchange", function(event){     alert("Old URL: " event.oldURL "nNew URL: " event.newURL);});
当自身第一次#号参数后边是aa,未来改成aaaa,就可以触发那一件事件有些浏览器并不支持oldU中华VL和newUTiggoL,由此我们能够利用location.hash来保存当前的参数列表,如下代码:
EventUtil.addHandler(window, "hashchange", function(event){
      alert(location.hash);
});
当#号前边笔者改成bbb参数时候能够接纳如下代码来检验浏览器是还是不是帮助hashchange事件;
var isSupported = ("onhashchange" in window);alert(isSupported);
只要IE8 是在IE7 文书档案形式下运营,尽管作用失效它也会回来true。为斩草除根这么些难点,能够动用以下这些更稳妥的检查评定方法:
2020欧洲杯冠军竞猜官方网站,var isSupported = ("onhashchange" in window) && (document.documentMode === undefined || document.documentMode > 7);设备事件中的—orientationchange事件
苹果集团为运动safari增多的orientationchange事件是能让用户鲜明何时将道具由横向查看格局切换到纵向形式触发的事件;此属性中含有多少个值,0代表肖像情势;90代表向左旋转的横向格局(主荧屏开关在侧面),-90意味向右旋转的横向形式(主荧屏开关在左臂)
若是用户改换了器具的查阅情势,就能够触发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;    });});
清楚移动端的事件—触摸与手势事件有以下多少个触摸事件:
touchstart: 当手指触摸荧屏时接触,就算是三个指头放在荧屏上也会接触。touchmove:当手指在显示屏上海滑稽剧团动时连连地接触,那几个事件产生时期,我们能够使用preventDefault()事件可以阻碍滚动。touchend: 当手指从荧屏上移开时接触。touchcancel: 当系统结束跟踪触摸时触发。下面多少个事件都属于冒泡事件,我们能够对此打开打消事件,种种触摸的event对象都提供了在鼠标吉林中国广播公司大的性质;
bubbles, cancelable,view,clientX, clientY ,screenX, screenY,detail, altKey, shiftKey, ctrlKey, metaKey,除了分布的DoM属性外,触摸事件还隐含下列八个用于追踪触摸的性质;touches: 表示近期跟踪的触动操作的Touch对象数组;targetTouches: 特定与事件目的的Touch对象数组;changeTouches: 表示自上次触摸以来爆发了何等改观的Touch对象数组;

对此button按键,js怎完结新页面跳转,除了不要windowopen()方式(包涵此类衍生情势,会被浏览器拦截)

你想怎么落到实处吗?为何非要用Button?你那么些主张不及用三个超链接咯?  

本文实例陈诉了js完成window.open不被阻止的解决措施。共享给我们供我们参谋。具体分析...

自然,像上面那样用二个简短的listener 也能落到实处大家的急需:

复制代码 代码如下:

someElement.addEventListener('click', function(e) {
    // UMuranoL地址是什么都行,可能你也能够运用其余的代码来钦命.
    // 此处用的是该因素的 `data-src` DOM属性(attribute)
    window.location = someElement.get('data-url');
});

…但这一时会有很糟的用户体验, 当按住CT福特ExplorerL键(Mac是COMMAND键),再用鼠标点击时,它会在同一个(标签页)窗口内开发链接。知道有其一难点,你早晚想到了该怎么去解决.我们修改一丝丝代码就能够完结这几个指标,神速花点时间去修复你的listener吧:

复制代码 代码如下:

someElement.addEventListener('click', function(e) {
    // 获取URL
    var url = someElement.get('data-url');
    // 剖断是不是按下了CT兰德ENVISIONL键
    if(e.metaKey || e.ctrlKey || e.button === 1) {
        window.open(url);
    } else {
        window.location = url;
    }
});

初稿小编以前在 网址上贯彻了这些效用,在行使window.location实行页面重定向时你也应有记得那一点。那是叁个十分的小的代码立异,但对可用性的滋长却是极度主要的!

编辑:2020欧洲杯冠军竞猜官方网站 本文来源:JavaScript事件使用指南,JavaScript实现按Ctrl键打开

关键词: 欧洲杯竞猜