ホームページ > 記事 > ウェブフロントエンド > JSネイティブイベント記述の詳細な分析（コードが添付されており、シンプルかつ明確）

JSネイティブイベント記述の詳細な分析（コードが添付されており、シンプルかつ明確）

亚连オリジナル: 2018-05-18 14:29:011995ブラウズ

以下は私がまとめた JS ネイティブイベントです。興味のある学生はご覧ください。

1. イベントフロー
イベントフローは主にイベントバブリングとイベントキャプチャの2種類に分かれます。イベントがバブルアップし、ターゲット要素が最初にイベントを受信し、次に徐々に上方に向かって、あまり具体的でないノードに伝播します。イベントキャプチャはまったく逆で、主な考え方は、特定性の低いノードが最初にイベントを受信し、その後徐々にターゲットノードに伝播するというものです。

<html>
    <head>
        <title>事件流</title>
    </head>
    <body>
        <div id ="testDiv"></div>
    </body>
 </html>

div がクリックされると、バブリングイベントはノードの順序 div->body->html->document を受け取ります
キャプチャイベントはノードの順序 document->html->body->div を受け取ります

2. イベントハンドラー
a) HTML イベントハンドラー
要素によってサポートされる各イベントは、対応するイベントハンドラーと同じ名前の HTML 属性を使用して指定できます。
短所: 1. 時差の問題。ブラウザがクリックイベント関数を解析する前にユーザーがページ要素をクリックした可能性があります。try-catch を通じてエラーをラップします。
2. イベントハンドラーのスコープチェーンはブラウザによって異なります。異なる結果につながります。
3. HTML コードと Javascript コードは密接に結合されているため、拡張やメンテナンスには役立ちません。
b) DOM0 レベルのイベントハンドラー
要素のイベントハンドラー属性に関数を割り当てます
var btn = document.getElementById(“#dv”);
btn.onclick = function(){};要素 Handler –btn.onclicn = null;

この方法で追加されたイベントハンドラーは、イベントバブリングフェーズ中に処理されます。

c) DOM2 レベルのイベントハンドラー

イベントハンドラーを指定します addEventListener
イベントハンドラーを削除します RemoveEventListener
3 つのパラメーター、つまり、処理されるイベント名、イベントハンドラーの関数、およびブール値を受け取ります (true はハンドラーが呼び出されることを示します)キャプチャフェーズ中、false はバブリングフェーズ中にイベントハンドラーが呼び出されることを意味します)

注: addEventListener は、removeEventListener を通じて削除する必要があり、パラメータは一貫している必要があるため、addEventListener を通じて追加された匿名関数は削除できません。

d)IE事件处理程序

attachEvent
detachEvent
两个方法接收相同的两个参数（”onclick”,”function(){}”）;
由于IE8级更早版本只支持事件冒泡,所以通过attachEvent添加的事件处理程序只能被添加到冒泡阶段。
注意：attach中第一个参数是onclick而不是addEventListener中的click
IE事件处理程序attachEvent添加的在全局作用域中运行

var btn = document.getElementById(“#tes”); 
btn.attachEvent(“onclick”,function(){ 
alert(this == window); //true 
})

3、跨浏览器的事件处理程序。
由于不同浏览器之间事件处理程序不同，所以有必要编写可以跨浏览器使用的事件处理程序。

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.deatchEvent){
            element.deatch("on" + type,handler);
        }else{
            element["on" + type] = null;
        }
    }
}

上面是我整理给大家的，希望今后会对大家有帮助。

JS弹出窗口代码大全

几个前端常见的JS排序代码

JS去掉字符串前后空格或去掉所有空格的用法

以上がJSネイティブイベント記述の詳細な分析（コードが添付されており、シンプルかつ明確）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：ネイティブ js を使用してフォームのシリアル化を実装する (グラフィックチュートリアル)次の記事：ネイティブ js を使用してフォームのシリアル化を実装する (グラフィックチュートリアル)

続きを見る