1.事件和事件类型
事件发生必须绑定
绑定事件
1.内联模式
2.外联模式/脚本模式(最多)
绑定事件格式：元素节点.on+事件类型 = 匿名函数
click 事件类型
onclick 事件处理函数
事件类型的种类
一、鼠标事件（可以绑定任意的元素节点上)
- click 单击
- dblclick 双击
- mouseover 鼠标移入 经过子节点会重复触发
- mouseout 鼠标移出 经过子节点会重复触发
- mousemove 鼠标移动（会不停的触发）
- mousedown 鼠标按下
- mouseup 鼠标抬起
- mouseenter 鼠标移入 经过子节点不会重复触发 IE8以后才有
- mouseleave 鼠标移出 经过子节点不会重复触发
二、键盘事件（表单元素，全局window）
- keydown 键盘按下（如果按下不放手，会一直触发）
- keyup 键盘抬起
- keypress 键盘按下（只支持字符键）
三、HTML事件
1.window事件
- load 当页面加载完成后会触发
- unload 当页面解构的时候触发（刷新页面，关闭当前页面）IE浏览器兼容
- scroll 页面滚动
- resize 窗口大小发生变化的时候触发
2.表单事件
- blur 失去焦点
- focus 获取焦点
- select 当我们在输入框内选中文本的时候触发
- change 当我们对输入框的文本进行修改并且失去焦点的时候
【注】必须添加form元素上- submit 当我们点击submit上的按钮才能触发
- reset 当我们点击reset上的按钮才能触发
2.事件获取方式
固定写法 首先要获取事件，才能调用事件对象的属性
var e = ev ||window.event;
事件对象：
button属性
0 左键
1 滚轮
2 右键
获取当前鼠标的位置：（原点位置不一样）
clientX clientY 原点位置：可视窗口的左上角为原点 无单位
pageX pageY 原点位置：整个页面的左上角为原点（包含滚出去的滚动距离）
screenX screenY 原点位置：电脑屏幕的左上角
window.onload = function () {
var oBtn = document.getElementById("btn1");
oBtn.onclick = function (ev) {
var e = ev || window.event;
alert(e);
}
}
3.事件对象属性
- shiftKey 按下shifit键，为true,默认为false
- altKey
- ctrlKey
- metaKey windows系统 按下windows(开始键) 为true
macos 系统 按下command 为true
[注]和别的操作进行组合，形成一些快捷键操作
键盘事件对象
keyCode 键码
which
格式： var which=e.which ||e.keyCode
返回值：键码返回的是大写字符的ASCII值，不区分大小写
[注]只在Keydown下支持
charCode 字符码
which
格式：var which=e.which||e.charCode;
返回值：字符码区分大小写，返回当前按下键的ASCII值，不支持功能键
[注]只在keypress下支持，不支持字符串
4.事件冒泡和触发对象
target 目标对象/触发对象 事件对象的属性
【注】这个事件是由谁引起的
IE8以下不兼容 window.event.srcElement;
var target = e.target || window.event.srcElement;
this永远指向当前函数的主人
事件冒泡 浏览器天生带有 由里向外逐级触发
事件捕获：由外到里逐级触发
阻止事件冒泡：浏览器兼容问题
事件对象的属性和方法：
cancelBubble = true stopPropagation()
//封装跨浏览器兼容的阻止事件冒泡
function stopBubble(e) {
e.stopPropagation ? stopPropagatione() : e.stopBubble = true;
}
}
5.阻止默认行为和超链接
官方的右键 return false 添加方法
阻止超链接的默认行为：
1. 简陋的阻止a链接默认行为的方式
缺点：运行到了return 后续的内容我们就执行不到了
2. 规范的方法
e.preventDefault();
window.event.returnValue = false;
需要兼容
function preDef(e) {
if (e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue = false;
}
}
6.拖拽
拖拽：（拖拽的三剑客） 伪代码（代码草稿）
mousedown
纪录鼠标按下位置和被拖拽物体的相对距离
var offSetX = e.clientX - node.offsetLeft;
var offSetY = e.clientY - node.offsetTop;
mousemove
一致保持，相对距离
node.style.left = e.clientX - offSetX +“px”;
node.style.top = e.clientY - offsetY +“px”;
mouseup
取消拖拽 document.onmousemove = null;
输出当前窗口的高
var windowWidth = document.documentElement.clientWidth ||document.
body.clientWidth;
7.事件委托
- 浪费
- 后添加的li节点没有点击事件
事件委托实现步骤：
1. 找到当前节点的父节点或者祖先节点
2. 将事件添加到你找到的父节点或者祖先节点上
3. 找到触发对象，判断触发对象是否是想要的触发对象，进行后续操作
window.onload = function () {
var oUl = document.getElementById("ul1");
oUl.onclick = function (ev) {
var e = ev || window.event;
var target = e.target || window.event.srcElement;
if (target.nodeName.toLowerCase() == 'li') {
target.style.backgroundColor = "red";
}
}
var oBtn = document.getElementById("btn1");
var i = 6;
oBtn.onclick = function () {
var newNode = document.createElement("li");
newNode.innerHTML = i++ * 1111;
oUl.appendChild(newNode);
}
}
8.事件监听器
传统事件绑定
(1)重复添加，覆盖
(2)不能精确的删除事件上的某一个函数事件监听器(低版本不兼容) 可以精确的删除添加某一个函数
addEventListener()
格式：node.addEventListener(“click”)
参数：
第一个参数 事件类型
第二个参数 绑定函数
第三个参数 布尔值 true 事件捕获 flase 事件冒泡 默认removeEventListener()
格式：node.removeEventListener()
参数：
第一个参数 事件类型
第二个参数 删除函数名字
上两个需要和下两个兼容
attachEvent(“on”+evenType,funcName);
detachEvent(“on”+evenType,funcName);
function addEvent(node, evenType, funcName) {
if (node.addEventListener) {
node.addEventListener(evenType, funcName, false);
} else {
node.attachEvent("on" + evenType, funcName);
}
}
function removeEvent(node, evenType, funcName) {
if (node.removeEventListener) {
node.removeEventListener(evenType, funcName);
} else {
node.detachEvent("on" + evenType, funcName);
}
}
9.正则表达式
- 通过new去声明正则表达式
第一个参数：正则表达式的主体 字符串
第二个参数：修饰符 i g 修饰符没有顺序
var box1=new RegExp(“hello”,“ig”);
alert(box1);- 省略new运算符去声明正则表达式
var box1=RegExp(“hello”,“ig”);
alert(box1);- 通过常量赋值
var box1=/hello/ig;
alert(box1);正则表达式对象只有两个方法
test
格式：正则.test()
功能：在字符串中匹配这个正则是否存在
返回值：如果匹配成功返回true，匹配失败返回false
var str = “how are you”;
var box = /are/;
alert(box.test(str));
exec
格式：正则.exec(字符串)
功能：在字符串中匹配这个正则是否存在
返回值：返回值匹配到的串，匹配成功，返回一个装有字符串的数组, 匹配失败，返回null
var str = “how are you”;
var box = /are/i;
alert(box.exec(str)[0]);
正则能使用字符串的方法
- match()
格式：字符串.match(正则)
功能：在字符串匹配是否有符合正则表达式
返回值：匹配成功，返回装有匹配到子串的数组; 匹配失败，返回null- replace()
格式：字符串.replace(oldStr/正则，newStr);
功能：用newStr将OldStr替换
返回值：替换成功的新字符串- split()
格式：字符串.splite（分隔符/正则）
功能：用分隔符将原字符串进行分割
返回值：分割剩下的子串组成的数组- search()
格式：字符串.search(子串/正则)
功能：找到符合条件的子串第一次出现的位置
返回值：如果找到，返回>=0的下标; 否则，返回-1
/* var str = “how are Are ARE you”;
var arr = str.split(“are”);
alert(arr); */
正则_元字符
元字符：在正则表达式中有特殊含义的字符
单个数字和字符的原字符
. 匹配单个的任意字符
[] 匹配单个范围内的字符
[0-9]
[a-zA-Z0-9] 匹配单个的数字、字母下划线
[^] 匹配任意一个除括号范围内的字符
[^0-9] 匹配任意一个非数字字符
\w 匹配单个的数字、字母下划线 等价于[a-zA-Z0-9]
\W 匹配单个非数字、字母下划线
\d 匹配单个数字 等价于[0-9]
\D 匹配单个非数字 等价于[^0-9]
var box = /g[^0-9]ogle/
重复字符 x(任意的单个字符)
x? 匹配0个或者1个x
x+ 匹配至少一个x字符
x* 匹配任意个x字符
x{m,n} 匹配至少m个，最多n个字符，包括n
x{n} 必须匹配n个x字符
(xyz)+ 小括号括起来的部分是当作单个字符处理
空白字符
\s 匹配任意单个的空白字符
\S 匹配任意单个非空白字符
锚字符
^ 行首匹配 必须以这个正则开头
$ 行尾匹配 必须以这个正则结尾
替代字符 ｜
i 忽略大小写 g全局匹配 m换行匹配
转义字符
. 代表本来.字符
* 代表本来是*字符
//验证是否是正确的手机号码
var box=/^1\d{10}$/;
//验证是否是正确的身份证号码
var box=/^[0-9]\d{16}(\d|x)$/;
//验证字符串是否是纯中文
var box=/^[\u4e00-\u9fa5]+$/;
10.localStorage
本地存储技术：
(1) localStorage(IE8以下不兼容)
1. 永久存储
2. 最大可以存储5K 客户端的一个微型数据库
3. 只能存储string
localStorage的局限
1. 浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2. 前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的
JSON对象类型需要一些转换
3. localStorage在浏览器的隐私模式下面是不可读取的
4. localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5. localStorage 不能被爬虫抓取到
6. localStorage属于永久性存储
(2) cookie
1. 可以设置过期时间
2. 最大可以存4KB
3. 每一个域名下面最多可以存储50条数据
(3) sessionStorage (结合后台使用)
存储数据更小，空间更少，只能保留一次对话
localStorage 对象
setItem(name,value)
getItem(name)
removeItem(name)
if (!window.localStorage) {
alert("当前页面不支持localStorage");
} else {
localStorage.setItem("a", "1");
localStorage.b = "2";
localStorage["c"] = "3";
alert(localStorage.getItem("b"));
localStorage.removeItem("a");
}
11.this指向
this指向当前函数的主人
每一个函数都有一个内置的变量this，this指向当前函数的主人，函数的主人要根据上下文关系进行判断
常见this
全局函数：指向window
对象：指向当前对象的主人
事件绑定：指向当前事件
强制类型转换
call 格式：函数名.call()
参数
第一个参数：传入该函数this指向的对象，传入什么强制指向什么
第二个参数开始：将原函数的参数往后顺延一位
apply 格式：函数名.apply()
参数：
第一个参数：传入该函数this指向的对象，传入什么强制指向什么
第二个参数：数组 数组，放入我们原有所有的参数
bind 预设this指向
function show(x, y) {
alert(this);
alert(x + "," + y);
}
// show.call("call", 20, 40); //call//20,40
show.apply('apply', [20, 40]); //call//20,40
var res = show.bind("bind");
//alert(res);//function () { [native code] }
res(40,50);//bind //40,50
//简化 show.bind(“bind”)(40,50);
//Math.min(10,20,30)
var arr = [10, 20, 30, 40];
alert(Math.min.apply(null, arr));
12.let const关键字
let 关键字是用来声明变量 更过分，只要遇到大括号就形成作用域
【注】let关键字声明的变量，所在作用域叫做块级作用域
var 关键字声明变量 将变量或者形参所在函数的大括号作为作用域处理
const 声明变量，变量值只能在声明的时候确定，后续是没有办法修改的
【注】const声明变量 不是常量,声明变量不能改（变量没有办法改）
13.箭头函数
箭头函数：新潮的函数写法
[注] 适当的省略函数中的function和return关键字
箭头函数需要注意的部分
1. 箭头函数，不能用new
2. 箭头，如果返回值是一个对象，一定要加（）
3. 箭头函数中的this，指向的是上一层函数的主人
*/
/* 1.无参数无返回值 */
function show() {
alert("hello world");
}
var show = () => {
alert("hello world");
};
/* 2.有1个参数无返回值 */
function show(num) {
alert(num);
}
var show = (num) => {
alert(num);
};
/*3. 有一个参数有返回值 最有价值*/
function add(x) {
return x + 10;
}
var add = x => x + 10;
/* 4.多个参数，无返回值 */
function show(x, y) {
alert(x + y);
}
var show = (x, y) => {
alert(x + y);
};
var arr = [10, 29, 49,50];
/* var newArr=arr.filter(function(item){
return item>20;
}) */
var newArr = arr.filter(item => item > 20);
var newArr=arr.map(item=>item*1.3);
4726
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
