ホームページ > 記事 > ウェブフロントエンド > JavaScript イベントの使用ガイドの詳細な紹介

JavaScript イベントの使用ガイドの詳細な紹介

黄舟オリジナル: 2017-03-13 17:11:371256ブラウズ

イベントフロー

イベントフローは、ページからイベントを受信するシーケンスを記述します。IE と Netscape は、イベントフローはイベントバブリングフロー、Netscape イベントフローはイベントキャプチャフローというほぼ完全に反対の概念を提案しています。

イベントバブリング

IE のイベントフローはイベントバブリングと呼ばれます。つまり、イベントは最初に最も具体的な要素 (ドキュメント内で最も深くネストされたノード) によって受信され、その後レベルごとに (最後まで) 上位に移動します。ドキュメント); 次のコード:

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

JS は次のとおりです:

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

「イベントテスト」テキストがクリックされると、クリックイベントが次の順序で伝播されます

1) 最初の出力: クリックされた内容は a ラベルです

2) 次に印刷します: クリックは spam タグです

3) 最後に印刷します: p タグをクリックします

4) 最後のものは document ドキュメントでなければなりません。

最新のブラウザはすべてイベントバブリングをサポートしています。

イベントキャプチャ:

イベントキャプチャは、イベントバブリングイベントフローの逆の順序です。イベントキャプチャのイベントフローは、最外層が段階的に内側に伝播します。つまり、最初にドキュメント、次に段階的に p タグ、スパンとなります。タグ、タグ;

上記の JS コードは次のように変更されます:

document.getElementById("p").addEventListener(&#39;click&#39;,p,true);
document.getElementById("aTag").addEventListener(&#39;click&#39;,aTag,true);
document.getElementById("span").addEventListener(&#39;click&#39;,span,true);

3 番目のパラメーターは、イベントをキャプチャするために true に設定され、それ以外の場合、イベントフローは同じです。 IE であろうと標準ブラウザであろうと、イベントバブリングはすべてのブラウザでサポートされているためです。

DOM イベントフロー

DOM2レベルイベント 指定されたイベントフローには、イベントキャプチャステージ、ターゲットステージ、イベントバブリングステージの 3 つのステージが含まれます。概略図は描きませんが、詳しくは本を読んでください。

DOM0 レベルイベント処理プログラム

次のコードは DOM0 レベルのイベントハンドラーです:

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

DOM0 レベルのメソッドを使用して指定されたイベントハンドラーは要素のメソッドとみなされ、ハンドラーは要素のスコープ。プログラムでは、これは現在の要素を指します。

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

要素ボタンをクリックすると、this.id を通じて要素の属性 id を取得できます。また、この方法で追加されたハンドラーがバブルアップされます。イベントステージの処理内。 DOM0 レベルのメソッドで指定されたイベントハンドラーを削除することもできます。イベントハンドラーの属性値を

null

に設定するだけです。 btn.onclick = null; // イベントハンドラーを削除します。

次の JS コードを次のように変更します。

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

btn をもう一度クリックしても、何も起こりません

DOM2 レベルイベントは、イベントハンドラーの指定と削除の操作を処理するための 2 つのメソッド

addEventListener() とremoveEventListener() を定義します。すべての DOM ノードには 3 つのパラメーターが含まれており、最初のパラメーターはイベント関数

です。ストリームはキャプチャイベントです。 false の場合、イベントストリームはバブリングイベントです。たとえば、上記の btn コードを次のように変更します。

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

上記のクリックイベントは、バブリングステージであり、DOM0 レベルのメソッドと同じです。同様に、ここで追加されたイベントハンドラーも、その依存要素のスコープ内で実行されます。DOM2 レベルを使用してイベントハンドラーを追加する利点は、図に示すように、複数のイベントハンドラーを追加できることです。次のコード:

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

上記のコードは 2 ダイアログボックスを表示しますが、これは DOM レベル 0 では不可能であり、常に最後に実行されます。

addEventListenerで追加されたイベントは、removeEventListenerを使用して対応するイベントを削除することしかできないため、上記のJSを上記の方法で記述することはできません。次のように関数を定義する必要があります:

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

次のコードを使用してクリックイベントを削除できます:

btn.removeEventListener('click',handler);

上記は処理されるイベントです。標準ブラウザで、IE で処理されるイベントを見てみましょう。IE では、DOM に似た 2 つのメソッド、つまりattachEvent() と detachEvent() が実装されています。これらの 2 つのメソッドは 2 つのパラメータのみを受け入れます。最初のパラメータはイベント名で、2 番目のパラメータは処理される関数です。IE8 以前のバージョンではイベントバブリングのみがサポートされているため、attachEvent() によって追加されたイベントハンドラーがバブリングステージに追加されます。 IE イベントハンドラーのコードは次のようになります。

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

注:attachEvent のイベント名は onclick ですが、addEventListener のイベント名は click です。IE で使用されるattachEvent() と DOM0 レベルのメソッドの主な違いは次のとおりです。イベントハンドラーのスコープ。dom0 レベルを使用する場合、イベントハンドラーは、それが属する要素のスコープ内で実行されます。attachEvent() メソッドを使用する場合、イベントハンドラーはグローバルスコープで実行されます。これは window に相当します。。

次のコードに示すように、addEventListener と同様に、attachEvent も複数のクリックイベントを登録できます。

btn.attachEvent(&#39;onclick&#39;,function(e){
    alert("1");
});
btn.attachEvent(&#39;onclick&#39;,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,&#39;click&#39;,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);//&#39;click&#39;
}
btn.onclick = function(){
    // IE下打印的事件对象window.event
    console.log(window.event);
    console.log(window.event.type); // &#39;click&#39;
 }

上面的写法是在DOM0级上注册事件，如果我们在Dom2级上注册事件的话，那么就会有一个事件对象event作为参数传入事件到函数中，如下：

var btn = document.getElementById("btn");
EventUtil.addHandler(btn,&#39;click&#39;,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代码：85fd25df2138ffbddf51e04e37979380

JS代码如下：

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

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

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

 EventUtil.addHandler(window,&#39;load&#39;,function(){
    var img = document.createElement("img");
    EventUtil.addHandler(img,&#39;load&#39;,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,&#39;load&#39;,function(){
    var img = new Image();
    EventUtil.addHandler(img,&#39;load&#39;,function(e){
        alert(1);
    });
    img.src ="event.png";
});

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

EventUtil.addHandler(window,&#39;load&#39;,function(){
    var script = document.createElement("script");
    EventUtil.addHandler(script,&#39;load&#39;,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,&#39;click&#39;,function(e){
    e = EventUtil.getEvent(e);
    console.log("可视区X轴坐标为:"+e.clientX + " "+ "可视区Y轴坐标为:"+e.clientY);
});

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

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

pageX与pageY是指页面坐标的位置，与clientX和clientY的区别是：它包含页面滚动条的位置，如下图所示：

代码如下：

EventUtil.addHandler(btn,&#39;click&#39;,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,&#39;click&#39;,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,&#39;click&#39;,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,&#39;mousewheel&#39;,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 == &#39;number&#39;) {
        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 == &#39;number&#39;) {
            return event.charCode;
        }else {
            return event.keyCode;
        }
    }
};

我们现在可以做一个demo如下：

如下代码：
var inputp = document.getElementById("inputp");
EventUtil.addHandler(inputp,&#39;keypress&#39;,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代码如下：
<p id="myp">Right click or Ctrl+click me to get a custom context menu.Click anywhere else to get the default context menu.
</p>
<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 p = document.getElementById("myp");
EventUtil.addHandler(p, "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&#39;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 p = document.getElementById("myp");
    p.innerHTML = "Current orientation is " + window.orientation;
    EventUtil.addHandler(window, "orientationchange", function(event){
        p.innerHTML = "Current orientation is " + window.orientation;
    });
});

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

有以下几个触摸事件：

タッチスタート: 1 本の指が画面上に置かれている場合でも、指が画面に触れるとトリガーされます。
touchmove: このイベント中、preventDefault() イベントを使用してスクロールを防止できます。
touchend: 指が画面から離れるとトリガーされます。
touchcancel: システムがタッチの追跡を停止すると発生します。

上記のイベントはすべてバブリングイベントであり、タッチされた各イベントオブジェクトは、マウスに共通の属性を提供します。、ctrlKey、metaKey、

一般的な DoM プロパティに加えて、タッチイベントには、タッチを追跡するための次の 3 つのプロパティも含まれています。

touches: 現在追跡されているタッチ操作を表すタッチオブジェクト

Array

;イベントターゲットに固有; changeTouches: 最後のタッチ以降に何が変更されたかを示す Touch オブジェクトの配列。

以上がJavaScript イベントの使用ガイドの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript 関数プログラミングチュートリアルに関する簡単な説明 (写真)次の記事：JavaScript 関数プログラミングチュートリアルに関する簡単な説明 (写真)

続きを見る

JavaScript イベントの使用ガイドの詳細な紹介

イベント フロー

イベント バブリング

イベント キャプチャ:

DOM イベント フロー

DOM0 レベルイベント処理プログラム

addEventListener() とremoveEventListener() を定義します。すべての DOM ノードには 3 つのパラメーターが含まれており、最初のパラメーターはイベント 関数

事件对象：

理解currentTarget与target

理解标准浏览器下的事件对象与IE下的事件对象

理解特定事件的默认行为事件

标准浏览器下与IE下的事件目标的区别

理解标准浏览器与IE下阻止事件传播的区别

跨浏览器的事件对象

事件类型：

理解客户区坐标位置

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

理解屏幕坐标的位置

理解鼠标滚轮事件：

理解字符编码charCode

HTML5事件

理解hashchange事件

设备事件中的—orientationchange事件

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

関連記事

イベントフロー

イベントバブリング

イベントキャプチャ:

DOM イベントフロー

addEventListener() とremoveEventListener() を定義します。すべての DOM ノードには 3 つのパラメーターが含まれており、最初のパラメーターはイベント関数