JavaScriptによるDOMのイベント解析（コード付き）-jsチュートリアル-php.cn

JavaScriptによるDOMのイベント解析（コード付き）

不言

リリース： 2018-09-04 10:20:03

オリジナル

1188 人が閲覧しました

イベントとは何ですか？イベントって何の役に立つの？この記事では、JavaScript での DOM のイベント分析について説明し、イベントの概念とイベントの使用法を紹介します。

イベント

1. イベントとは

ユーザーがHTMLページのボタンをクリックしたり、ユーザーがユーザー名とパスワードを入力したりするなど、プログラムのユーザー動作をJSに知らせます

 <script>
        var button = document.getElementById('btn');
//        获取按钮元素
        button.onclick = function () {
//        事件绑定
            console.log('你已点了我');
        }
    </script>

ログイン後にコピー

2. イベントの登録
JS関数が指定されたイベントに関連付けられ、バインドされた関数がイベントのハンドルになります
イベントが発生するとバインドされた関数が呼び出されます

HTMLのevent属性要素

は、実際の登録イベント関数を表します
このメソッドは、HTMLの構造および動作から効果的に分離されていません

<body>
<button onclick="mylove()" id="btn">按钮</button>
<script>
    function mylove() {
        console.log('你已点了我');
    }
</script>
</body>

ログイン後にコピー

DOMオブジェクトのevent属性

THMLページ要素にDocumentオブジェクトを配置します
関数

<body>
<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = mylove;
    function mylove() {
        console.log('你已点了我');
    }
</script>
</body>

ログイン後にコピー

イベントリスナー

addEventLisener() メソッドを使用して、要素がイベントリスナーを追加することを示すためにこのメソッドを呼び出します

body>
<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    btn.attachEvent('onclick',function () {
        console.log('XXX');
    })
    function bind(element,eventName, functionName) {
        if (element.addEventListener) {
            element.addEventListener()
        }
    }
</script>

</body>

ログイン後にコピー

イベントリスナー内のこれ

ページのaddEventListener()メソッドを使用しますイベントを登録する場合、登録されたイベント要素を参照します
attachEent()メソッドを使用してページのイベントを登録する場合、これを参照します登録されたイベント

<script>
    var qyc =document.getElementById('qyc');
    /*qyc.addEventListener('click',function () {
        console.log(this);//this指当前绑定事件的元素
    });*/
    /*qyc.attachEvent('onclick',function () {
        console.log(this);//this指当前环境的全局对象（Window对象）
    });*/
    bind(qyc,'click',function () {
        console.log(this);//在不同的浏览器中，this会有不同的表示
    });
    function bind(element, eventName, functionName) {
        if (element.addEventListener) {
        } else {
            element.attachEvent('on' + eventName, function () {
                functionName.call(element)

            });
        }
    }//此为IE8之前的版本兼容的解决方案
</script>
</body>

ログイン後にコピー

ではなく、Windowオブジェクトに追加します。 3. 登録されたイベント

removeEventListener()メソッドを削除します。このメソッドを呼び出すと、要素がイベントリスナー

<body>
<button id="qyc">按钮</button>
<script>
    var qyc = document.getElementById('qyc');
    function mylove() {
        console.log('XXX');
    }
    qyc.addEventListener('click',mylove);
    qyc.addEventListener('click',function () {
        console.log('YYY');
    });
    qyc.removeEventListener('click',mylove);
    function unbind(element,eventName,functionName) {
        if (element.removeEventListener) {
            element.removeEventListener(eventName, functionName);
        }else {
            element.detachEvent('on' + eventName, functionName);
        }
    }
</script>
</body>

ログイン後にコピー

を削除することが示されます。 IE8 より前のブラウザは、removeEventListener() メソッドをサポートしていません

<body>
<button id="qyc" onclick="mylove(event)">按钮</button>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function (event) {
        console.log(event);
    });
    qyc.attachEvent('onclick',function () {
        console.log(window.event);
    });

    function bind(element,eventName, functipnName) {
        if (element.addEventListener){
            element.addEventListener(eventName,functipnName)
        } else {
          element.attachEvent('on' + eventName, function(){
             functipnName.call(element);
          });
        }
    }
</script>

ログイン後にコピー

5. ターゲットを取得します

Event オブジェクトは、現在のイベントをトリガーした HTML 要素を取得するための target 属性を提供します。 object は、現在のイベントを登録した HTML 要素を取得するための currentTarget 属性を提供します。

<style>
        ul {
           background-color: red;
        }
        #wl {
           background-color: blue;
        }
        a {
           background-color: yellow;
        }
    </style>
</head>
<body>
<ul id="yx">
    <li>单机游戏</li>
    <li id="wl"><a href="#">网络游戏</a></li>
    <li>手机游戏</li>
</ul>
<script>
    var yx = document.getElementById('yx');
    yx.addEventListener('click',function (event) {
        console.log(event.target);
//        target属性-获取绑定当前事件目标元素
        console.log(event.currentTarget);
//        currentTarget属性-获取绑定当前事件目标元素
        console.log(this);
    });
    yx.attachEvent('onclick',function (event) {
//    IE8以下浏览器提供srcElement属性为target目标元素
        var e = event || window.event;
        console.log(e.srcElement);
    });
</script>
</body>

ログイン後にコピー

7. マウスを取得します

pageX と pageY は、ページに対する相対値を表します

clientX と clientY は、表示されている領域を表します
screenX と screenY は、現在のイベントを表します画面

<body>
<a href="#">链接</a>
<script>
    var aElement = document.getElementsByName('a');
    /*aElement.addEventListener('click',function(event){
        event.preventDefault();// 阻止默认行为
    });*/
    
    aElement.onclick = function (event) {
        event.preventDefault();
        return false;

    }
    aElement.attachEvent('onclick',function (event) {
        var e = event || window.event;
        e.returnValue = false;
    })
</script>
</body>

ログイン後にコピー

8. イベントフロー

<body>
<script>
    var html = document.documentElement;
    html.addEventListener('click',function(event){
        console.log(event.pageX, event.pageY);
        // 鼠标坐标值相对于当前HTML页面
        console.log(event.clientX, event.clientY);
        // 鼠标坐标值相对于当前可视区域
        console.log(event.screenX, event.screenY);
        // 鼠标坐标值相对于当前屏幕的

        // 鼠标坐标值只能获取，不能设置
    });

</script>
</body>

ログイン後にコピー

9. イベントの委任

多数の HTML 要素が同じイベントを登録し、イベントハンドラーのロジックが同じであるため、ページ速度が遅くなります。イベントフローで、これらの HTML 要素が親要素にイベントを登録できない場合

<style>
        #q1 {
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px;
        }
        #q2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            padding: 50px;
        }
        #q3 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="q1">
    <div id="q2">
        <div id="q3"></div>
    </div>
</div>
<script>
    var q1 = document.getElementById('q1');
    q1.addEventListener('click',function(){
        console.log('这是d1... ...');
    }, false);
    var q2 = document.getElementById('q2');
    q2.addEventListener('click',function(){
        console.log('这是d2... ...');
    }, false);
    var q3 = document.getElementById('q3');
    q3.addEventListener('click',function(event){
        console.log('这是q3... ...');
        event.stopPropagation();
    }, false);
</script>
</body>

ログイン後にコピー