绑定事件01

第一种

把事件写在标签的属性里,如:

<a href="#" onclick="t()">

这是DOM 0级的标准(非常古老的标准)。

  1. 好处:大家都会,几乎所有浏览器都支持
  2. 坏处:夹杂在HTML代码中,不简洁,这种事件写法,效率不高,不符合“行为、结构、样式相分离”

第二种

用事件属性来绑定事件函数

  1. 好处:完成了行为的分离,便于操作当事对象,因为function是作为对象的onxxx属性出现的,因此,函数里操作该对象,直接用this就能引用当事对象可以方便地读取“事件对象”。
  2. 坏处:多人团队开发时,相同的事件,后面的会覆盖前面的。

第三种

w3c中的标准 addEventListener

1.绑在哪个事件上? click,load,change,blur,focus,mouseover,mouseup...等等

2.绑定什么函数---自定义事件函数

3.什么方式监听执行事件函数?捕捉,冒泡?

语法:xxxDomObject.addEventListener();

注意:

  1. 事件名一律不带on
  2. 绑定事件函数中的"this"指绑定该事件的对象
  3. 执行顺序是按绑定顺序执行的

捕捉模型与冒泡模型

外 -> 内,称为捕捉模型

内 -> 外,称为冒泡模型

总结:

  1. 第三个参数true/false 代表 捕捉/冒泡模型,如果不填,默认为false(建议不省略)。
  2. 系统会为事件函数自动传入事件对象,作为第一个参数传入
javascript高级
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。