Javascript 事件&冒泡机制(下）

qinzheng_chen

于 2021-04-19 15:17:46 发布

阅读量148

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/qinzheng_chen/article/details/115865561

版权

注册事件的方式-事件处理程序

js事件处理程序按照种类来划分，大致可分为五大类：HTML事件处理程序，DOM0级事件处理程序，DOM2级事件处理程序，IE事件处理程序和跨浏览器事件处理程序。

尤其是DOM0,DOM2和IE事件处理程序，利用它们之间的差异化有效地解决浏览器差异问题，从而实现跨浏览器的兼容性问题。
在这里插入图片描述

html 事件处理

<body>
    <div class="father">
        <input type="button" onclick="handleFunc(this.value)" value="test">
    </div>
    <script>
        function handleFunc(msg) {
            alert(msg);
        }
    </script>
</body>

Tip:
1.事件处理程序中的代码，能够访问全局作用域中的任何变量；
2.每个function()存在一个局部变量，即事件对象event，通过event变量，可以直接访问事件对象。

<body>
   <input type="button" value="请点击" onclick="alert(event.type)"/>
</body>

缺点：

不能添加多个事件处理程序
html代码与js代码高度耦合
时差问题

DOM0 级事件处理

DOM0级事件很好地解决了html和js代码强耦合的问题。

var btn = document.querySelector('#btn1');
 btn.onclick = function () {
            txt.value = 'this is a test';
            this.disabled = true;
        }
btn.onclick = null;//解除绑定

DOM2 级事件处理

DOM2级事件定义了两个方法来为目标元素绑定事件处理程序(addEventListener())和解除事件处理程序(removeEventListener())，所有节点中都包含这两个方法，并且他们都接收三个参数：

要处理的事件名，事件处理程序和一个布尔值(true表示是在捕获阶段进行，false表示在冒泡阶段进行)

1.为事件添加click事件处理程序（冒泡阶段进行）

<script>
        /* btn.onclick = function () {
            txt.value = 'this is a test';
            this.disabled = true;
        } */
        var btn = document.querySelector('#btn1');
        var txt = document.querySelector('#txt1');

        btn.addEventListener('click', function () {
            alert(this.id);
        }, false)
        btn.addEventListener('click', function () {
            alert('this is a test');
        }, false)
//删除事件处理程序
btn.removeEventListener('click',handlerFunction,false);
    </script>

结果
先弹出btn1 再弹出this is a test .

Tip:
addEventListener 针对同一个元素，同一个事件可以添加多个侦听器（事件处理程序）

IE 事件处理程序

在MDN上这种事件处理程序已经不推荐使用了，只针对IE9以前的ie浏览器有效（了解即可）

    var btn = document.getElementById("myBtn");
    var handler = function () {
        alert("IE事件处理程序");
    };
    //绑定事件
    btn.attachEvent("onclick", handler);
    //移除事件
    btn.detachEvent("onclick", handler);

Tip
下面实例的执行结果是先执行handler1 再执行handler

var btn = document.getElementById("btn1");
        var handler = function () {
            alert("IE事件处理程序1");
        };

        var handler1 = function () {
            alert("IE事件处理程序2");
        };
        //绑定事件
        btn.attachEvent("onclick", handler);
        btn.attachEvent("onclick", handler1);

兼容性的事件处理函数写法

function addEventListenerByDev(element, eventName, fn) {
            //先判断浏览器是否支持addEventListener方法
            if (element.addEventListener) {
                element.addEventListener(eventName, fn);
            }
            else if (element.attachEvent) {
                element.attachEvent('on' + eventName, fn);
            } else {
                //相当于element.οnclick=fn;
                element['on' + eventName] = fn;
            }
        }

事件委托(事件代理/委派）

事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点

<!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>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <script>
        var ulEle = document.querySelector('ul');
        ulEle.addEventListener('click', function (event) {
            event.target.style.backgroundColor = 'lightyellow';
        }, false);
    </script>
</body>

</html>

事件委托的优点：只需要操作一次DOM ，提高程序的性能

qinzheng_chen

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Javascript 事件&冒泡机制(下）

注册事件的方式-事件处理程序js事件处理程序按照种类来划分，大致可分为五大类：HTML事件处理程序，DOM0级事件处理程序，DOM2级事件处理程序，IE事件处理程序和跨浏览器事件处理程序。尤其是DOM0,DOM2和IE事件处理程序，利用它们之间的差异化有效地解决浏览器差异问题，从而实现跨浏览器的兼容性问题。html 事件处理<body> <div class="father"> <input type="button" onclick="han
复制链接

扫一扫