四种打开窗口方式
//window.open(url, target);
//window.close();
//在当前窗口打开,可后退
//原理:自动使用当前窗口的name
HTML:<a href="url" target="_self"></a>
js:open(url, '_self');
//在当前窗口打开,禁止后退
//原理:用新url替换当前history中的url
js:location.replace(新url);
//在新窗口打开,可打开多个
//原理:不指定窗口名,每打开一个窗口,浏览器会自动随机生成内部窗口名
HTML:<a href="url" target="_blank"></a>
js:open(url, '_blank');
//在新窗口打开,只能打开一个
//原理:自定义窗口名,这个名字在内存中只能出现一次,一个名字对应一个窗口,后来打开的会覆盖先打开的窗口
HTML:<a href="url" target="自定义窗口名"></a>
js:open(url, '自定义窗口名');
history三种操作:前进、后退、刷新
//前进:history.go(1);
//后退:history.go(-1);history.go(-2);
//刷新:history.go(0);
location
//location属性
//.href:获取或设置完整的url地址
//.protocol:协议
//.host:主机名+端口号
//.hostname:主机名
//.port:端口号
//.pathname:相对路径
//.search:查询字符串参数
//.hash:锚点地址
//location方法
//在当前窗口打开,可后退
//location = url;
//在当前窗口打开,禁止后退
//location.replace(新url);
//刷新
//优先从缓存中获取资源,若缓存中没有或过期,才从服务器获取资源
//F5
//history.go(0);
//location.reload();
//无论缓存中有没有资源,都强制从服务器获取资源
//location.reload(true);
定时器
//周期性定时器
//1.定义任务函数:变化一次的函数
//function task(){...}
//2.将任务函数放入定时器中反复执行
//等待相应的ms数后,开始调用task,依次循环执行
//let timer = setInterval(task, ms);
//timer为当前定时器唯一的序号,专门用于停止定时器
//3.停止定时器
//clearInterval(timer);timer = null;
//3.1定时器自动停止
//在task中设置临界值,达到临界值,停止定时器
//3.1手动停止定时器
//通过触发事件,停止定时器
//一次性定时器
//let timer = setTimeout(task, ms);
//clearTimeout(timer);
//在task执行前,停止等待,不再执行任务
navigator对象
//1.判断是否启用cookie
let bool = navigator.cookieEnabled;
cookie是客户端持久存储用户私密信息的小文件
//2.判断是否安装插件
navigator.plugins['插件名'] !== undefined
//3.判断当前浏览器名称和版本号
navigator.userAgent
event
概念:用户手动触发的、或浏览器自动触发的页面状态的改变
绑定事件处理函数:
1.在HTML中绑定事件处理函数(几乎废掉,不符合内容与行为分离的原则)
<ANY ...on 事件名="js语句"...>
2.在js中,用赋值方式绑定
ANY.on 事件名=function(){
this->ANY 当前触发事件的.前的元素
}
赋值是替换原函数,每个事件只能绑定一个处理函数
3.在js中,为元素添加事件监听对象
ANY.addEventListener('事件名', handler)
一个事件,可同时添加多个处理函数,可随时添加和移除
ANY.removeEventListener('事件名', 原handler)
如果一个处理函数可能被移除,则绑定时,就必须用有名的函数,不能用匿名函数
事件模型
当事件发生时,浏览器触发事件的过程
DOM标准认为,点在内层元素上,也等效于点在外层元素上了
3个阶段:
1.由外向内捕获各级父元素绑定的处理函数
捕获阶段,只记录处理函数,不执行
2.目标触发
目标触发,最初实际触发事件的元素
优先触发目标元素上的处理函数
3.冒泡
由内向外,按捕获阶段顺序的反向,依次触发父元素上的处理函数
事件对象:e
事件发生时,自动创建的记录事件信息的对象
创建:自动创建
获取:事件对象e总是作为处理函数的第一个参数,自动传入
取消冒泡:
e.stopPropagation()
利用冒泡:
只要多个平级子元素,要绑定相同事件时
只要在父元素上绑定一次处理函数,所有子元素自动共用
难点:
1.获取目标元素
错误:this->父元素
正确:e.target->记录了最初触发事件的函数,且不随冒泡而改变
2.鉴别e.target是否是想要的
阻值默认事件行为:
e.preventDefault()
1.<a href="#xxx"
默认:跳到锚点,在url结尾增加#xxx
2.阻止表单自动提交
自定义表单提交:
1.<input type="button" js:form.submit()
2.<input type="submit"
=>form.onsubmit():e.preventDefault()
3.HTML5中做拖拽效果时,必须阻止浏览器默认的拖拽行为