当前位置：网站首页>JS events (add, delete) and delegates

JS events (add, delete) and delegates

2022-07-06 02:31:00 【MyDreamingCode】

1. The traditional way

var btn1 = document.querySelector('#btn1');
btn1.onclick = function() { //  Registration events 
    alert('hello');
    this.onclick = null; //  Delete event 
}

2. addEventListener （IE9 above ）

btn1.addEventListener('click', fn);
function fn() {
    alert('hello');
    btn1.removeEventListener('click', fn);
}

3. attachEvent（IE6、7、8）

btn1.attachEvent('onclick', fn);
function fn() {
    alert('hello');
    btn1.detachEvent('onclick', fn);
}

4. DOM Flow of events ： Capture phase -> Current target stage （target）-> bubbling phase

Event delegation ： Add to parent node event Monitor , Then use the... Of the event object target To find the current click （ Or any other act ） Bubbling of nodes to trigger events .

Be careful ：this Refers to the bound event

e.target It refers to who triggered this event （ For example, who did you click on ）

For example, the following cases ：ul registered click event , be this Point to ul, But if the mouse clicks li Elements , be target by li.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li> Click on , Pop up </li>
        <li> Click on , Pop up </li>
        <li> Click on , Pop up </li>
        <li> Click on , Pop up </li>
        <li> Click on , Pop up </li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            alert(123);
            console.log(e.target);
        })
    </script>
</body>
</html>

attach ：1. Stop bubbling ：event.stopPropagation()

2. Block default events ：event.preventDefault()

<body>
    <p>hahahhah</p>
    <script>
        var p = document.querySelector('p');
        //contextmenu： Right mouse button menu 
        p.addEventListener('contextmenu',function(e) {
            e.preventDefault(); 
        })
        //selectstart： Mouse starts to select 
        p.addEventListener('selectstart',function(e) {
            e.preventDefault();
        })
    </script>
</body>

3. Enter the text box and zoom in

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .wrap {
            position: relative;
            width: 200px;
            margin: 100px auto;
        }
        .tip {
            width: 200px;
            height: 30px;
            font-size: 18px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }
        input {
            position: absolute;
            top: 30px;
            width: 200px;
            height: 20px;
            outline: none;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="tip"></div>
        <input type="text" placeholder=" Please enter the goods order number ">
    </div>
    <script>
        var tip = document.querySelector('.tip');
        var input = document.querySelector('input');
        document.addEventListener('keyup', function() {
            if(input.value != '') {
                tip.innerHTML = input.value;
                tip.style.display = 'block';
            }else {
                tip.style.display = 'none';
            }
        })
        input.addEventListener('blur', function() {
            tip.style.display = 'none';
        })
        input.addEventListener('focus', function() {
            if(this.value != '') {
                tip.style.display = 'block';
            }
        })
    </script>
</body>
</html>

原网站

版权声明
本文为[MyDreamingCode]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202140018232797.html

当前位置：网站首页>JS events (add, delete) and delegates

JS events (add, delete) and delegates

边栏推荐

猜你喜欢

随机推荐