欢迎使用优快云-markdown编辑器

最新推荐文章于 2025-03-26 11:14:13 发布

一步一步向光明

最新推荐文章于 2025-03-26 11:14:13 发布

阅读量348

点赞数 1

分类专栏：菜鸟文章标签： web开发

菜鸟专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种改进的事件绑定方式——多播事件委托，这种方法能够为一个事件绑定多个处理函数，同时不会影响原有事件处理。文章还强调了现代Web编程中分离关注点的重要性，即使用脚本来控制元素行为、HTML来定义内容、CSS来定义样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【我的Web开发之路】01_多播

代码摘自：https://www.shiyanlou.com/courses/51/labs/242/document

//统一的为对象添加多播事件委托的方法
/*  
    参数说明:
    oTarget     : 要添加事件的对象.比如"document".
    sEventType  : 事件类型.比如单击事件"click".
    fnHandler   : 发生事件时调用的方法.比如一个静态函数"hideCalendar"

    使用举例:
    //单击页面的任何元素,只要没有取消冒泡,都可以关闭日历控件
    var cf = document.getElementById("CalFrame");
    if (cf != null && hideCalendar != null) {
        ScriptHelper.addEventListener(document,"click",hideCalendar);
    }
*/
scriptHelper.prototype.addEventListener = function(oTarget, sEventType, fnHandler) {
    if(oTarget.addEventListener) {  //for dom
        oTarget.addEventListener(sEventType, fnHandler, false);
    } else if(oTarget.attachEvent) {    //for ie
        oTarget.attachEvent("on" + sEventType, fnHandler);
    }
}

教程在最后，有了这么一段Tips：
所以我们首先应该摒弃<div onclick="..."></div>这种通过修改元素属性添加事件的方式。尽量使用添加多播事件委托的方式为一个事件绑定多个事件处理函数,比如为 document 对象的单击事件添加一个关闭弹出层的方法,使用多播就不会影响 document 对象原有的事件处理函数。
以自己现在的水平，看这段代码还是感觉云山雾罩。Jquery的匿名函数这是，将是自己，接下来的努力学习方向。
这个教程里还给出了，现在Web编程的规范：
让 HTML 代码部分只注意”显示”逻辑.现在的趋势是将 HTML 的行为,内容与样式切分干净.其中用脚本控制元素行为,用 HTML 标签控制元素内容,用 CSS 控制元素样式.使用 jQuery 事件处理函数可以避免在 HTML 标签上直接添加事件.