事件监听方式

注册事件

  1. 传统注册方式,使用on开头的,注册事件具有唯一性
  2. 方法监听方式 addEventListener() / attachEvent(),特点:同一个元素可以添加多种事件

事件监听方式

  1. addEventListener('事件类型',function(){})
  2. 里面的事件是字符型,不加on
  3. 同一个元素同一个事件可以添加多个侦听器(事件处理程序)

兼容性问题

  1. attachEvent(‘事件类型’,function(){})
  2. ie9以前支持

删除事件

  1. 传统事件解绑方法

查看实例

1
2
3
4
5
6
7
<script>
var divs =document.querySelectorAll('div');
divs[0].onclick = function(){
alert('nihao');
divs[0].onclick = null;
}
</script>
  1. 第二种removeEventListener

查看答案

1
2
3
4
5
divs[1].addEventListener('click',fn);
function fn(){
alert('nihao');
divs[1].removeEventListener('click',fn)
}
  1. 第三种使用datch

Dom事件流

  1. 捕获阶段,当前目标阶段,冒泡阶段
  2. js代码中只能执行捕获或者冒泡其中的一个阶段
  3. onclick和attachEvent只能得到冒泡阶段
  4. addEventListener看第三个参数的设置默认为false,true表示在事件捕获阶段调用事件处理程序,false表示在事件冒泡阶段调用事件处理程序
  5. 传播类型:捕获从外到里,冒泡从里到外
  6. 有些事件没有冒泡onblur,onmouseenter,onmouseleave,onfocus

事件对象

  1. 侦听函数 小括号里面的当形参来看
  2. 有兼容性问题,ie678通过window.event

查看答案

1
2
3
4
5
6
7
8
9
10
11
var divs =document.querySelectorAll('div');
divs[0].onclick = function(e){
console.log(e);
e = e || Window.event;
}

divs[1].addEventListener('click',fn);
function fn(e){
console.log(e);
e = e || Window.event;
}

常见事件对象的属性和方法

返回事件

  1. e.target 返回的是触发事件的对象元素 event,兼容性问题e.srcElement
  2. this返回的是绑定事件的对象 (类似属性currentTarget,有兼容性问题问题)
  3. e.type调用事件类型,不带on

阻止默认事件

  1. e.preventDefault() 有兼容性问题
  2. 低版本 使用returnValue
  3. 可以使用return false,没有兼容性问题,特点 return后面的代码不执行,只限制于传统的注册方式

阻止冒泡

  1. stopPropagation(),偶遇兼容性问题
  2. e.canceBubble = true 非标准的

事件委托

重点原理:不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点

常见的鼠标事件

  1. contextmenu文本菜单
  2. selectstart选中文字

查看答案

1
2
3
4
5
6
7
8
9
10
<ul>我是一段不愿意被复制的文字</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('contextmenu',function(e){
e.preventDefault();
})
ul.addEventListener('selectstart',function(e){
e.preventDefault();
})
</script>

鼠标事件对象

click

  1. e.clientX/Y 鼠标在可视区
  2. e.pageX/Y 在页面文档
  3. e.screnX/Y 相对于屏幕

mousemove

  1. 原理:获取鼠标的位置,设置元素的样式

查看答案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
img{
position: absolute;
width: 20px;
}
</style>
<img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/0/jsdelivr.jpeg" alt="">
<script>
var imgc = document.querySelector('img')
document.addEventListener('mousemove',function(e){
var x = e.pageX;
var y = e.pageY;
imgc.style.left = x +'px';
imgc.style.top = y +'px';
})
</script>

常用的键盘事件

  1. keyup按键弹起时触发
  2. keydown按下时触发,能识别功能键,优先级高
  3. keypress被按下时触发(不识别功能键ctrl,shift,左右箭头)
  4. e.keyCode 得到相应键位的ASCII值,keyup和keydown事件不区分字母大小写,keypress区分大小写

输入快捷键获得焦点实例

1
2
3
4
5
6
7
8
9
10
<input type="text">
<script>
var input = document.querySelector('input');
document.addEventListener('keyup',function(e){
console.log(e.keyCode);
if(e.keyCode === 65){
input.focus();
}
})
</script>

鼠标获取实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<style>
.box {
position: relative;
width: 150px;
margin: 6.25rem auto;
}

.con {
display: none;
position: absolute;
top: -25px;
margin: 0 0 5px 20px;
border-radius: 10px;
height: 20px;
width: 80px;
background-color: #537934;
color: #000;
font-size: 10px;
padding-left: 5px;
padding-top: 2px;
}

.con:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 5px solid #537934;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
margin: 10px auto;
bottom: -15px;
left: 20px;
}

input {
outline: none;
border-radius: 5px;
width: 150px;
height: 20px;
padding-left: 4px;
border: 2px solid #ccc;
background-color: rgba(139, 187, 50, 0.424);
}
</style>

<body>
<div class="box">
<div class="con"></div>
<input type="text" name="" id="" placeholder="请输入内容">
</div>
<script>
// 获取光标
var inputs = document.querySelector('input');
document.addEventListener('keyup', function (e) {
if (e.keyCode === 65) {
inputs.focus();
}
})
// 第二步实现浮动框显示,在检测到con中出现文字时
var box = document.querySelector('.box');
inputs.addEventListener('keyup', function () {
if (inputs.value == '') {
box.children[0].style.display = 'none';
} else {
box.children[0].style.display = 'block';
box.children[0].innerHTML = inputs.value;
}

})
inputs.addEventListener('focus', function () {
if (inputs.value !== '') {
box.children[0].style.display = 'block';
}
})
inputs.addEventListener('blur', function () {
box.children[0].style.display = 'none'
})

</script>