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") {

            alert("点我了");


            //阻止链接的默认行为

            eventUtility.preventDefault(evt);

        }

    });

}());

输出结果：只有点击页面上的a标签才弹出框。

以上的好处是：无论document内增加多少a标签元素，所有a标签都具有被触发的能力。像这种方式就是事件委托。我们希望为子元素注册事件，却把事件先注册到子元素的父级元素上，这样，在该父元素之内、动态添加的、任何与子元素同类的元素都注册了事件。

如果我们把事件注册到子元素上，在document中再动态添加与子元素同类的元素，都必须为这些刚动态添加的子元素分别注册事件。

另外，事件委托很好地利用了"事件冒泡"。当点击子元素，根据"事件冒泡"，该子元素的父级元素捕获了该次点击事件，并触发自己的方法。

“JavaScript进阶系列”包括：

JavaScript进阶系列01,函数的声明，函数参数，函数闭包

JavaScript进阶系列02,函数作为参数以及在数组中的应用

JavaScript进阶系列03,通过硬编码、工厂模式、构造函数创建JavaScript对象

JavaScript进阶系列04,函数参数个数不确定情况下的解决方案

JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数

JavaScript进阶系列06,事件委托

时间： 2024-10-12 10:08:55

JavaScript进阶系列06,事件委托的相关文章

JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数

本篇体验JavaScript事件的基本面,包括: ■ 事件必须在页面元素加载之后起效■ 点击事件的一个简单例子■ 为元素注册多个点击事件■ 获取事件参数 □ 事件必须在页面元素加载之后起效有这样一段简单的代码: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style>

JavaScript进阶系列07,鼠标事件

鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keypress事件,而会触发Keydown和Keyup事件,这就是Keypress事件与Keydown.Keyup事件的不同之处.另外,通常使用Keypress事件来获取用户输入信息. 继续使用"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件

JavaScript进阶系列04,函数参数个数不确定情况下的解决方案

本篇主要体验函数参数个数不确定情况下的一个解决方案.先来看一段使用函数作为参数进行计算的实例. var calculate = function(x, y, fn) { return fn(x, y); }; var sum = function(x, y) { return x + y; }; var diff = function(x, y) { return x - y; }; var sumResult = calculate(1, 2, sum), diffResult = calcu

JavaScript进阶系列02,函数作为参数以及在数组中的应用

有时候,把函数作为参数可以让代码更简洁. var calculator = { calculate: function(x, y, fn) { return fn(x, y); } }; var sum = function(x, y) { return x + y; }, diff = function (x, y) { return x - y; }; var sumResult = calculator.calculate(2, 1, sum), diffResult = calculat

JavaScript进阶系列03,通过硬编码、工厂模式、构造函数创建JavaScript对象

本篇体验通过硬编码.工厂模式.构造函数来创建JavaScript对象. □ 通过硬编码创建JavaScript对象当需要创建一个JavaScript对象时,我们可能这样写: var person = { firstName: "Darren", lastName: "Ji", getFullName: function() { return this.firstName + " " + this.lastName; } }; 如果需要创建2个结

JavaScript面试问题：事件委托和this

JavaScript不仅门槛低,而且是一门有趣.功能强大和非常重要的语言.各行各业的人发现自己最混乱的选择是JavaSscript编程语言.由于有着各种各样的背景,所以不是每个人都对JavaScript及其基本原理有广泛的认识.通常来书,除非你去参加工作面试才会去思考为什么或者怎么做, 否则JavaScript只是你工作的内容. 这个系类的目标是深入探讨JavaScript的一些概念和理论.主题来自于 Darcy Clarke的JavaScript典型面试问题列表.希望你不仅仅是为了答案而阅读

JavaScript性能优化之事件委托

1 内存和性能在JavaScript中,添加到页面上的事件处理程序的数量直接关系到页面的整体运行性能: 首先,每个函数都是对象,都会占用内存:内存中的对象越多,性能就越差. 其次,必须事先指定所有事件处理程序,会导致DOM访问次数增加,会延迟整个页面的交互就绪时间. 2 事件委托事件委托就是事件目标本身不处理事件,而是把处理任务委托给其父元素或祖先元素.事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 事件委托解决了"事件处理程序过多"的问题. 假定现

JavaScript进阶系列01,函数的声明，函数参数，函数闭包

本篇主要体验JavaScript函数的声明.函数参数以及函数闭包. □ 函数的声明 ※ 声明全局函数通常这样声明函数: function doSth() { alert("可以在任何时候调用我"); } 通过这种方式声明的函数属于Window对象,可以在任何地方调用,即在doSth方法的之前和之后都可以调用. 可以在doSth方法之前调用: doSth(); function doSth() { alert("可以在任何时候调用我"); } 可以在doSth方法之

【C#进阶系列】16 委托

委托主要是为了实现回调函数机制,可以理解为函数指针(唯一不同的在于多了委托链这个概念). 然而用的时候可以这么理解,但是委托的内部机制是比较复杂的. 一个委托的故事 delegate void razor(String userName); 一个简单的委托被定义了. 实际上在编译后这段代码就和下面的代码很像了: class Razor : System.MulticastDelegate { //构造函数 public Razor(Object @object,IntPtr method);