JavaScript进阶系列06,事件委托

2024-04-27 14:18:28

字体：大中小

来源：转载

供稿：网友

javaScript进阶系列06,事件委托

在"Javascript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数"中已经有了一个跨浏览器的事件处理机制。现在需要使用这个事件处理机制为页面元素注册事件方法。

□ 点击页面任何部分触发事件

创建一个script1.js文件。

(function() {
    eventUtility.addEvent(document, "click", function(evt) {
        alert('hello');
    });
}());

页面部分。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    
    <script src="eventUtility.js"></script>
    <script src="script1.js"></script>
</body>
</html>

输出结果：点击页面任何一处都会弹出框。

但，我们有时候希望点击document内的某个元素来触发事件。

□ 使用委托触发事件

在页面上增加a标签。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    
    <div>
        <p><a href="#">点我</a></p>
    </div>
    <script src="eventUtility.js"></script>
    <script src="script1.js"></script>
</body>

把script1.js修改为：

(function() {
    eventUtility.addEvent(document, "click", function(evt) {
        //获取点击对象
        var target = eventUtility.getTarget(evt);
        //获取点击对象的tag名称
        var tagName = target.tagName;
        //如果tag是a
        if (tagName === "A") {
<PRe style="font-size: 11px; font-family: consolas,'Courier New',courier,monospace; w