《JS&jQuery 交互式web前端开发》（六）事件

最新推荐文章于 2020-04-13 15:50:38 发布

小白今天睡饱了吗

最新推荐文章于 2020-04-13 15:50:38 发布

阅读量257

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/sfhtjj/article/details/104162455

版权

文章目录

6 事件

6 事件

6.1 事件处理：事件触发JavaScript的过程

1）过程

选择元素、指定事件、调用代码
示例：username上的blur事件

2）将事件绑定到元素

HTML事件处理程序（不推荐使用）

早期版本的HTML中包含一组属性用来响应它所属元素的事件
属性的名字对应事件的名字，属性的值对应事件发生时需要运行的函数的名称
如：<a onclick="hide()">，用户点击<a>元素后调用hide()方法

示例：

event-attributes.js：

function checkUsername(){
	var elMsg = document.getElementById('feedback');

	//获得 feedback 元素
	var elUsername = document.getElementById('username');
	//获得用户名输入
	if(elUsername.value.length<5){
		//如果用户名太短，设置提示信息
		elMsg.textContent = '用户名不应少于5个字符！';
	}else{
		//否则清除信息
		elMsg.textContent = '';
	}
}

event-attributes.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>event-attributes</title>
</head>
<body>
	<form method="post" action="http://www.example.org/register">
		<label for="username">用户名: </label>
		<input type="text" id="username" onblur="checkUsername()" />
		<div id="feedback"></div>

		<label for="password">密码: </label>
		<input type="password" id="password" />

		<input type="submit" value="注册">
	</form>
	<script type="text/javascript" src="event-attributes.js"></script>
</body>
</html>

显示为：

传统的DOM事件处理程序

优于HTML的事件处理程序
适用于所有的主流浏览器
只能在一个事件上附加一个函数

示例：（html文件中没有onblur事件属性）

//定义命名函数
function checkUsername(){
	//检查用户名长度的函数
}
//用变量保存对DOM元素的引用
var el = document.getElementById('username');
//最后一行事件处理程序 el.onblur：表示在变量el对应的元素上等待onblur事件的发生
el.onblur = checkUsername;     //去掉小括号，以免代码在事件发生前运行

事件监听器

允许一个事件触发多个方法
语法：元素.addEventListener(事件,代码,事件流);
- addEventListener()的三个参数：需要监听的事件、事件发生时需要执行的代码、一个布尔值（通常为false）
- removeEventListener()：移除事件监听器

示例：

//定义命名函数
function checkUsername(){
	//检查用户名长度的函数
}
//用变量保存对DOM元素的引用
var el = document.getElementById('username');
//最后一行事件处理程序 el.onblur：表示在变量el对应的元素上等待onblur事件的发生
el.addEventListener('blur',checkUsername,false)     //去掉小括号

使用参数

var elUsername = document.getElementById('username');
var elMsg = document.getElementById('feedback');

function checkUsername(minLength){
	if(elUsername.value.length<minLength){
		//如果用户名太短，设置提示信息
		elMsg.textContent = '用户名不应少于'+minLength+'个字符！';
	}else{
		//否则清除信息
		elMsg.textContent = '';
	}
}

elUsername.addEventListener('blur',function(){
	//传递参数	
	checkUsername(3);
})

支持旧版本的IE浏览器（IE5～IE8）

attachEvent()方法：

检查浏览器是否支持addEventListener()方法

if(el.addEventListener){
	//如果支持 addEventListener 方法
	el.addEventListener('blur',function(){
		checkUsername(5);
},false);
}else{
	//如果不支持 addEventListener 方法
	//事件名称加上 on 前缀
	el.attachEventListener('onblur',function(){
		checkUsername(5);
	});
}

3）事件流

事件发生的顺序被称为“事件流”
两种流向
- addEventListener()方法的最后一个参数允许选择事件触发的方向：true表示捕获、false表示冒泡
- 事件冒泡：事件从最具体的节点开始向外传播到最宽泛的节点（大多数浏览器支持）
- 事件捕获：事件从最宽泛的节点开始向内传播到最具体的节点（IE8及更早版本不支持）

4）事件对象

事件发生时，事件对象包含一些关于事件的信息以及发生在哪个元素上
事件对象会作为参数传递给任何事件处理程序/事件监听器的函数

无参数的事件监听器

function checkUsername(e){
	var target = e.target;       //获取事件的目标
}
var el = document.getElementById('username');
el.addEventListener('blur',checkUsername,false);

带参数的事件监听器

function checkUsername(e,minLength){
	var target = e.target;       //获取事件的目标
}
var el = document.getElementById('username');
//事件对象的引用自动传递给匿名函数，作为命名寒暑的第一个参数来传递
el.addEventListener('blur',function(e){       
	checkUsername(e,5);     //命名函数收到作为第一个参数传入的事件对象的引用
},false);

IE5～IE8的事件监听器语法

属性 IE5～IE8中目标
target srcElement 事件的目标（与用户进行交互的具体元素）
ype type 事件类型
ancelable 不支持是否可以撤销事件在这个元素上的默认行为

方法 IE5～IE8中目标
reventDefault() returnValue 撤销这个事件的默认行为
topPropagation() cancelBubble 停止事件继续冒泡/向下捕获的过程

属性	IE5～IE8中	目标
target	srcElement	事件的目标（与用户进行交互的具体元素）
ype	type	事件类型
ancelable	不支持	是否可以撤销事件在这个元素上的默认行为

方法	IE5～IE8中	目标
reventDefault()	returnValue	撤销这个事件的默认行为
topPropagation()	cancelBubble	停止事件继续冒泡/向下捕获的过程

IE5～IE8中的事件对象

不会自动传递给事件处理程序/监听器的函数，而是作为window对象的一个子属性存在

//获取属性：使用短路值的方法
var target = e.target||e.srcElement;

//获取事件目标的函数
function getEventTarget(e){
	//检查事件对象是否被传递给函数
	if(!e){
		//在IE8及更早版本中，参数e不会保存任何对象
		//把e设置为window对象的event子对象
		e = window.event;
	}
	return e.target||e.srcElement;
}

示例：在事件监听器中使用事件对象

这个函数拥有更强的灵活性：可以用于检测任何文本输入框中内容的长度、在IE8及之前的版本同样可以运行

//声明函数
function checkLength(e,minLength){
	var el,elMsg;
	if(!e){
		e = window.event;
	}
	//得到用户正在与之交互的元素
	el = e.target||e.srcElement;
	elMsg = el.nextSibling;

	if(el.value.length < minLength){
		elMsg.innerHTML = '用户名不应少于'+minLength+'个字符';
	}else{
		elMsg.innerHTML = '';
	}
}

var elUsername = document.getElementById('username');
if(elUsername.addEventListener){       //如果支持事件监听器
	elUsername.addEventListener('blur',function(e){
		checkLength(e,5);
	},false);
}else{                                 //否则
	elUsername.attachEvent('blur',function(e){
		checkLength(e,5);
	});
}

事件委托
- 将事件处理程序放置在一个容器元素上，使用事件对象的target属性找到发生事件的后代
- 优势
  - 适用于新的元素
  - 解决this关键字的限制
  - 简化代码，易于维护
改变默认行为
- preventDefault()
  - 作用：阻止元素的默认行为（如：点击提交表单后还停留在当前页面，而不是跳转到新页面）
  - IE8及之前版本：使用returnValue = false
```
//检查是否支持 preventDefault() 方法
if(event.preventDefault){
	event.preventDefault();
}else{ 
//不支持，则使用IE8的方式
	event.returnValue = false;
}
```
- stopPropagation()
  - 作用：阻止某个事件向其祖先元素继续冒泡传播
  - IE8及之前版本：使用cancelBubble = true
```
//检查是否支持 stopPropagation() 方法
if(event.stopPropagation){
	event.stopPropagation();
}else{ 
//不支持，则使用IE8的方式
	event.cancelBubble = true;
}
```
- 同时使用：return false;
  - 既阻止元素的默认行为，又阻止事件继续向上冒泡或向下传播
  - 可以运行在所有浏览器中
  - 解释器碰到return false;语句后，停止执行下方代码，而继续执行调用函数的代码之后的内容

示例：使用事件委托（每个列表项中都包含一个链接，用户点击链接时，从列表中移除该列表项）

delegation.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>delegation</title>
</head>
<body>
	<ul id="shoppingList">
		<li class="complete"><a href="itemDone.php?id=1"><em>fresh</em>figs</a></li>
		<li class="complete"><a href="itemDone.php?id=2">pine nuts</a></li>
		<li class="complete"><a href="itemDone.php?id=3">honey</a></li>
		<li class="complete"><a href="itemDone.php?id=4">vinegar</a></li>
	</ul>
</body>
</html>

delegation.js

//获取用户点击的元素
function getTarget(e){
	if (!e) {
		e = window.event;
	}
	return e.target||e.srcElement;
}

function itemDone(e){
	//移除列表项
	var target,elParent,elGrandparent;
	target = getTarget(e);      //获取被点击的链接项
	elParent = target.parentNode;      //获取所在列表项
	elGrandparent = target.parentNode.parentNode;    //获取所在列表
	elGrandparent.removeChild(elParent);       //移除该列表项

	//阻止默认行为：点击链接跳转到其他页面
	if(e.preventDefault){
		e.preventDefault();
	}else{
		e.returnValue = false;
	}
}

//设置事件监听器：点击时调用itemDone()
var el=document.getElementById('shoppingList');
if(el.addEventListener){
	el.addEventListener('click',function(e){
		itemDone(e);
	},false);
}else{
	el.attachEvent('onclick',function(e){
		itemDone(e)
	});
}

运行结果
- 原始页面
- 点击第二项

确定发生事件的元素

方法1：事件对象的target属性

方法2：this关键字

当没有参数传递给函数时，此方法有效

function checkUsername(){
	var elMsg = document.getElementById('feedback');
	if(this.value.length<5){             //this关键字指向事件发生的元素
		elMsg.innerHTML = '用户名不够长！';
	}else{
		elMsg.innerHTML = '';
	}
}

var el = document.getElementById('username');
el.addEventListener('blur',checkUsername,false);

当有参数传递给函数时，this关键字失效

函数的所有者不再是事件监听器绑定的元素，而是匿名函数
需要把发生事件的元素作为参数传递给函数

function checkUsername(e,minLegnth){
	var elMsg = document.getElementById('feedback');
	if(this.value.length<minLength){
		elMsg.innerHTML = '用户名不够长！';
	}else{
		elMsg.innerHTML = '';
	}
}
var el = document.getElementById('username');
el.addEventListener('blur',function(){
	checkUsername(e,5);
},false);

6.2 使用不同的事件类型

W3C DOM事件
HTML5事件：HTML5规范详细规定了浏览器应支持的和HTML相关的事件
BOM事件

1）用户界面（UI）事件

主要的UI事件

事件	说明	浏览器支持
load	web页面加载完成	附加在window对象上
unload	web页面正在加载	附加在window对象上
error	浏览器遇到JavaScript错误/有不存在的资源	不同浏览器存在不同的情况，很难依靠这种方式进行错误处理
resize	浏览器窗口大小发生变化	调整浏览器窗口大小时事件不断触发（避免在这个事件触发中使用复杂的代码）
scroll	用户使用滚动条移动页面	窗口滚动时事件不断触发（避免在这个事件触发中使用复杂的代码）

UI事件的事件处理程序/监听器附加在浏览器窗口上

示例：页面加载完后，将输入焦点设置在文本框中

.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div>
		<p>用户名：</p>
		<input type="text" id="username">
	</div>
	<script src="example.js"></script>
</body>
</html>

.js

//页面加载完前 setup()函数无效，因为它需要查找到id属性对应的元素后将焦点设置到其中
function setup(){
	var textInput  = document.getElementById('username');  //获取文本框
	textInput.focus();          //给予文本框焦点
}

window.addEventListener('load',setup,false);    //事件监听器附加到 window 对象上

运行结果：页面加载完后文本框获得输入焦点

2）焦点事件

主要的焦点事件

事件说明事件流
focus 元素得到焦点捕获
blur 元素失去焦点捕获
focusin 与focus相同冒泡、捕获
focusout 与blur相同冒泡、捕获
适用场景（表单中）
- 用户和表单中独立元素交互时，显示提示或反馈信息
- 在用户从一个空间移到另一个控件时，触发表单验证

事件	说明	事件流
focus	元素得到焦点	捕获
blur	元素失去焦点	捕获
focusin	与focus相同	冒泡、捕获
focusout	与blur相同	冒泡、捕获

示例：文本框获得、失去焦点时，在输入框下显示不同的反馈信息

.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css.css">
</head>
<body>
	<p>用户名：</p>
	<input type="text" id="username">
	<div class="feedback" id="feedback">feedback</div>
	<script src="focus-blur.js"></script>
</body>
</html>

.css

.tip{
	color: pink;
}
.feedback{
	color: gray;
}
.warning{
	color: red;
}

.js

//声明函数 checkUsername ：文本框失去焦点时触发，检查用户名长度是否足够
function checkUsername(){
	var username = el.value;
	if (username.length < 5) {
		elMsg.className = 'warning';
		elMsg.textContent = '用户名太短！';
	}else{
		elMsg.textContent = '';
	}
}
//声明函数 tipUsername ：文本框获得焦点时触发，修改元素的class属性，更新元素的内容
function tipUsername(){
	elMsg.className = 'tip';
	elMsg.textContent = '用户名不应少于5个字符！';
}

//获取元素
var el = document.getElementById('username');
var elMsg = document.getElementById('feedback');

//设置事件监听器
el.addEventListener('focus',tipUsername,false);
el.addEventListener('blur',checkUsername,false);

运行结果
- 原始页面
- 输入用户名，调用tipUsername()方法
- 失去焦点，调用checkUsername()方法
- 输入符合要求的用户名

3）鼠标事件

页面中所有元素都支持鼠标事件，这些事件都会冒泡传播

主要的鼠标事件（触屏设备上有所不同）

事件	说明	触摸
click	用户在同一个元素上按下并松开一个按键	轻点屏幕= 鼠标左键单击
dbclick	用户在同一个元素上连续两次按下并松开一个按键	两次轻点屏幕= 鼠标左键双击
mousedown	用户在一个元素上按下按键	使用 touchstart 事件
mouseup	用户在一个元素上松开按键	使用 touchend 事件
mousemove	用户移动鼠标	指针移到元素上时触发
mouseover	用户将鼠标移到一个元素上	指针移出元素时触发
mouseout	用户将鼠标从一个元素上移开	指针移动时触发

分开mousedown、mouseup的原因
- 两个事件分别处理鼠标按下、释放动作
- 通常被用于实现拖放功能，或用于游戏控件的开发

示例：通过click事件移除被添加到屏幕中的大号标签

.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script src="click.js"></script>
</body>
</html>

.js

var msg = '<div class=\"header\"><a id=\"close\" href="#"> close X </a></div>';
msg += '<div><h2>system maintenance</h2>';
msg += 'our servers are being updated between 3 and 4 am';
msg += 'during this time...</div>';

var elNote = document.createElement('div');       //创建新元素
elNote.setAttribute('id','note');         //添加id属性
elNote.innerHTML = msg;            //添加信息
document.body.appendChild(elNote);     //添加到页面中

function dismissNote(){
	document.body.removeChild(elNote);        //移除元素
}

var elClose = document.getElementById('close');     //获取已添加到页面的链接

elClose.addEventListener('click',dismissNote,false);      //监听click事件，单击后调用dismissNote()方法

运行结果
- 点击蓝色链接后页面清空

事件发生的位置：事件对象包含鼠标指针所处的位置信息
- 屏幕
  - screenX、screenY属性：显示指针在整个显示器所处的位置，从屏幕（而不是浏览器）的左上角开始计算
- 页面
  - pageX、pageY属性：显示指针在整个页面所处的位置
  - 页面的顶部可能在可见区域之外，因此即使鼠标指针位于同一个位置，页面和客户端的坐标也有可能不同
- 客户端
  - clientX、clienY属性：显示指针在整个浏览器可视区域所处的位置
  - 即使页面顶部超出可见区域，也不会影响客户端坐标

示例：在屏幕上移动鼠标时，页面上方文本框更新鼠标的位置信息

.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="body" id="body">
		<div>screenX：<input type="text" id="sx"></div>
		<div>screenY：<input type="text" id="sy"></div>
		<div>pageX：<input type="text" id="px"></div>
		<div>pageY：<input type="text" id="py"></div>
		<div>clientX：<input type="text" id="cx"></div>
		<div><clientY：<input type="text" id="cy"></div>
	</div>
	<script src="position.js"></script>
</body>
</html>

.js

var sx = document.getElementById('sx');
var sy = document.getElementById('sy');
var px = document.getElementById('px');
var py = document.getElementById('py');
var cx = document.getElementById('cx');
var cy = document.getElementById('cy');

function showPosition(){
	sx.value = event.screenX;
	sy.value = event.screenY;
	px.value = event.pageX;
	py.value = event.pageY;
	cx.value = event.clientX;
	cy.value = event.clientY;
}

var el = document.getElementById('body');
el.addEventListener('mouseover',showPosition,false);

运行结果

4）键盘事件

键盘事件

事件	说明	补充说明
input	当`<input>` `<textarea>`元素的值变化时触发	在IE8之前版本的浏览器中，使用keypress事件
keypress	建入一个字符（按住时反复触发）	发生在字符显示到屏幕上之前
keydown	用户第一次按下一个键（按住时反复触发）	发生在字符显示到屏幕上之前
keyup	用户松开一个键	发生在字符显示到屏幕上之后

键盘事件的发生顺序： keydown 、keypress 、keyup
keyCode属性：
- 使用 keydown 、keypress 事件时，事件对象有一个keyCode属性，表明用户按下了哪个键
- keyCode属性返回这个键小写字符对应的ASCII码；如果要得到具体字符，使用String对象的内置方法String.fromCharCode(event.keyCode)

示例：<textarea>元素只包含180个字符，用户输入文本时显示还能再输入多少个字符

.js

var el;

function charCount(){
	var textEntered,charDisplay,counter,lastKey;
	textEntered = document.getElementById('message').value;
	charDisplay = document.getElementById('charactersLeft');
	//计数器
	counter = (180-(textEntered.length));
	charDisplay.textContent = counter;      //显示还能输入的字符个数
	//对最后一个字符的操作
	lastKey = document.getElementById('lastkey');
	lastKey.textContent = '最后一个字符的ASCII编码：'+el.keyCode;
}

el = document.getElementById('message');
el.addEventListener('keypress',charCount,false);

5）表单事件

表单事件

事件	触发
input	`<input>`或`<textarea>`中的值发生变化；拥有contenteditable属性的元素中的值发生变化
change	复选框、单选框、单选按钮的值变化
submit	用户提交表单
reset	用户单击重置按钮
cut	用户从一个表单域剪切内容
copy	用户从一个表单域复制内容
paste	用户向一个表单域粘贴内容
select	用户在一个表单域中选中部分文本

校验：检查表单的值

示例：使用键盘事件keypress

.js

//声明变量
var elForm,elSelectPackage,elPackageHint,elTerms,elTermsHint;
elForm = document.getElementById('formSignup');     //存储元素
elSelectPackage = document.getElementById('package');
elPackageHint =document.getElementById('packageHint');
elTerms = document.getElementById('terms');
elTermsHint = document.getElementById('termshint');

//声明函数：显示选中的候选项的信息
function packageHint(){
	var package = this.options[this.selectedIndex].value;         //获取被选中的元素
	if(package == 'monthly'){
		//如果选择按月支付
		elPackageHint.innerHTML = '按年支付可节省10元！';
	}else{
		//否则
		elPackageHint.innerHTML = '明智之选！';
	}
}

//声明函数：检查用户是否勾选了“同意条款”
function checkTerms(event){
	if(!elTerms.checked){
		//如果没有被勾选
		elTermsHint.innerHTML = '您必须同意条款！';
		event.preventDefault();    //阻止表单元素的默认行为：将表单数据提交到服务器
	}
}

elForm.addEventListener('submit',checkTerms,false);         //事件监听器
elSelectPackage.addEventListener('change',packageHint,false);         //事件监听器

6）变动事件和变动观察者

当元素被添加到DOM中或从DOM中移除时，DOM的结构发生变化，触发变动事件

变动事件

事件	说明
DOMNodeInserted	一个节点被插入为另一个节点的直接子节点；如使用appendChild()、replaceChild()、insertBefore()时
DOMNodeRemoved	一个节点被从另一个节点中移除；如使用removeChild()、replaceChild()时
DOMSubtreeModified	文档发生变化
DOMNodeInsertedIntoDocument	一个节点被插入为另一个节点的后代
DOMNodeRemovedFromDocument	一个节点被从祖先节点中移除

变动观察者
- 变动事件的缺点
  - 当脚本对页面的修改过多时，会触发很多变动事件，可能造成页面速度变慢甚至失去响应
  - 事件在DOM中传播，触发更多变动事件
- 设计理念：进行响应之前等待脚本做完所有工作，然后将DOM的变化批量地报告给脚本
- 浏览器支持
  - IE11、Firefox14、Chrome27、Safari6.1、Opera15
  - 移动端浏览器：Android4.4、iOS7上的Safari

示例：使用变动事件

.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="list">
		<li>这是一个列表项</li>
	</div>
	<a href="">单击添加新的列表项</a>
	<div id="counter"></div>
	<script src="mutation.js"></script>
</body>
</html>

.js

var elList,addLink,counter;
var newEl,newText,listItems;

elList = document.getElementById('list');
addLink = document.querySelector('a');
counter = document.getElementById('counter');

//声明函数：单击链接，为列表添加添加新的列表项
function addItem(e){
	e.preventDefault();      //阻止点击链接的默认行为
	newEl = document.createElement('li');    //创建li元素
	newText = document.createTextNode('新的列表项');      //给li元素设置文本内容
	newEl.appendChild(newText);         //添加到li元素
	elList.appendChild(newEl);      //将li元素添加到列表
}

//声明函数：插入新的元素后，显示列表项的个数
function updateCount(){
	listItems = list.getElementsByTagName('li').length;
	counter.innerHTML = '列表项的个数：'+listItems;
}

addLink.addEventListener('click',addItem,false);      //监听单击事件：单击链接后添加新元素
elList.addEventListener('DOMNodeInserted',updateCount,false);        //监听插入元素事件：插入元素后统计总的元素个数

运行结果
- 原始页面
- 点击链接

7）HTML5事件

主要的页面级事件

事件	触发	浏览器支持
DOMContentLoaded	DOM树形成；在这个事件中，脚本运行早于load事件，以使页面看起来加载速度更快	Chrome0.2、Firefox1、IE9、Safari3.1、Opera9
hashchange	URL的值变化，在window对象上触发；触发后，event对象通过`oldURL` `newURL`属性保存事件发生前后的URL	IE8、Firefox20、Safari5.1、Chrome26、Opera12.1
beforeunload	页面被卸载之前，在window对象上触发	Chrome1、Firefox1、IE4、Safari3、Opera12

HTML5规范中引入了支持最新设备（手机、平板电脑）的事件，这些事件可以
- 响应手势
- 基于加速度计带来的移动场景（检测手持设备的角度变化）

示例：使用HTML5事件

//声明函数：让文本框获得焦点
function setup(){
	var textInput = document.getElementById('message');
	textInput.focus();
}

//监听事件：DOM树刚刚形成时，让文本框获得焦点
window.addEventListener('DOMContentLoaded',setup,false);

//监听事件：单击提交按钮前离开这个页面，检查用户是否真的要离开
window.addEventListener('beforeunload',function(event){
	return '尚未保存您的修改！';
},false);

6.3 示例：用户录制声音便签

用户可以输入用于显示在页面标头中的名称，然后按下录音键，同时改变展示的图片

.js

var username,noteName,textEntered,target;

username = document.getElementById('username');
noteName = document.getElementById('noteName');     //保存标签的元素
	
//声明函数：从表单输入框中复制文本，更新页面标头内容
function writeLabel(e){
	if(!e){
		e = window.event;
	}
	target = event.target||event.srcElement;     //获取事件目标
	textEntered = e.target.value;     //元素的值
	noteName.textContent = textEntered;    //更新标签内容
}

//事件监听器：将用户输入到文本框中的内容显示在页面标头
if (document.addEventListener) {
	document.addEventListener('click',function(e){
		recorderControls(e);      
	},false);
	username.addEventListener('input',writeLabel,false);
}else{
	document.attachEvent('onclick',function(e){
		recorderControls(e);
	});
	username.attachEvent('onkeyup',writeLabel);
}


//声明函数：阻止链接的默认行为
function recorderControls(e){
	if (!e) {
		e = window.event;
	}
	target = event.target||event.srcElement;    //获取目标元素
	if (event.preventDefault) {
		e.preventDefault;
	}else{
		event.returnValue = false;
	}
}

//根据用户是想要录音还是停止录音来决定调用哪个函数
switch(target.getAttribute('data-state')){
	case 'record':
		record(target);
		break;
	case 'stop':
		stop(target);
		break;
}

//声明函数：开始录音
function record(target){
	target.setAttribute('data-state','stop');
	target.textContent = 'stop';
}

//声明函数：停止录音
function stop(target){
	target.setAttribute('data-state','record');
	target.textContent = 'record';
}

小白今天睡饱了吗

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
《JS&jQuery 交互式web前端开发》（六）事件

文章目录6 事件6.1 不同的事件类型6.2 事件处理：事件触发JavaScript的过程1）过程2）将事件绑定到元素3）6 事件6.1 不同的事件类型UI事件事件说明loadweb页面加载完成unloadweb页面正在加载error浏览器遇到JavaScript错误/有不存在的资源resize浏览器窗口大小发生变化scroll用户...
复制链接

扫一扫