Appearance
事件的默认
事件本身就是天生就有的，某些事件触发，即使你没有绑定方法，也会存在一些效果，这些默认的效果就是"事件的默认行为"
A 标签的默认行为
页面跳转
javascript
<a href="http://www.baidu.cn/" target="_blank">
百度
</a>
// target='_blank'：让其在新窗口打开
1
2
3
4
2
3
4
锚点定位(HASH 定位[哈希定位])
首先会在当前页面 URL 地址栏末尾设置一个 HASH 值，浏览器检测到 HASH 值后，会默认定位到当前页面中 ID 和 HASH 相同的盒子的位置（基于 HASH 值我们还可以实现 SPA 单页面应用）
javascript
<a href="#box">百度</a>
1
INPUT 标签
- 输入内容可以呈现到文本框中
- 输入内容的时候会把之前输入的一些信息呈现出来（并不是所有浏览器和所有情况下都有）
SUBMIT 按钮也存在默认行为
点击按钮页面会刷新
在 FORM 中设置 ACTION，点击 SUBMIT，会默认按照 ACTION 指定的地址进行页面跳转，并且把表单中的信息传递过去（非前后端分离项目中，由服务器进行页面渲染，由其它语言实现数据交互，一般都是这样处理）
javascript
<form action="http://www.baidu.cn/">
<input type="submit" value="提交">
</form>
1
2
3
2
3
如何阻止默认行为
阻止 A 标签的默认行为：很多时候我们使用 A 标签仅仅是想当做一个普通的按钮，点击实现一个功能，不想页面跳转，也不想锚点定位
在结构中阻止
javascript:void 0/undefined/null...
html
<a href="javascript:;">百度</a>
1
在 JS 中也可以阻止
给其 CLICK 事件绑定方法，当我们点击 A 标签的时候，先触发 CLICK 事件，其次才会执行自己的默认行为
javascript
link.onclick = function (ev) {
ev = ev || window.event;
return false;
};
1
2
3
4
2
3
4
javascript
tempInp.onkeydown = function (ev) {
ev = ev || window.event;
ev.preventDefault ? ev.preventDefault() : (ev.returnValue = false);
return false;
};
1
2
3
4
5
2
3
4
5
javascript
tempInp.onkeydown = function (ev) {
ev = ev || window.event;
let val = this.value.trim(), //=>TRIM 去除字符串首位空格(不兼容) this.value=this.value.replace(/^ +| +$/g,'')
len = val.length;
if (len >= 6) {
this.value = val.substr(0, 6);
//=>阻止默认行为去除特殊按键（DELETE\BACK-SPACE\方向键...）
let code = ev.which || ev.keyCode;
if (!/^(46|8|37|38|39|40)$/.test(code)) {
ev.preventDefault ? ev.preventDefault() : (ev.returnValue = false);
}
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15