【前端学习】前端学习第十五天:JavaScript中的事件模型

在各种浏览器中存在三种事件模型:原始事件模型、DOM事件模型和IE事件模型

一、原始事件模型:

原始事件模型被所有浏览器支持;

在原始事件模型中。事件一旦发生就直接调用事件处理函数,事件不会向别的对象传播,原始事件模型中事件程序的注册可以采用以下几种方式;

1、在HTML中设置事件属性

<input type="button" value="确定" οnclick="alert('hello');">

2、在JavaScript中设置事件属性

格式:obj.eventType=handler;

eventType是事件类型名,handler是函数名称;

3、使用代码触发事件

可以使用代码显式的触发事件,从而调用对应的事件处理程序;

二、DOM事件模型

DOM事件流:当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会受到该事件,这个传播过程就是DOM事件流。

事件流按传播顺序分为两种类型,即事件捕捉和事件冒泡。

事件捕捉:事件从最不特定的document对象开始触发,传递到特定的事件目标,也就是从DOM树的最顶层元素一直传输到特定的元素。

事件冒泡:事件冒泡和事件捕捉的传播顺序刚好相反,简单理解就是从特定元素向上传输直到最顶层。

所有的事件都会经历事件捕捉,但不是所有的元素都会经历事件冒泡;

DOM事件模型中事件处理程序的注册采用格式:

addEventListener("e",handler,true|false);

事件程序的删除采用格式:

removeEventListener("e",handler,true|false);

其中true为捕获阶段,false为冒泡阶段;

三、IE事件模型

IE浏览器中的事件流仅包含冒泡阶段;

IE事件模型中事件处理程序的注册采用格式:

attachEvent("e","handler");

IE事件模型中事件处理程序的删除采用格式:

detachEvent("e","handler");

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值