麻烦老师检查指点

来源：4-3 编程练习

慕先生8971282

2020-08-28 13:40:34

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<p>
    请选择菜单：
    <select id="menu">
        <option>请选择</option>
        <option value="fruit">水果</option>
        <option value="cake">蛋糕</option>
        <option value="nuts">坚果</option>
    </select>
</p>
<p>该系列有：<span id="content"></span></p>
<script>
    // 此处写代码
 var EventUtil = {
        addHandler: function(element, type, handler) {
            //绑定事件
            //Chrome Firefox IE9等     addEventListener 
            //IE8及IE8以下的浏览器     attachEvent 
 if(element.addEventListener) {
                element.addEventListener(type, handler, false);
            } else if(element.attachEvent) {
                element.attachEvent("on" + type, handler);
            } else {
                element["on" + type] = handler
            }
        },
        removeHandler: function(element, type, handler) {
            //移除事件
            //Chrome Firefox IE9等      
            //IE8及IE8以下的浏览器     
 if(element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if(element.detachEvent) {
                element.detachEvent("on" + type, handler);
            } else {
                element["on" + type] = handler
            }
        },
        getTarget: function(event) {
            return event.target || event.srcElement;
        },
        preventDefault: function(event) {
            if(event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        stopPropagation: function(event) {
            if(event.stopPropagation) {
                event.stopPropagation()
            } else {
                event.cancelBubble = true;
            }
        }
    };
    var menu = document.querySelector('#menu');
    var content = document.querySelector('#content');
    EventUtil.addHandler(menu,'change',function () {
        var text = '';
        switch (this.value) {
            case 'fruit':
                text = '苹果、香蕉、鸭梨、橙子、西瓜';
                break;
            case 'cake':
                text = '慕斯、奶酪、海绵、重油、戚风';
                break;
            case 'nuts':
                text = '碧根果、巴旦木、夏威夷果、腰果、开心果';
                break;
            default:
                break;
        }
        content.innerHTML = text;
    });
</script>
</body>
</html>

写回答

1回答