第七次前端培训(JavaScript的基础语法(三)及JS事件)

3.10 内置对象
Arguments只在函数内部定义,保存了函数的实参
Array数组对象
Date日期对象,用来创建和获取日期
Math数学对象
string字符串对象,提供对字符串的一系列操作

3.10.1 String

charAt( idx)返回指定位置处的字符
indexOf(Chr)返回指定子字符串的位置,从左到右。找不到返回-1
substr(m, n)返回给定字符串中从m位置开始,取n个字符,如果参数n省略,则意味着取到字符串末尾。
substring(m,n)返回给定字符串中从m位置开始,到n位置结束,如果参数n省略,则意味着取到字符串末尾。
toLowerCase()将字符串中的字符全部转化成小写。
toUpperCase()将字符串中的字符全部转化成大写。
length属性,不是方法,返回字符串的长度。

3.10.2 Math

Math . random()随机数
Math . cell()向上取整,大于最大整数
Math . floor( )向小取整,小于最小整数String

3.10.3 Date

//获取日期
。getFullYear()。getMonth()。getDate()。getHours( )。getMinutes( )。getSeconds( )//设置日期
。setYear()
。setMonth()
。setDate( )
。setHours()
。setMinutes()
。setSeconds()
。toLoacaleString()转换成本地时间字符串

说明:
· getMonth():得到的值:0~11 (1月~12月)
· setMonth():设置值时0~11
· toLocaleString()∶可根据本地时间把 Date对象转换为字符串,并返回结果。

3.11 对象
3.11.1 对象的创建

Js创建自定义对象,主要通过三种方式:字面量形式创建对象、通过new Object对象创建、通过object对象的create方法创建对象。
1.字面量形式创建

var对象名={};//创建一个空的对象
var对象名={:,2:2...}
var obj = {
	'name' : 'hello',
	age : 12sayHello : function ( ) {
		console . log("我是对象中的方法" );
	},
	courses : {
		javase : 4,
		javascript : 3
	},
	isLike : true,
	members : [
		{name : "小红" , age : 20} ,
		{name : “小绿" , age : 22},
		{name : “小蓝" , age : 27},
		{name : "小黄"}
	]
};

2.new Object 创建

var对象名= new 0bject(); //创建一个空的对象
var obj = new 0bject( );
obj.name = 'zs ';
obj.age = 18;
console.log(obj);

3. object对象的create方法创建

var对象名= Object.create(null);
var obj = Object.create(null);
3.11.2.对象的序列化和反序列化

序列化,即将JS对象序列化为字符串;
反序列化,即将字符串反序列化为JS对象。
JS中通过调用JSON方法,可以将对象序列化成字符串,也可以将字符串反序列化成对象。

//序列化对象,将对象转为字符串
JSON . stringify(object) ;
//反序列化,将一个Json字符串转换为对象。
JSON . parse(jsonStr ) ;
3.11.3.this

this是JavaScript语言的一个关键字。
它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。
随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this 指的是,调用函数的那个对象。
1.在函数中使用this
在函数中使用this属于全局性调用,代表全局对象,通过window对象来访问。

function test () {
	this.x = 1;
	console. log (this.x );
}
test( );
console.log(x); //相当于定义在全局对象上的属性

var x = 10;
console. log(x) // 10
function test ( ){
	console. log (this.x) // 10
	this.x = 1;
	console.log (this.x) // 1
	console. log(this)
}

test( );
console.log(x); // 1
console. log(this);

2.在对象中使用this
在对象中的函数使用this,代表当前的上级对象。

var o={
		name:"zhangsan",
		age:18,
		sayHello:function(){
			console.log("你好呀~");
			console.log(this);
		}
}

4. JS事件

4.1.事件

····事件(Event)是JavaScript 应用跳动的心脏,进行交互,使网页动起来。当我们与浏览器中 Web页面进行某些类型的交互时,事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是Web浏览器中发生的事情,比如说某个Web页面加载完成,或者是用户滚动窗口或改变窗口大小。
····通过使用JavaScript,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应。

4.2.作用

(1)验证用户输入的数据。
(2)增加页面的动感效果。
(3)增强用户的体验度

4.3.事件中的几个名词

事件源:谁触发的事件
事件名︰触发了什么事件
事件监听:谁管这个事情,谁监视?
事件处理:发生了怎么办
例如:
闯红灯 ------- 事件源:车; ······ 事件名:闯红灯;··· 监听:摄像头、交警;··· 处理:扣分罚款
单击按钮 -----事件源:按钮; ··· 事件名:单击; ····· 监听:窗口; ·············· 处理:执行函数
当我们用户在页面中进行的点击动作,鼠标移动的动作,网页页面加载完成的动作等,都可以称之为事件名称,即: click、mousemove、load等都是事件名称,具体的执行代码处理,响应某个事件的函数。

<body onload="loadWindow() ; "></body>
<script>
	function loadWindow( ){
		alert("加载窗体");
	}
< / script>
4.4.事件类型

JavaScript可以处理的事件类型为:鼠标事件—键盘事件、HTML事件。http://www.w3school.com.cn/tags/html_ref_eventattributes.asp 用+查
Window事件属性:针对window对象触发的事件(应用到标签)
Form事件:由HTML表单内的动作触发的事件(应用到几乎所有HTML元素,但最常用在form元素中)
Keyboard 事件:键盘事件
Mouse事件:由鼠标或类似用户动作触发的事件
Media事件:由媒介(比如视频、图像和音频)触发的事件(适用于所有HTML元素,但常见于媒介元素中,比如audio、embed 、 img 、object以及video )

几个常用的事件:
onclick . onblur . onfocus . onload . onchange
onmouseover、onmouseout、onkeyup、onkeydown

onload当页面或图像加载完后立即触发
onblur元素失去焦点
onfocus元素获得焦点
onclick鼠标点击某个对象
onchange用户改变域的内容
onmouseover鼠标移动到某个元素上
onmouseout鼠标从某个元素上离开
onkeyup某个键盘的键被松开
onkeydown某个键盘的键被按下
4.5.事件流和事件模型

····我们的事件最后都有一个特定的事件源,暂且将事件源看做是HTML的某个元素,那么当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会受到该事件,这个传播过程称为DOM事件流。

···事件顺序有两种类型:事件捕获和事件冒泡。

···冒泡和捕获其实都是事件流的不同表现,这两者的产生是因为IE和Netscape两个大公司完全不同的事件流概念产生的。(事件流:是指页面接受事件的顺序)IE的事件流是事件冒泡,Netscape的事件流是事件捕获流。

4.5.1 事件冒泡

····IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接受,然后逐级向上传播到较为不具体的节点(文档)。例如下面的:

< ! DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript</title>
	</head>
	<body>
		<div id="myDiv">Click me</div>
	</body>
</html>

如果点击了页面中的div元素,那么这个click事件会按照如下顺序传播:

1、<div>
2、<body>
3、<html>
4、document

····也就是说,click事件首先在div元素上发生,而这个元素就是我们单击的元素。然后,click事件沿DOM树向上传播,在每一级节点上都会发生,直到传播到document对象。
····所有现代浏览器都支持事件冒泡,但在具体实现上还是有一些差别。

4.5.2 事件捕获

Netscape提出的另一种事件流叫做事件捕获,事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。还以前面的例子为例
那么
单击div元素就会按下列顺序触发click事件:

1、document
2、<html>
3、<body>
4、<div>

····在事件捕获过程中,document对象首先接收到click事件,然后沿DOM树依次向下,一直传播到事件的实际目标,即div元素。
····虽然事件捕获是Netscape唯一支持的事件流模式,但很多主流浏览器目前也都支持这种事件流模型。尽管"DOM2级事件"规范要求事件应该从document对象开始时传播,但这些浏览器都是从window对象开始捕获的。

4.5.3 DOM事件流

"DOM2级事件"规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获阶段,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段,可以在这个阶段对事件做出响应。

4.6.事件处理程序

事件就是用户或浏览器自身执行的某种动作。例如click、load和mouseover都是事件的名字,而响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字以"on"开头,因此 click.事件的事件处理程序就是onclick,为事件指定处理程序的方式有好几种。
在这里插入图片描述

4.6.1.HTML事件处理程序

某个元素支持的每种事件,都可以用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码:

<input type="button" value="Press me" onclick="alert( 'thanks ' );"/>

这样做有一些缺点,例如耦合度过高,还可能存在时差问题(当用户点击按钮时,处理函数还未加载到,此时处理函数是单独写的一段JS代码),而且在不同的浏览器上可能会有不同的效果。

4.6.2.DOMo级事件处理程序

通过JavaScript 指定事件处理程序的传统方式,就是将一个函数赋值给一个事件处理程序属性。这种方式被所有现代浏览器所支持。这种方式首先必须取得一个要操作的对象的引用,每个元素都有自己的事件处理程序属性,这些属性通常全都小写,例如onclick,然后将这种属性的值设为一个函数,就可以指定事件处理程序了。例如:

<body>
	<button id="myBtn">按钮</ button>
	<script type="text/javascript">
		var btn = document. getElementById ( ' myBtn ' );
		btn.onclick = function( ){
			console. log( ' you click a button ' );
		}
	</script>
</body>

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。而且,只能为同一个元素的同一个事件设定一个处理程序(覆盖),也可以通过删除DOMO级方法指定的事件处理程序,只要将属性值设为null即可:

btn.onclick = null
4.6.3.DOM2级事件处理程序

"DOM2级事件"定义了两个方法,用于处理指定和删除事件处理程序的操作: addEventListener()和
removeEventListener()。所有DOM节点都包含这两个方法,并且他们都接受3个参数:︰要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true,则表示在捕获阶段调用事件处理程序;如果是false则表示在冒泡阶段调用事件处理程序。

<body>
	<button id="myBtn">按钮</ button>
	<script type="text /javascript ">
		var btn = document. getElementById ( ' myBtn ' )
		
		btn.addEventListener ( 'click ' ,function( ){
			alert( 'you add a eventListener by DOM2')
		} , false)
		
		btn .addEventListener( 'click ' ,function( ){
			alert( ' you add a eventListener by DOM2 again' )
		} , false)
		
		function thread(){
			alert( 'you add a eventListener by DOM2第三次')
		}
		btn .addEventListener ( 'click ' , thread , false)
		btn . removeEventListener( 'click ' ,thread , false)
	< / script>
< / body>

这种方式可以为同一个元素的同一个事件添加多个处理函数。还可删除事件处理函数,注意,在删除的时候,不能删除匿名处理函数。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值