1

JavaScript DOM-事件操作

事件

注册事件

给元素添加事件,为注册事件或者绑定事件

注册事件两种方式

  1. 传统方式
  2. 监听事件方式

 

事件监听
  • addEventListener() 事件监听 (IE9以上)
eventTarget.addEventListener(type, listener, [useCapture])
  1. 参数type:            事件类型字符串,不要on 如click,mouseover
  2. 参数listener:       事件处理函数,触发的时候要做的事情
  3. 参数useCapture: 可选,是一个布尔值,默认false
  • attacheEvent() 事件监听 (IE678支持)
evetagrget.attachEvent(eventNameWithOn, callback)
  1. 参数eventNameWithOn: 事件类型字符串,不要on 如click,mouseover
  2. 参数callback:                   事件处理函数,触发的时候要做的事情
<body>
    <button>传统注册事件</button>
    <button>addEventListener  ie9以上</button>
    <button>attachEvent  ie678</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 传统注册事件
        btns[0].onclick = function () {
            alert('传统方式')
        };
        // addEventListener 添加多个不覆盖
        btns[1].addEventListener('click', function () {
            alert('ddEventListener  ie9以上')
        });
        btns[1].addEventListener('click', function () {
            alert('ddEventListener  ie9以上---2')
        });

        //attachEvent
        btns[2].attachEvent('click', function () {
            alert('attachEvent')
        })
    </script>
</body>
示例代码
删除事件
  • 传统方式
btns.onclick = null
  • 方式删除监听事件
eventTarget.removeEventListener(type, listener, [useCapture])
  1. 参数type:            事件类型字符串,不要on 如click,mouseover
  2. 参数listener:       事件处理函数,触发的时候要做的事情
  3. 参数useCapture: 可选,是一个布尔值,默认false
<body>
    <button>addEventListener  ie9以上</button>
    <button>attachEvent  ie678</button>
    <script>
        var btns = document.querySelectorAll('button');
        // addEventListener 添加多个不覆盖
        btns[0].addEventListener('click', fn);
        function fn() {
            alert(222);
            this.removeEventListener('click', fn)
        }

        //attachEvent
        btns[1].attachEvent('click', fn1);
        function fn1() {
            alert(111);
            this.detachEvent('click', fn1)
        }

    </script>
</body>
示例代码

 

事件冒泡
  • onblur,onfocus,onmouseenter,onmouseleave 没有冒泡

dom 事件流,在js代码中

  1. 只能执行捕获或者冒泡其中的一个阶段;
  2. onclick 和 attachEvent(ie) 只能得到冒泡阶段;
  3. 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son;
  4. 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html –> document
<div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>

        var son = document.querySelector('.son');
        // 给son 注册点击事件
        son.addEventListener('click', function () {
            alert('son');
        }, true); // true--> 捕获阶段,flase---> 冒泡阶段


        // 给father注册单击事件
        var father = document.querySelector('.father');
        father.addEventListener('click', function () {
            alert('father');
        }, true);

        // 给document 注册单击事件
        document.addEventListener('click', function () {
            alert('document');
        }, true)

    </script>
事件捕获代码
<div class="father">
    <div class="son">son盒子</div>
</div>
<script>

    var son = document.querySelector('.son');
    // 给son 注册点击事件
    son.addEventListener('click', function () {
        alert('son');
    }, false); // true--> 捕获阶段,flase---> 冒泡阶段


    // 给father注册单击事件
    var father = document.querySelector('.father');
    father.addEventListener('click', function () {
        alert('father');
    }, false);

    // 给document 注册单击事件
    document.addEventListener('click', function () {
        alert('document');
    })

</script>
事件冒泡代码
事件对象
  • 事件触发发生时会产生事件对象,并且系统会以实参形式传给事件处理函数
<body>
    <div>123</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function (event) {
            // event 就是事件对象, 形参
            event = event || window.event; // 兼容性问题
                console.log(event);
        }

    </script>
</body>
示例代码

事件对象属性和方法:

 

e.target和this区别

<body>
    <div>123</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var div = document.querySelector('div');
        div.addEventListener('click', function (e) {
            console.log(e.target); // 一致
            console.log(this);  // 一致
        });

        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            console.log(e.target);   // 谁触发的就说谁, 这里是li
            console.log(this);  // 我们给ul 绑定了事件  那么this 就指向ul
        })
    </script>
</body>
示例代码
阻止默认行为

html的一种默认行为

<body>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        var a = document.querySelector('a');
        a.addEventListener('click', function (e) {
            e.preventDefault()  // dom 标准行为,组织默认提交行为
        });

        // 传统方式阻止默认行为
        a.onclick = function (e) {
            e.preventDefault();
            return false  // 我们可以利用return false 也能阻止默认行为 没有兼容性问题
        };


        var from = document.querySelector('form');
        from.addEventListener('click', function (e) {
            e.preventDefault()
        })
    </script>

</body>
示例代码
阻止事件冒泡

e.stopPropagation()

<body>
    <div class="father">
        <div class="son">son儿子</div>
    </div>

    <script>
        var son = document.querySelector('.son');
        var father = document.querySelector('.father');

        son.addEventListener('click', function (e) {
            alert('son');
            e.stopPropagation();  // 阻止事件冒泡
        },false);

        father.addEventListener('click', function (e) {
            alert('father');
        }, false);

        document.addEventListener('click', function (e) {
            alert('document')
        })

    </script>

</body>
示例代码
事件委托

给父元素注册事件,利用事件冒泡,当子元素的事件触发,会冒泡到父元素,然后去控制相应的子元素。

<body>
    <ul>
        <li>知否知否,点我应有弹框在手!</li>
        <li>知否知否,点我应有弹框在手!</li>
        <li>知否知否,点我应有弹框在手!</li>
        <li>知否知否,点我应有弹框在手!</li>
        <li>知否知否,点我应有弹框在手!</li>
    </ul>
    <script>
       var ul = document.querySelector('ul');
       ul.addEventListener('click', function (e) {
           e.target.style.backgroundColor = 'red';  // 事件委托
       })
    </script>
</body>
示例代码
常用鼠标事件

鼠标事件对象

<script>
        document.addEventListener('click', function (e) {
            // 1. client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
        })

    </script>
示例代码

 

相关代码: https://github.com/1515806183/html-code/tree/master/wapapi-01

posted @ 2020-01-20 16:57  小白森  阅读(171)  评论(0编辑  收藏