事件监听方式

注册事件

  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>