没有合适的资源?快使用搜索试试~ 我知道了~
关于JavaScript与HTML的交互事件
需积分: 3 0 下载量 152 浏览量
2020-10-27
12:43:36
上传
评论
收藏 104KB PDF 举报
温馨提示
试读
7页
本篇文章小编将为大家介绍,关于JavaScript与HTML的交互事件,有需要的朋友可以参考一下
资源推荐
资源详情
资源评论
关于关于JavaScript与与HTML的交互事件的交互事件
本篇文章小编将为大家介绍,关于JavaScript与HTML的交互事件,有需要的朋友可以参考一下
JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型,当文档、浏览器、元素或与之相关对
象发生特定事情时,浏览器会产生事件。如果JavaScript关注特定类型事件,那么它可以注册当这类事件发生时要调用的句
柄。
事件流事件流
事件流描述的是从页面中接收事件的顺序,比如有两个嵌套的div,点击了内层的div,这时候是内层的div先出发click事件还是
外层先触发?目前主要有三种模型
IE的事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的元素
Netscape的事件捕获:不太具体的节点更早接收事件,而最具体的元素最后接收事件,和事件冒泡相反
DOM事件流:DOM2级事件规定事件流包括三个阶段,事件捕获阶段,处于目标阶段,事件冒泡阶段,首先发生的是事件捕
获,为截取事件提供机会,然后是实际目标接收事件,最后是冒泡句阶段。
Opera、Firefox、Chrome、Safari都支持DOM事件流,IE不支持事件流,只支持事件冒泡
如有以下html,点击div区域
复制代码 代码如下:
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Test Page</title>
</head>
<body>
<div>
Click Here</div>
</body>
</html>
事件处理程序(事件处理程序(handler))
我们也称之为事件侦听器(listener),事件就是用户或浏览器自身执行的某种动作。比如click、load、moseover等,都是事
件类型(俗称事件名称),而响应某个事件的方法就叫做事件处理程序或者事件监听器或者事件句柄,事件处理程序名字是:
on+事件类型。
了解了这些,我们看看如何给元素添加事件处理程序
HTML事件处理程序元素支持的每个事件都可以使用一个相应事件处理程序同名的HTML属性指定。这个属性的值应该是可以
执行的JavaScript代码,我们可以为一个button添加 click事件处理程序
复制代码 代码如下:
<input type="button" value="Click Here" onclick="alert('Clicked!');" />
在HTML事件处理程序中可以包含要执行的具体动作,也可以调用在页面其它地方定义的脚本,刚才的例子可以写成这样
复制代码 代码如下:
<input type="button" value="Click Here" onclick="showMessage();" />
<script type="text/javascript">
function showMessage() {
alert('Clicked!');
}
在HTML中指定事件处理程序书写很方便,但是有两个缺点。
首先,存在加载顺序问题,如果事件处理程序在html代码之后加载,用户可能在事件处理程序还未加载完成时就点击按钮之类
资源评论
weixin_38709511
- 粉丝: 0
- 资源: 891
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功