master

分支 (1)

管理

管理

master

test-warehouse
/
01_事件基础.html

<!DOCTYPE html>
<html lang="zh-CN">

<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>

    <div class="box">
        <div class="box-item">
            <div class="item-title">点击对象</div>
            <input type="text" id="item-input">
        </div>

        <form action="/" method="get" class="formSubmit" onsubmit="return false">
            <input type="text" name="username" value="111111">
            <input type="text" name="userpass" value="2222222">
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </form>
    </div>

    <script>
        let _box = document.querySelector('.box');
        let _boxItem = document.querySelector('.box-item');
        let _itemTitle = document.querySelector('.item-title');
        let _itemInput = document.querySelector('#item-input');

        _box.addEventListener('click', function (event) {
            let e = event || window.event;
            console.log('点击了box', event);
        })

        _itemInput.addEventListener('focus', function () {
            console.log('当前输入框已被选中')
        })

        _itemInput.addEventListener('blur', function () {
            console.log('当前输入框已离开')
        })

        _boxItem.addEventListener('click', function () {
            console.log('点击了box-item');
        })

        _itemTitle.addEventListener('click', function (event) {
            // event.stopPropagation();
            if (window.event) {
                window.event.cancelBubble = true
            } else {
                event.stopPropagation();
            }
            console.log('点击了item-title');
            // return false;
        })

        window.addEventListener('keyup', function (event) {
            console.log(event);
        })

        let _formSubmit = document.querySelector('.formSubmit');
        _formSubmit.addEventListener('submit', function () {
            console.log('表单已提交');
            return false;
        })

        _formSubmit.addEventListener('reset', function () {
            console.log('表单已重置');
            return false;
        })
    </script>

</body>

</html>