问页面中的一系列事件是属于元素自身所有还是脚本语言 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Front
V2EX    问与答

问页面中的一系列事件是属于元素自身所有还是脚本语言

  •  
  •   Front 2014-08-03 20:08:19 +08:00 3618 次点击
    这是一个创建于 4097 天前的主题,其中的信息可能已经有所发展或是发生改变。
    问题如题。
    具体是,假设我使用js为一个元素绑定了一个点击事件。然后我去点击它。这个时候,这个事件是JS的事件还是元素自身的事件?
    如果是元素自身的事件,那这些事件是HTML的还是浏览器的?

    不知道我的足不足够清楚。不清楚的请见谅。
    37 条回复    2014-08-04 12:07:48 +08:00
    Front
        1
    Front  
    OP
       2014-08-03 20:11:24 +08:00
    补充下:实际上我的疑惑的是,在前端中有很多概念例如:事件,元素我们可以通过onclikc这样去指定它的点击事件,也可以通过JS去为元素绑定点击事件,也可以用JQ。那这个事件的概念到底是HTML的、JS、还是JQ的?
    jsonline
        2
    jsonline  
       2014-08-03 20:11:59 +08:00 via Android
    是 DOM 的
    jsonline
        3
    jsonline  
       2014-08-03 20:12:30 +08:00 via Android
    这些东西都是有W3C标准的
    Front
        4
    Front  
    OP
       2014-08-03 20:15:50 +08:00
    @jsonline 也就是说无论是JS、还是JQ也只是去对DOM的事件进行监听,从而做出处理的?
    Front
        5
    Front  
    OP
       2014-08-03 20:16:27 +08:00
    @jsonline W3C标准?不太明白你说得什么意思,能具体描述下么?
    tinyhill
        6
    tinyhill  
       2014-08-03 20:21:15 +08:00
    有种东西叫 DOM http://www.w3.org/DOM/
    ss098
        7
    ss098  
       2014-08-03 20:23:43 +08:00
    Front
        8
    Front  
    OP
       2014-08-03 20:24:49 +08:00
    @tinyhill 那是不是说其他的脚本语言是没有独立的事件机制的,最终还是通过DOM对元素进行操作的?
    eslizn
        9
    eslizn  
       2014-08-03 20:36:57 +08:00
    @Front 可以自己实现实践事件机制的,例如观察者模式.
    eslizn
        10
    eslizn  
       2014-08-03 20:37:41 +08:00
    @Front ps,你可以理解为,万物皆有事件,区别只是这个对象处不处理这个事件
    jsonline
        11
    jsonline  
       2014-08-03 20:53:37 +08:00   1
    1. 这是 DOM Event 的技术文档 http://www.w3.org/TR/DOM-Level-2-Events/events.html
    2. 浏览器按照文档给 DOM 实现了 onclick、addEventListener 等 API,所以 JS 可以调用。
    3. JS 本身没有事件机制。
    4. 你可以实现自己的 JS 事件机制。
    5. 不用说「万物皆XX」,因为总有例外。
    jsonline
        12
    jsonline  
       2014-08-03 20:58:32 +08:00
    @eslizn JS 不需要设计模式,设计模式是为了弥补语言自身的不足。http://zhi.hu/3Ozy 要学设计模式?去写 Java 吧。
    jsonline
        13
    jsonline  
       2014-08-03 21:02:49 +08:00   1
    有件事楼主没有弄清楚,事件不是 JS 主动绑定的,JS 只是被动地被调用。比如
    body.Onclick= foo
    这句话的意思是
    JS 告诉浏览器,如果 body 被点击了,你就调用我的 foo 方法好不好?
    onclick 会不会被调用,得看浏览器的「心情」的。
    你觉得 JS 在这里面扮演了什么角色呢?
    loading
    14
    loading  
       2014-08-03 21:04:31 +08:00 via Android   1
    学得这么玄?佩服
    jsonline
        15
    jsonline  
       2014-08-03 21:08:07 +08:00
    浏览器在「监听/捕获事件」,
    JS 只是在添加「事件处理函数」
    jsonline
        16
    jsonline  
       2014-08-03 21:14:09 +08:00
    @eslizn 无意针对你哈,只因我是个Java黑/设计模式黑 :)
    Front
        17
    Front  
    OP
       2014-08-03 21:29:33 +08:00
    @loading 只是学的过程中突然有这么个疑问。
    akfish
        18
    akfish  
       2014-08-03 21:31:59 +08:00   1
    @jsonline 知乎那个答案完全没喷在点上,说得好像语言/类库实现那些功能没有用到设计模式一样。
    喷设计模式的一般也就两类人,一是被滥用设计模式的小白烦得不行的人,一是学不好设计模式而酸葡萄的小白。
    真要有人觉得设计模式完全没用就是垃圾,那就呵呵了。

    包括那些喷设计模式喷得非常起劲的大牛,你在他的代码里到处都看得到设计模式,因为一个系统要做得好,最后大概就会变成那种模式来(滥用设计模式的人则是完全反过来)。
    设计模式本身就是对好的代码实践的总结,主要目的是大家形成一个统一的黑话,交流起来方便。
    A:"你这个代码是怎么一回事?"
    B:"哦,你看这是observer,那里一个bridge,有个三方库adapter进来的"
    没有设计模式的话:
    B:"哦,客官你听我慢慢道来,这里大概有30多个类,我从头到尾跟你讲一遍……"
    jsonline
        19
    jsonline  
       2014-08-03 21:36:12 +08:00
    @akfish 你让写 C 语言的人怎么跟别人将代码呢……
    「设计模式」不是必须的。「常用的 pattern」是必须的。
    很显然那帮搞 Java 的中的一些人已经把设计模式这个词给毁了。
    akfish
        20
    akfish  
       2014-08-03 21:50:16 +08:00
    @jsonline 设计模式是一种存在,只要系统规模达到一定程度,必然就会出现某种模式,不管是否人为(即刻意的去用设计模式)。
    设计模式的问题从来就是滥用/误用的人,很多人没搞清楚喷点在哪里纯跟风,于是完全就喷错了。

    就好比C党在Linus的带领下最喜欢喷C++党,喷到现在就变成不少人张口就来OOP是垃圾,而其实Linus的主要喷点是C++会导致误用/滥用OOP。Linux Kernel,Git等项目的源代码,只要看过的人就知道,不少OOP。

    所以现在看到人说xxx是垃圾,各种呵呵。
    Front
        21
    Front  
    OP
       2014-08-03 21:50:29 +08:00   1
    先谢谢所有人的回答。

    @jsonline 那实际浏览器跟脚本语言,标记语言的关系就像操作系统跟软件的关系。浏览器提供了一个运行的环境,而这些事件有谁来处理,要看浏览器。可以这样理解么?

    @eslizn 你的意思是事件的处理取决于对象么?那对象又是由谁掌控呢?
    Front
        22
    Front  
    OP
       2014-08-03 21:52:57 +08:00
    @akfish
    @jsonline
    两位别吵啦。其实我觉得这些很多时候最终也只是一种工具,结果还是取决与使用的人。所以,没啥好纠结的~
    jsonline
        23
    jsonline  
       2014-08-03 21:53:15 +08:00
    @Front 手抖点到感谢了。浏览器当然是 HTML/CSS/JS/DOM 的底层,不过它也是要遵循W3C标准的,W3C标准同时又会照顾流行的 HTML/CSS/JS/DOM 趋势。
    Front
        24
    Front  
    OP
       2014-08-03 21:55:04 +08:00
    @jsonline 我刚刚也点了别人回复的感谢 - -
    我还想问问,浏览器、各种语言、跟W3C标准三者之间的关系。
    akfish
        25
    akfish  
       2014-08-03 21:56:44 +08:00
    @Front
    @jsonline
    No no no.
    并不是在吵,其实我们的观点是一致的,我也爱喷设计模式玩不转还天天挂在嘴边的人。
    主要是知乎那个答案nb哄哄的说了一大堆,把设计模式喷成没有多大用途的垃圾, 的确太呵呵了。
    jsonline
        26
    jsonline  
       2014-08-03 21:56:45 +08:00
    @akfish OOP 也是在模板(Struct)上面发展的,说 C 里面有 OOP 有点误解 C 开发者的本意了。
    我反正是几年没用过面向「类」的设计模式了。
    Front
        27
    Front  
    OP
       2014-08-03 21:57:23 +08:00
    @akfish 嘿嘿,原来。能理解
    eslizn
        28
    eslizn  
       2014-08-03 21:59:23 +08:00   1
    @Front 比如像某个DOM对象,它是由浏览器掌控,对于浏览器支持的事件(例如click),被浏览器捕捉到以后,会激活一个约定好的callable对象(当然我们可以对这个对象进行修改,也就是俗称的"绑定事件",冒泡什么的跟这个话题关系不大,是属于DOM对象自己实现的一个特性).

    而一个自定义对象的事件触发及处理,取决于你怎么定义的这个对象 ^_^
    Front
        29
    Front  
    OP
       2014-08-03 22:01:27 +08:00
    @eslizn 原来是这样。明白了。谢谢~
    jsonline
        30
    jsonline  
       2014-08-03 22:03:32 +08:00
    @Front 这个关系太复杂了吧
    现有 HTML CSS 和 浏览器,后来 NetScape 发明了 JS,IE 马上跟进并大力提升了 JS 的功能和性能。于是 JS 流行起来,JS 的流行催生 W3C 标准(HTML标准、HTML DOM 标准、CSS 标准、ECMAScript 标准……)的诞生。怎奈 IE 已经占领山头,大有其标准于不顾的气势。虽然有 Monzilla / WebKit 力挺 W3C,但是势单力薄。知道 Google 的 Chrome 横空出世,惊艳的 UI 使得 IE 无地自容,只有那些食古不化的企业应用还在兼容 IE。现如今,IE 只能蜷缩在 China 大陆的无数 XP 系统中。
    akfish
        31
    akfish  
       2014-08-03 22:03:43 +08:00
    @jsonline C语言的设计的确是没有考虑OOP,但是可以实现OOP。
    最早版本的C++原型没记错的话,就是以C为编译目标,用C实现的OOP,相当于语法糖。
    不少的C项目,也的确是刻意的去用OOP,用语也会涉及class/object之类的词汇,这些不管是从文档还是代码注释里都有体现。
    jsonline
        32
    jsonline  
       2014-08-03 22:03:57 +08:00
    @jsonline 「先」有 HTML CSS 和 浏览器
    jsonline
        33
    jsonline  
       2014-08-03 22:05:48 +08:00
    @akfish C 我不熟,你懂的比我多些。但单论 OOP,我更喜欢 JS 的面向「object」的OOP,不喜欢 Java 的面向「class」的OOP。而Java的「设计模式」,都是面向「类」的。于是……路人转黑。
    akfish
        34
    akfish  
       2014-08-03 22:17:44 +08:00
    @jsonline 其实OOP都是同样的一种抽象方式,不同语言的表述和实现不同而已,有的语言/实现容易导致误用滥用,因此喷点槽点众多。比如Java里OOP是唯一选项,导致不适合OOP的应用也非得用OOP开发,后果当然会很呵呵。C++的问题则是选项过多,导致奇技淫巧党巨多,尤其是刚学过两天Template Meta-programming的。
    JS里OOP不烦人主要是因为它只是一种选项,不会把简单的任务复杂化,复杂的任务一OOP就能简单化。

    这里有篇文档就是说的Linux Kernel里面的OOP
    http://lwn.net/Articles/444910/
    akfish
        35
    akfish  
       2014-08-03 22:21:58 +08:00
    好吧,歪楼这么多还是解答下lz的问题吧。

    事件是元素自身的性质/机制;
    JS语言用于描述这种性质及其实现;
    JS语言运行时负责执行;
    浏览器负责解析HTML、CSS、JS文件,创建DOM对象,创建JS运行时。
    Front
        36
    Front  
    OP
       2014-08-03 23:04:17 +08:00
    看到现在,心里大概有谱了,不过感觉大家说的各自都有些不一样,所以容我梳理梳理。最后还是要谢谢各位。
    shyrock
        37
    shyrock  
       2014-08-04 12:07:48 +08:00
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     5212 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 22ms UTC 05:43 PVG 13:43 LAX 22:43 JFK 01:43
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86