注册事件
-
给元素添加事件，称为注册事件或者绑定事件。
-
注册事件有两种方式：传统方式和方法监听注册方式。
1.传统注册方式：
（1）利用on开头的事件，比如：onclick
（2）< button οnclick=“alert(‘hello’)”>< /button>
（3）btn.onclick = function(){ }
（4）特点：注册事件的唯一性。简单来收，就是同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
2.方法监听注册方式：
（1）W3C标准推荐的方式
（2）addEventListener()是一个方法
（3）IE9之前的IE不支持此方法，可使用attachEvent()代替
（4）特点：同一个元素同一个事件可以注册多个监听器
（5）按注册顺序依次执行
-
addEventListener事件监听方式：
//addEventListener()的语法格式如下：
eventTarget.addEventListener(type, listener[,userCapture]);
//举例：
var div = document.querySelector('div');
div.addEventListener('click',function(){
alert('Hello');
})
-
eventTarget.addEventListener()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
-
该方法接收三个参数：
1.type：事件类型字符串，比如：click、mouseover，注意这不要带on，并且该属性是字符串，一定要加引号。
2.listener：事件处理函数，事件发生时，会调用该监听函数。
3.userCapture：可选参数，是一个布尔值，默认是false。
-
attachEvent()：该特性是非标准的，尽量不要在生产环境中使用。（IE8及早期版本支持）
//attachEvent()的语法格式如下：
eventTarget.attachEvent(eventNameWithOn, callback)
-
eventTarget.attachEvent()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被触发。
-
该方法接收两个参数：
1.eventNameWithOn：事件类型字符串，比如：onclick、onmouseover，注意要带on。
2.callback：事件处理函数，当目标触发事件时回调函数被调用。
-
注册事件兼容性解决方案（了解即可）：
function addEventListener(element, eventName, fn){
//判断当前浏览器是否支持addEventListener方法
if(element.addEventListener){
element.addEventListener(eventName, fn); //第三个参数默认是false
}else if(element.attachEvent){
element.attachEvent('on' + eventName, fn);
}else{
//相当于element.onclick = fn;
element['on' + eventName] = fn;
}
}
删除事件（解绑事件）
-
删除事件的方式
1.eventTarget.onclick = null;
2.eventTarget.removeEventListener(type, listener[,userCapture]);
var div = document.querySelector('div'); div.addEventListener('click',fn); // 里面的fn不需要加小括号调用 function fn(){ alert('蟹黄堡'); div.removeEventListener('click', fn); //由于该删除事件方法中需要把元素注册的事件处理函数作 //为参数，但没法直接写，所以需要把注册事件的事件处理 //函数分开单独写。 }3.eventTarget.detachEvent(eventNameWithOn, callback);
4.删除事件兼容性解决方案（了解即可）：
function removeEventListener(element, eventName, fn){ //判断当前浏览器是否支持removeEventListener方法 if(element.removeEventListener){ element.removeEventListener(eventName, fn); //第三个参数默认是false }else if(element.detachEvent){ element.detachEvent('on' + eventName, fn); }else{ element['on' + eventName] = null; } }
DOM事件流
-
事件流描述的是从页面中接收事件的顺序。简单来说，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就是DOM事件流。
-
DOM事件流分为3个阶段：
1.捕获阶段
2.当前目标阶段
3.冒泡阶段
-
举例：一个div注册了点击事件，那么它的DOM事件流如下图所示：
- 事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点到过程。
- 事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。
注意：
- JS代码只能处于捕获或冒泡其中的一个阶段。
- onclic和attachEvent只能得到冒泡阶段。
- addEventListener(type, listener[,userCapture])第三个参数如果是ture，表示在事件捕获阶段调用事件处理程序；如果是false(不写默认就是false)，表示在事件冒泡阶段调用事件处理程序。
- 实际开发中，我们很少使用事件捕获，而是更加关注事件冒泡。
- 有些事件是没有冒泡的，比如：onfocus、onblur、onmouseenter、onmouseleave。
- 事件冒泡有利有弊，可能会带来麻烦，也可能带来意想不到的好处。
事件对象
- event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。简单理解，事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，她有很多属性和方法。
//情况1:
eventTarget.onclick = function(event){}
//情况2:
eventTarget.addEventListener('click', function(event){})
//这个event就是事件对象，还可以写成e、evt等其他自定义名称
-
这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去。
-
主要我们注册事件，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。
-
事件对象本身的获取存在兼容性问题：
1.标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获取到。
2.在IE6～8中，浏览器不会给方法传递参数，如果需要的话，需要到window.event中获取查找。
-
兼容性解决方法：
e = e || window.event;
- 事件对象的常见属性和方法：
| 事件对象属性方法 | 说明 |
|---|---|
| e.target | 返回触发事件的对象（标准） |
| e.srcElement | 返回触发对象的事件（非标准，IE6～8使用） |
| e.type | 返回事件的类型，比如：click、mouseover等，不带on |
| e.stopPropagation() | 该方法阻止冒泡（标准） |
| e.cancelValue | 该属性阻止冒泡（非标准，IE6～8使用），使用方法：e.cancelValue = true |
| e.preventDefault() | 该方法阻止默认事件（默认行为）比如，不让连接跳转或者让提交按钮不提交等（标准） |
| e.retuenValue | 该方法阻止默认事件（默认行为）比如，不让连接跳转或者让提交按钮不提交等（非标准，IE6～8使用） |
- e.target和this的区别：e.target返回的是触发事件的对象（元素）；而this返回的是绑定事件的对象（元素）。
- this和currentTarget的区别：this和currentTarget都是返回绑定事件的对象（元素），但是currentTarget有兼容性问题，IE6～8不能使用。
- return false和e.preventDefault()、e.returnValue一样，都能阻止默认行为，但是return false后面的代码将不会被执行，并且只适用于传统注册事件的方式（div.onclick = fuction() (){}）。
事件委托
- 事件委托也称为事件代理，在jQuery里面称为事件委派。
- 原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
- 作用：只需要操作一次DOM，提高了程序等性能。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e){
//1.
//alert('Hello!');
//2.
e.target.style.background = 'blue';
})
常用的鼠标事件
-
禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单。
document.addEvnetListener('contextmenu',function(e){ e.preventDafault(); }) -
禁止鼠标选中（selectstart 开始选中）
document.addEventListener('selectstart',function(e){ e.preventDefault(); }) -
鼠标事件对象（MouseEvent）
| 鼠标事件对象（属性） | 说明 |
|---|---|
| e.clientX | 返回鼠标相对于浏览器窗口可视区的X坐标 |
| e.clientY | 返回鼠标相对于浏览器窗口可视区的Y坐标 |
| e.pageX | 返回鼠标相对于文档页面的X坐标，IE9+支持 |
| e.pageY | 返回鼠标相对于文档页面的Y坐标，IE9+支持 |
| e.screenX | 返回鼠标相对于电脑屏幕的X坐标 |
| e.screenY | 返回鼠标相对于电脑屏幕的Y坐标 |
常用键盘事件
- 键盘事件
| 键盘事件 | 触发条件 |
|---|---|
| onkeyup | 某个键盘按键被松开时触发 |
| onkeydown | 某个键盘按键被按下时触发 |
| onkeypress | 某个键盘按钮被按下时触发，但是它不识别功能键，比如：ctrl、shift、箭头等 |
注意：
1.如果使用addEventListener不需要加on。
2.三个事件的执行顺序是：keydown——>keypress——>keyup。
- 键盘事件对象（KeyboardEvent）
| 键盘事件对象（属性） | 说明 |
|---|---|
| keyCode | 返回该键的ASCII值 |
注意：
1.onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写，比如按下a键或A键，keydown和keyup的keyCode都是65，而keypress则会区分，a键是97，A键是65。
2.在我们实际开发中，更多使用的是keydown和keyup，它们能识别所有的键（包括功能键）。
3.keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值。
4.可以利用keyCode返回的ASCII值来判断用户按下哪个键。
5.keydown和keypress在文本框里面的特点：它们两个事件触发的时候，文字还没有落入文本框中；而keyup事件触发的时候，文本已经落入文本框里面了。
课外知识点
-
focus()方法可以使搜索框获得焦点。比如：input.focus()。
-
通过::before或::after创建的元素的隐藏与显示和被选元素的隐藏与显示是同步的。
微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！
197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
