欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨
一、注册事件
给元素添加事件：注册事件或绑定事件
传统方式
利用 on 开头的事件，如onclick
具有唯一性，同一个元素同一个事件只能设置一个处理函数，最后的会覆盖前面的
var div = document.querySelectorAll('div');
div[0].onclick = function() {
alert(11);
}
方法监听注册
addEventListener()
IE9之前的IE不支持此方法，可使用attachEvent()代替
特点:同一个元素同一个事件可以注册多个监听器按注册顺序依次执行
使用：eventTarget.addEventListener(type,listener[, useCapture])
btn[1].addEventListener('click', function () {
alert(11);
alert(22);
})
二、删除事件
解绑传统注册方式
eventTarget. onclick = null;
var div = document.querySelectorAll('div');
div[0].onclick = function() {
alert(11);
div[0].onclick = null;
}
解绑方法监听注册方式
eventTarget.removeEventListener(type，listener[,useCapture] ) ;
eventTarget.detachEvent (eventNamewithon,callback);
//这里要用函数关键字自定义函数
div[1].addEventListener('click',fn)//里面的fn,不需要调用加小括号
function fn() {
alert(22);
div[1].removeEventListener('click',fn);
}
//
div[2].attachEvent('onclick',fn1)
function fn1() {
alert(33);
div[2].datachEvent('click',fn);
}
三、DOM事件流
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
三个阶段
- 捕获阶段
捕获阶段 如果addEventListener第三个参数是 true那么则处于捕获阶段
顺序为：document -> html -> body -> father -> son - 当前目标阶段
- 冒泡阶段
冒泡阶段 如果addEventListener第三个参数是 false 或者省略 那么则处于冒泡阶段
顺序为： son -> father -> body -> html -> document
1、Js代码中只能执行捕获或者冒泡其中的一个阶段。
2、onclick和attachEvent只能得到冒泡阶段。
事件对象
//事件对象：传统
var div = document.querySelector('div');
div.onclick = function(event) {
console.log(event);
}
//事件对象：方法监听
div.addEventListener('click', function (event) {
console.log(event);
console.log(window.event);
})
//event就是一个事件对象，写到侦听函数的小括号里，当形参看
//事件对象只有有了事件才会存在，他是系统自动创建的，不需要传递参数
//事件对象是事件一系列相关数据的集合，跟事件相关的，比如鼠标点击里面就包含了鼠标的相关信息，比如坐标等
//这个事件对象我们可以自己命名比如event . evt、eI
//事件对象也有兼容性问题ie678通过window. event,兼容性写法e = e || window.event;
事件对象常见 属性和方法
//e.target 返回的是触发事件的对象（元素)
var div = document.querySelector('div');
div.addEventListener('click', function (e) {
console.log(e.target);
})
//返回事件类型 e.type;
var div = document.querySelector('div');
div.addEventListener('click', fn);
div.addEventListener('mouseover', fn);
function fn(e) {
console.log(e.type);//返回事件类型
}
//阻止默认行为 e.preventDefault()
var a = document.querySelector('a');
a.addEventListener('click',function(e) {
e.preventDefault(); //dom标准写法
})
//传统注册方式
a.onclick = function(e) {
//普通浏览器 e.preventDefault();方法
e.preventDefault();
//低版本浏览器 ie678 returnValue属性
e.returnValue;
//我们可以利用return false 也能阻止默认行为,没有兼容性问题,特点: return后面的代码不执行了，而且只限于传统的注册方式
return false;
alert('111');
}
//阻止冒泡 dom 推荐 stopPropagation()
var father = document.querySelector('.father');
father.addEventListener('click', function (e) {
alert('father');
//阻止冒泡 dom 推荐 stopPropagation()
e.stopPropagation();
// e.cancelBubble = true; //非标准
},
false);
document.addEventListener('click', function () {
alert('document');
},
false)
鼠标事件对象
//禁止选中文字:selectstart （了解）
document.addEventListener('selectstart',function(e){
e.preventDefault();
})
键盘事件对象(常用的键盘事件)
keyup 按键弹起的时候触发
keydown 按键按下的时候触发 能识别功能键
keypress 按键按下的时候触发 不能识别功能键
三个事件的执行顺序 keydown – keypress – keyup
//1. keyup 按键弹起的时候触发
document.addEventListener('keyup', function() {
console.log('我弹起了');
})
//3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keypress', function() {
console.log('我按下了press');
})
//2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keydown', function() {
console.log('我按下了down');
})
// 4. 三个事件的执行顺序 keydown -- keypress -- keyup
注意
键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
keyup 和keydown事件不区分字母大小写 a 和 A 得到的都是65
keypress 事件 区分字母大小写 a 97 和 A 65
我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
事件委托
原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
<ul>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e) {
alert('知否知否，点我应有弹框在手！');
// e.target.style.backgroundColor = 'skyblue';
})
</script>
四、面试题
一、事件委托
事件委托，又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素
上。如果子元素阻止了事件冒泡，那么委托也就没法实现了。
二、解释一下变量的提升
变量的提升是JavaScript的默认行为，这意味着将所有变量声明移动到当前作用域的顶部，并
且可以在声明之前使用变量。初始化不会被提升，提升仅作用于变量的声明。
var x = 1
console.log(x + '——' + y) // 1——undefined
var y = 2
- 点赞加关注，持续更新实用技巧、热门资源、软件教程等
- 有任何 软件 影视 教程资源 考证资料等需求留言即可
