二 、js语法
2.5 JSON
2.5.1 JSON简介
JavaScript Object Notation，简称JSON。中文含义为“JavaScript 对象表示法”。
JSON 是一种轻量级的数据交换格式， 通常用于存储和网络传输。 另外一个数据交换格式是XML。
JSON的本质是字符串文本。
是独立的语言，易于理解，因此被任何编程语言支持。
2.5.2 JSON语法
数据是键/值对，键/值对可以嵌套。 键与值之间使用冒号分隔
数据之间使用逗号分隔
花括号保存对象，对象可以包含多个键/值对
方括号保存数组，数组可以包含多个对象
JSON对象，演示如下：
{"name": "zhangsan", "age": 21, "gender": "f"}
或
{
"name": "zhangsan",
"age": 21,
"gender": "f",
"hobby":["movie","music","book"],
"sayHi":function(){console.log(this.name)}
}
或
{
"weibo": "https://weibo.com/leiqikui",
"github": "https://github.com/leiqikui",
"qq": {
"number": "376601179",
"email": "[email protected]"
}
}注意：JSON对象不是JS对象，JS对象也不是JSON对象。只是写法相似。
JSON数组，演示如下：
[
{"name": "zhangsan", "age": 21, "gender": "f", "fn1":function(){console.log(this.name)}},
{"name": "michael", "age": 22, "gender": "m", "fn1":function(){console.log(this.name)}},
{"name": "wangwu", "age": 20, "gender": "f", "fn1":function(){console.log(this.name)}}
]
或者
["a","b","c"]2.5.3 JSON对象转JS对象
JSON对象，本质上是一个字符串；JS对象是{}形式定义的对象，可以访问属性，方法等操作。
JSON对象，如果想要转成JS对象，可以使用JS里内置函数JSON.parse().
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;2.5.4 JS对象转成JSON对象
使用内置函数JSON.stringify()。
var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}' 一个JSON格式的字符串2.5.5 JSON字符串与JS对象的区别
1）本质不同：
-
JSON是一种数据格式，是一个字符串
-
JavaScript是一种编程语言，用于编写程序代码。
2）语法不同：
-
JSON的属性名必须有双引号，值如果是字符串也必须是双引号。 值不支持函数，日期
-
JavaScript的语法更加灵活，支持多种数据类型和操作
3）用途区别：
-
JSON主要用于数据交换和存储，常用于网络传输。
-
JavaScript主要用于编程，实现网页的动态效果和功能。
2.6 运算符
2.6.1 算术运算符
+： +号两边是数字，则进行加法运算，只要有一个是字符串，就做字符串拼接操作
-：
*:
/: js中的除法运算，如右所示： 5/2 等于2.5 即正常进行除法运算
%: 5%2 等于1
++ i++ 相当于i=i+1
-- i-- 相当于i=i-1
2.6.2 关系运算符
>
>=
<
<=
==
!=
全等
===
不全等
!==用于判断两边数值的关系，返回值是boolean，要么是true，要么是false
2.6.3 逻辑运算符
&&
||
//逻辑运算符
var a = 1;
var b = 2;
var c = 3;
var d = 4;
//先验证&&
var r1 =a>b&&c++<d;
console.log(r1,c); //false 3
var r2 =a<b||c++<d;
console.log(r2,c);// true 32.6.4 条件表达式
1. 三目运算表达式
表达式？表达式1：表达式2
当问号之前的表达式成立时，就使用表达式1的结果，否则使用表达式2的结果
2. 关系运算表达式，也叫条件表达式
// 关系运算符： > >= <= < == != ,===,!==
var x1 = 4;
var x2 = 5;
var re1 = x1 == x2;
console.log(re1);
var re2=x1!=x2;
// 全等： 判断值与类型，值和类型一样时，才会返回true;
var m1 = true;
var n1 = 1;
var re3 = m1 === n1 ;
var re33 = m1==n1;
// 不全等： 只要有一个不一样，就返回true。
var re4 = m1!==n1;
console.log(re3,re4,re33);
// 支持三目运算符。
var re5= x2<x1?"王大锤":"张三";
x1 === x2;
console.log(re5);2.7 流程控制语句
2.7.1 分支结构
在 JavaScript 中，我们可使用以下分支结构的语句：
-
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if (condition){
当条件为 true 时执行的代码
}
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if (condition){
当条件为 true 时执行的代码
}else{
当条件不为 true 时执行的代码
}
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
if (condition1){
当条件 1 为 true 时执行的代码
}else if (condition2){
当条件 2 为 true 时执行的代码
}else{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
switch 语句 - 使用该语句来选择多个代码块之一来执行
switch(n){
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
2.7.2 循环结构
JavaScript 支持不同类型的循环：
-
for - 循环代码块一定的次数
for (语句 1; 语句 2; 语句 3){
被执行的代码块
}
for/in - 循环遍历对象的属性
<body>
<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person){
txt=txt + person[x];
}
document.getElementById("demo").innerHTML=txt;
}
</script>
</body>while - 当指定的条件为 true 时循环指定的代码块
while (条件){
需要执行的代码
}
do/while - 同样当指定的条件为 true 时循环指定的代码块
do{
需要执行的代码
}while (条件);
2.7.3 break和continue
break 语句用于跳出循环。
continue 语句中断当前的循环中的迭代，然后继续循环下一个迭代。
2.7.4 JS的条件表达式
boolean的true，就是true
任意非null值，都是true
null： false
"" : false
undefined: false
NaN: false
0： false
3.1 BOM模型简介
browser object model（浏览器对象模型），简称bom模型。即javascript设计了一个window对象，可以通过这个对象来操作浏览器，从而可以让js与浏览器产生交互行为。
3.2 window对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一
window的常用属性和方法
- 对话框方法
window.alert():
window.confirm():
window.prompt("sometext","defaultvalue");
- history： 历史记录
window.history.back();
window.history.forward();
window.history.go(1); // -1 表示后退， 1表示前进，0表示刷新
- location: 窗口文件地址
location.href;
location.hostname;
location.pathname;
location.port;
location.protocol;
- screen: 当前屏幕对象
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
window.screen.width;
window.screen.height;
screen.colorDepth:色彩深度
screen.pixelDepth：色彩分辨率
- navigator: 浏览器信息
navigator.userAgent;
注意:不要依赖此属性返回正确的浏览器信息。
在大多数浏览器(如Firefox, Chrome, Safari, Opera和Internet Explorer)中，返回的字符串是都是统一的。
- document: 当前窗口显示的HTML对应的文档对象
- setInterval()/clearInterval()：周期性时钟方法
- setTimeout()/clearTimeout():一次性时钟3.2.1对话框测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="testAlert()">测试alert：用于提示警告</button>
<button onclick="testConfirm()">测试确认框:有确认和取消的提示框</button>
<button onclick="testPrompt()">测试输入框</button>
</body>
<script>
function testAlert(){
window.alert("hello world") //会阻塞后续的代码执行
alert("hello js");
var name = "高圆圆";
alert(name);
console.log("micheal"); // 将内容打印到调试页面的控制台上
}
function testConfirm(){
var f = window.confirm("您确认要删除吗");
if(f){
console.log("正在向服务器提交数据....")
}else{
console.log("不删除了...")
}
}
function testPrompt(){
// 输入框: 第一个参数是提示文字， 第二个参数是输入框里的默认值。
var username = prompt("请输入用户名: ","张三");
// 输入框有确认和取消按钮，确认表示提交输入框里的信息并返回，可能是具体值，也可能是
// 空字符串。 取消按钮，提交的是null;
console.log(username);
}
</script>
</html>3.2.2 历史记录history和location
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="f1()">history</button>
<button onclick="f2()">前进</button>
<button onclick="f3()">后退</button>
<button onclick="f4()">location</button>
</body>
<script>
/*
location: window的一个属性对象，用来表示浏览器的地址信息
*/
function f4(){
console.log(window.location);
//获取具体的url;
console.log(location.href);
console.log(location.hostname);
console.log(location.pathname);
console.log(location.protocol);
//修改location的值，跳转到对应网页
location.href="http://www.baidu.com";
}
/*
history是window的一个属性，用来表示浏览器访问的历史记录
*/
function f1(){
var his = window.history;
console.log(his);
//向前
his.forward();
}
function f2(){
// history.forward(); //相当于浏览器的右箭头
history.go(1)
}
function f3(){
// history.back();//相当于浏览器的左箭头
history.go(-1);
}
</script>
</html>3.2.3 windows的screen对象
//从window上获取screen屏幕对象
console.log(window.screen.availHeight);
console.log(window.screen.availWidth);
console.log(window.screen.height);
console.log(window.screen.width);
console.log(window.screen.colorDepth);//色彩深度
console.log(window.screen.pixelDepth);//色彩分辨率
console.log(navigator.userAgent);3.3 JavaScript 计时事件
在 JavaScript中，可以做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScript 中使用计时事件是很容易的，两个关键方法是:
-
setTimeout() - 在指定的毫秒数后执行一次指定的代码。 我们可以称之为一次性时钟
-
setInterval() - 间隔指定的毫秒数重复地执行指定的代码。 我们可以称之为周期性时钟
注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。
3.3.1 setTimeout() 方法
var myVar= window.setTimeout(Function, milliseconds);
第一个参数：要执行的代码
第二个参数：执行代码的延迟时间，单位是毫秒
也可以不用声明变量；不过如果你想要取消这个时钟，就需要定义变量来存储这个时钟，以便取消。
那么，该如何停止执行呢？
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。当然，需要在setTimeout()还为执行任务前，调用该方法。
语法如下：
window.clearTimeout(timeoutVariable)
3.3.2 setInterval() 方法
window.setInterval(Function,milliseconds);
第一个参数：要执行的代码
第二个参数：重复执行的间隔时间，单位是毫秒
那么，该如何停止执行呢？
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
语法如下：
window.clearInterval(intervalVariable);
3.3.3 计时器测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="f1()">一次性时钟：让代码延迟指定的毫秒数后再执行</button>
<button onclick="f3()">取消一次性时钟</button>
<button onclick="f2()">周期性时钟：让代码延迟指定的毫秒数，并建个制定的毫秒数重复执行</button>
<p id = "p1"></p>
<button onclick="f4()">取消周期性时钟</button>
</body>
<script>
var num;
function f1(){
/*
setTimeOut(timeHandler,delay)
第一个参数：timeHandler, 要执行的代码逻辑。可以是一个函数。
第二个参数: delay,指定延迟的时间。单位是毫秒
*/
num=setTimeout(function(){
alert("Hello world")
},3000);
console.log(num);
}
function f3(){
/*
一次性时钟还可以在执行前进行取消操作的
*/
window.clearTimeout(num);
}
var p =document.getElementById("p1");
var inr;
function f2(){
/*
setInterval(timeHandler,period)
第一个参数：timeHandler, 要重复执行的代码逻辑。可以是一个函数。
第二个参数: 间隔时间，单位是毫秒
*/
inr = setInterval(function(){
var d = new Date();
var hour = d.getHours();
var min = d.getMinutes();
var second = d.getSeconds();
if(second<10){
var time = hour+":"+min+":0"+second;
}else{
var time = hour+":"+min+":"+second;
}
p.innerText = time;
},1000)
}
function f4(){
clearInterval(inr);
alert("取消");
}
</script>
</html>四 DOM模型
4.1 DOM模型简介
DOM模型，全名document object model。
javaScript将HTML的所有标记封装到一个对象(document)上,在这个对象身上维护着HTML的所有层次的标记，以及关系。这样，javaScript就可以通过document对象，来访问整个HTMl文档里的所有元素了。
整个DOM对象可以看成是一个树形结构，参考下图：
当浏览器加载页面时，会创建一个document对象，用于封装和操作当前页面的所有的HTML、CSS等代码。
js可以改变当前页面的HTML的元素
js可以改变当前页面的HTML的属性
js可以改变当前页面的CSS样式
js可以对当前页面的事件作出响应
DOM模式被构建成对象的树，这棵树的根就是document对象。提供了
查找节点
读取节点
修改节点
创建新节点
删除节点操作
4.2 DOM查找节点
如果想要操作HTML的元素，比如添加元素，删除元素等。那么就需要先查找元素。
通过 id 查找 HTML 元素
-
var x=document.getElementById("元素的id属性值") -
如果找到该元素，则该方法将以对象的形式返回该元素
-
如果未找到该元素，则返回 null。
通过标签名查找 HTML 元素
-
getElementsByTagName("标签名")：该方法可以使用document调用，也可以使用节点对象调用。
-
返回的是伪数组对象。没找到，数组长度为0。
-
伪数组可以通过下标访问元素，可以访问length属性，其他的数组方法，不能使用。
通过类名查找 HTML 元素
-
getElementsByClassName("类属性值")：该方法可以使用document调用，也可以使用节点对象调用
-
返回的是伪数组对象。
通过层次关系查找 HTML 元素
parentNode：当前节点的父节点。即上一层的节点对象
childNodes：下一层的子节点，返回的依然是一个伪数组。 注意换行特点
children:
firstChild：第一个子节点
firstElementChild
lastChild：最后一个子节点
lastElementChild:
nextSibling：返回元素的下一个兄弟节点
previousSibling：返回元素的上一个兄弟节点
4.3 元素相关信息
-
常用属性
- nodeName：节点的名称
树形中的每一个节点都是有名称的，
如果是文本节点，名称为#text
如果是文档节点，名称为#document
- nodeType: 节点的类型。返回的是一个数字
1： 元素节点
2： 属性节点
3： 文本节点
8： 注释节点
9： 文档节点
- nodeValue: 节点的值
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值- innerText:
获取的是元素中的所有文本内容
- innerHTML:
获取的是元素中的所有信息，包括标记
- getAttribute(属性名称)：根据属性名称获取属性的值
- setAttribute()：设置属性的值
- removeAttribute():
4.4 节点创建与删除
创建节点
- 创建元素节点。当然可以设置上相关属性。
document.createElement("新节点名称")
- 创建文本节点
document.createTextNode("文本内容");
添加节点
- appendChild(newNode):
将新元素作为父元素的最后一个子元素进行添加。 用父元素调用该方法
- insertBefore(newNode,reNode):
将新元素插入到某一个子元素的前面。 用父元素调用该方法
reNode：所依赖的子元素
移除节点： 如需删除 HTML 元素，您必须清楚该元素的父元素：
- removeChild(childNode)
删除节点操作，只能是删除某一个节点的子节点。
替换节点：
- replaceChild(newChild,oldChild)
使用newChild新元素，替换掉oldChild旧元素
4.5 表单操作
4.5.1 表单的获取
document.表单名称
document.getElementById(表单id值)
document.forms['表单名称']
document.forms[index索引] //从0开始
4.5.2 input的获取方式
比如 text、password、hidden、textarea等， 下面的前两种方式用的比较多。
| 获取方式 | 演示 |
|---|---|
| 通过id获取 | document.getElementById(id值) |
| 通过form.名称获取 | myform.元素名称 (name属性值) |
| 通过name获取 | document.getElementsByName(name属性值)[索引] //索引从0开始 |
| 通过tagName获取 | document.getElementByTagName(input) [索引] //索引从0开始 |
4.5.3 获取单选按钮和多选按钮
注意：name值相同的单选按钮为一组。
（1）获取按钮组
document.getElementsByName(`name值`)
（2）遍历每个按钮，并查看按钮元素的checked属性。
true表示被选中，false表示未被选中
（3）属性checked
设置选中状态： checked='checked' 或 checked='true' 或者 checked
设置未选中： 不添加checked属性，或者checked='false'
4.5.4 获取下拉菜单
1）获取select对象
var mySelect = document.getElementById('mySelect')（2）获取选中项的索引
var index = mySelect.selectedIndex;（3）获取选中项的value
var value = mySelect.options[index].value
注意： 如果没有设置value属性，则拿到的是标签体里的文本
（4）直接获取选中项的text
var text = mySelect.options[index].text（5）属性selected
设置选中状态： selected='selected' 或者 selected='true' 或 selected
设置未选中: 不设置selected属性即可。4.5.5 提交表单方式
使用普通按钮 + onclick事件+事件函数中编写代码： 函数内调用表单对象.submit()
使用submit按钮 +onlick=
return 函数()+函数中编写代码， 最后必须返回：true或者false使用submit按钮/图片提交按钮+οnsubmit=
return 函数()+函数中编写代码， 最后必须返回：true或者false
五 事件Event
5.1 事件简介
当用户在与浏览器进行交互的瞬间，或者浏览器自身发生的一些事情，我们称之为javaScript事件。
比如打开某一个网页，浏览器加载完成后会触发load事件，当鼠标悬浮于某一个元素上时会触发hover事件，当鼠标点击某一个元素时会触发click事件等等。JS与HTML之间的交互正是通过事件(Event)来实现的。或者说，事件是JavaScript和DOM之间进行交互的桥梁。
事件可以概括为以下几个部分：
事件源 ： 触发事件的 元素/标签/节点
事件类型： 触发的是什么事件，比如单击，双击，鼠标移入移出等
事件处理程序：触发事件后要执行的逻辑代码
事件监听：谁管这个事情，谁监听？
事件的作用：
1. 验证用户输入的数据
2. 增加页面的动态效果
3. 增强用户的体验度
5.2 事件模型
5.2.1 原始事件模型（DOM0级）
这是一种被所有浏览器都支持的事件模型，对于原始事件而言，没有事件流，事件一旦发生将马上进行处理，有两种方式可以实现原始事件：
（1）在html代码中直接指定属性值：
`<button id="demo" type="button" onclick="doSomeTing()" `/> （2）在js代码中为
document.getElementsById("demo").onclick = doSomeTing()优点：
所有浏览器都兼容
缺点：
1）逻辑与显示没有分离；
2）相同事件的监听函数只能绑定一个，后绑定的会覆盖掉前面的，
如：a.onclick = func1; a.onclick = func2;将只会执行func2中的内容。
3）无法通过事件的冒泡、委托等机制（后面会讲到）完成更多事情。
因为这些缺点，虽然原始事件类型兼容所有浏览器，但仍不推荐使用。
5.2.2 DOM2事件模型
此模型是W3C制定的标准模型，现代浏览器（IE6~8除外）都已经遵循这个规范。这个事件模型，引入了事件流的概念。
事件流 ，指的就是一次事件的发生包含三个过程：(1).事件捕获阶段，(2).事件目标阶段，(3).事件冒泡阶段。如下图所示:
事件捕获：
当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。
事件目标：
当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
事件冒泡：
从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。
所有的事件类型都会经历事件捕获，但是只有部分事件会经历事件冒泡阶段，例如submit事件就不会被冒泡。
标准的事件监听器该如何绑定：
-
addEventListener("eventType","handler","true|false");
-
removeEventListner("eventType","handler","true!false");
第一个参数eventType指事件类型， 注意不要加‘on’前缀，与IE下不同
第二个参数是处理函数，
第三个即用来指定是否在捕获阶段进行处理，一般设为false来与IE保持一致(默认设置)，除非你有特殊的逻辑需求。
监听器的解除也类似：
事件的传播是可以阻止的：
在W3c中，使用stopPropagation（）方法
在IE下设置cancelBubble = true；
在捕获的过程中stopPropagation（）后，后面的冒泡过程就不会发生了。
5.3 事件分类
我们知道，事件就是用户或者浏览器自身执行的某些动作，行为，例如click，load，mouseover都是事件的名字，而响应某一个事件要执行的函数，就是这个事件的事件处理程序。想要将事件处理程序与该事件关联上，或者理解为绑定，我们需要在每个事件的名字前面添加单词on。比如click事件，如果想要关联(绑定)事件处理程序，我们需要写成onclick形式。 再比如onload，onmouseover等。
我们也可以统称为绑定事件。 绑定事件分类如下：
鼠标绑定事件
| 属性 | 描述 |
|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onmousedown | 鼠标按钮被按下。 |
| onmouseenter | 当鼠标指针移动到元素上时触发。 |
| onmouseleave | 当鼠标指针移出元素时触发 |
| onmousemove | 鼠标被移动。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseup | 鼠标按键被松开。 |
键盘绑定事件
| 属性 | 描述 |
|---|---|
| onkeydown | 某个键盘按键被按下。 |
| onkepress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
表单绑定事件
| 属性 | 描述 |
|---|---|
| onblur | 元素失去焦点时触发 |
| onchange | 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) |
| onfocus | 元素获取焦点时触发 |
| onfocusin | 元素即将获取焦点时触发 |
| onfocusout | 元素即将失去焦点时触发 |
| oninput | 元素获取用户输入时触发 |
| onreset | 表单重置时触发 |
| onsearch | 用户向搜索域输入文本，并回车时触发 ( <input="search">) |
| onselect | 用户选取文本时触发 ( <input> 和 <textarea>) |
| onsubmit | 表单提交时触发 |
5.4 event对象
当事件触发后，会自动产生一个event对象。
5.4.1 常用属性
| 属性 | 描述 |
|---|---|
| bubbles | 返回布尔值，用于判断事件是否冒泡 |
| cancelBubble | 取消事件的冒泡 |
| currentTarget | 返回在事件流中触发事件的元素。 |
| target / srcElement | 返回触发此事件的元素（事件的目标节点）。 |
| type | 返回当前 Event 对象表示的事件的名称。 |
| clientX | 返回当事件被触发时，鼠标指针的水平坐标。 |
| clientY | 返回当事件被触发时，鼠标指针的垂直坐标。 |
| cancelable | 返回事件是否可以用preventDefault()方法来取消默认的动作； |
5.4.2 常用方法
| 方法 | 描述 |
|---|---|
| preventDefault() | 阻止元素默认的行为，如链接的跳转、表单的提交； |
| stopPropagation() | 阻止事件冒泡 |