第一种
把事件写在标签的属性里,如:
<a href="#" onclick="t()">
这是DOM 0级的标准(非常古老的标准)。
- 好处:大家都会,几乎所有浏览器都支持
- 坏处:夹杂在HTML代码中,不简洁,这种事件写法,效率不高,不符合“行为、结构、样式相分离”
第二种
用事件属性来绑定事件函数
- 好处:完成了行为的分离,便于操作当事对象,因为function是作为对象的onxxx属性出现的,因此,函数里操作该对象,直接用this就能引用当事对象可以方便地读取“事件对象”。
- 坏处:多人团队开发时,相同的事件,后面的会覆盖前面的。
第三种
w3c中的标准 addEventListener
1.绑在哪个事件上? click,load,change,blur,focus,mouseover,mouseup...等等
2.绑定什么函数---自定义事件函数
3.什么方式监听执行事件函数?捕捉,冒泡?
语法:xxxDomObject.addEventListener();
注意:
- 事件名一律不带on
- 绑定事件函数中的"this"指绑定该事件的对象
- 执行顺序是按绑定顺序执行的
捕捉模型与冒泡模型
外 -> 内,称为捕捉模型
内 -> 外,称为冒泡模型
总结:
- 第三个参数true/false 代表 捕捉/冒泡模型,如果不填,默认为false(建议不省略)。
- 系统会为事件函数自动传入事件对象,作为第一个参数传入