鼠标事件
鼠标的拖拽事件
拖拽的流程：
（1）onmousedown：当鼠标在被拖拽元素上按下时，开始拖拽；
（2）onmousemove：当鼠标移动时被拖拽元素跟随鼠标移动；
（3）onmouseup：当鼠标松开时，被拖拽元素固定在当前位置。
鼠标的滚轮事件
onmousewheel：鼠标滚轮滚动的事件，会在滚轮滚动时触发
DOMMouseScroll：在火狐中需要使用 DOMMouseScroll 来绑定滚动事件。注意该事件需要通过addEventListener()函数来绑定。
键盘事件
注意：键盘事件的事件元素通常都是document
onkeydown：按键被按下。
onkeyup：按键被松开。
onkeypress:生成一个字符时触发
<body>
<script>
document.onkeydown = function(event) {
event = event || window.event;
console.log('qianguyihao 键盘按下了');
};
document.onkeyup = function() {
console.log('qianguyihao 键盘松开了');
};
</script>
<input type="text" />
</body>
判断哪个键盘被按下
可以通过event事件对象的keyCode来获取按键的编码。
//获取asc码值的兼容写法
var key = e.keyCode || e.which || e.charCode;
// console.log(e.keyCode);
// console.log(e.which);
// console.log(e.charCode);
事件绑定
方式一：
element.onclick = function () {
}
举例：
<body>
<button>点我</button>
<script>
var btn = document.getElementsByTagName("button")[0];
//这种事件绑定的方式，如果绑定多个，则后面的会覆盖掉前面的
btn.onclick = function () {
console.log("事件1");
}
btn.onclick = function () {
console.log("事件2");
}
</script>
</body>
DOM对象.事件 = 函数的这种绑定事件的方式：一个元素的一个事件只能绑定一个响应函数。如果绑定了多个响应函数，则后者会覆盖前者。
方式二：
element.addEventListener('click', function () {
}, false);
参数解释：
-
参数1：事件名的字符串(注意，没有on)
-
参数2：回调函数：当事件触发时，该函数会被执行
-
参数3：true表示捕获阶段触发，false表示冒泡阶段触发（默认）。如果不写，则默认为false。【重要】
举例：
<body>
<button>按钮</button>
<script>
var btn = document.getElementsByTagName("button")[0];
// addEventListener: 事件监听器。 原事件被执行的时候，后面绑定的事件照样被执行
// 这种写法不存在响应函数被覆盖的情况。（更适合团队开发）
btn.addEventListener("click", fn1);
btn.addEventListener("click", fn2);
function fn1() {
console.log("事件1");
}
function fn2() {
console.log("事件2");
}
</script>
</body>
addEventListener()这种绑定事件的方式：
- 一个元素的一个事件，可以绑定多个响应函数。不存在响应函数被覆盖的情况。执行顺序是：事件被触发时，响应函数会按照函数的绑定顺序执行。
- addEventListener()中的this，是绑定事件的对象。
addEventListener()不支持 IE8 及以下的浏览器。在IE8中可以使用attachEvent来绑定事件
取消绑定：
<script>
// 1.JS对象绑定的事件取消
document.onclick = function(){
console.log("heihei");
}
document.onclick = null;
// 2.事件监听的事件取消,必须保证回调函数是同一个
var fun = function(){
console.log("hahaha");
}
document.addEventListener("click",fun);
document.removeEventListener("click",fun);
var oBtn = document.querySelector("button");
oBtn.onclick = function(){
document.removeEventListener("click",fun);
}
</script>
事件委托
事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素。
比如说有一个列表 ul，列表之中有大量的列表项 <a>标签：
为每个<a>都绑定类似onMouseOver或者onClick之类的事件监听的做法过于消耗内存和性能，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul 上，然后在执行事件函数的时候再去匹配判断目标元素，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function() {
// 获取父节点，并为它绑定click单击事件。 false 表示事件在冒泡阶段触发（默认）
document.getElementById('parent-list').addEventListener('click', function(event) {
event = event || window.event;
// e.target 表示：触发事件的对象
//如果触发事件的对象是我们期望的元素，则执行；否则不执行
if (event.target && event.target.className == 'link') {
// 或者写成 if (event.target && event.target.nodeName.toUpperCase() == 'A') {
console.log('我是ul的单击响应函数');
}
}, false);
};
</script>
</head>
<body>
<ul id="parent-list" style="background-color: #bfa;">
<li>
<p>我是p元素</p>
</li>
<li><a href="javascript:;" class="link">超链接一</a></li>
<li><a href="javascript:;" class="link">超链接二</a></li>
<li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
</body>
为父节点注册 click 事件，当子节点被点击的时候，click事件会从子节点开始向父节点冒泡。父节点捕获到事件之后，开始执行方法体里的内容：通过判断 event.target 拿到了被点击的子节点<a>。从而可以获取到相应的信息，并作处理。
换而言之，参数为false，说明事件是在冒泡阶段触发（子元素向父元素传递事件）。而父节点注册了事件函数，子节点没有注册事件函数，此时，会在父节点中执行函数体里的代码。
总结：事件委托是利用了冒泡机制，减少了事件绑定的次数，减少内存消耗，提高性能。
标签：function,12,console,log,绑定,事件,event From： https://www.cnblogs.com/qianfanqf/p/16969911.html