注册事件绑定事件

给元素添加事件称为注册事件或绑定事件。注册事件有两种方式传统方式、方法监听注册方式。

传统注册方式

利用on开头的事件onclick

<button onclick="alert(hi~)"></button> 
btn.onclick = function() {}

特点注册事件的唯一性。同一个元素同一个事件只能设置一个处理函数最后注册的处理函数将会覆盖前面注册的处理函数。

方法监听注册方式

addEventListener() w3c标准  推荐方式
IE9之前的IE不支持此方法可使用attachEvent()代替

btns[1].addEventListener('click',function(){
})

eventTarget.addEventListener(type,listener[,useCapture])
//eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上当该对象触发指定的事件时就会执行事件处理函数。

该方法接收三个参数

• type事件类型是字符串比如click、mouseover注意这里不要带on
• listener事件处理函数事件发生时会调用该监听函数
• useCapture可选参数是一个布尔值(默认false)。学完DOM事件流后再进一步学习

特点同一个元素同一个事件可以注册多个监听器按注册顺序依次执行。

删除事件解绑事件

传统注册方式

eventTarget.onclick = null;

<div>1</div>
<script>
    var divs = document.querySelectorAll('div');
    divs[0].onclick = function() {
        alert(11);
        divs[0].onclick = null;
</script>

方法监听注册方式

eventTarget.removeEventListener(type,listener [,useCapture]);

<div>1</div>
<script>
    divs[0].addEventListener('click',fn);// 里面的fn 不需要调用加小括号
    function fn() {
        alert(22);
        divs[0].removeEventListener('click',fn);
    }
</script>

DOM事件流

事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播这个传播过程即DOM事件流。

比如我们给一个div注册了点击事件DOM事件流分为3个阶段

• 捕获阶段网景最早提出由DOM最顶层节点开始逐级向下传播到最具体的元素接收的过程。
• 当前目标阶段
• 冒泡阶段IE最早提出事件开始时由最具体的元素接收逐级向上传播到DOM最顶层节点的过程。

        

注意

• JS代码中只能执行捕获或冒泡其中的一个阶段。
• onclick和attachEvent只能得到冒泡阶段。
• addEventListener(type,listener[,useCapture])第三个参数如果是true表示在事件捕获阶段调用事件处理程序如果是false不写就默认false)表示在事件冒泡阶段调用事件处理程序。
• 实际开发中我们很少使用事件捕获我们更关注事件冒泡。
• 有些事件是没有冒泡的比如onblur、onfocus、onmouseenter、onmouseleave

事件对象

什么是事件对象

• 官方解释event对象代表事件的状态比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。event就是一个事件对象写到我们侦听函数的小括号里面当形参来看。
• 简单理解事件发生后跟事件相关的一系列信息数据的集合都放到这个对象里面这个对象就是事件对象event它有很多属性和方法。
• 事件对象只有有了事件才会存在它是系统给我们自动创建的不需要我们传递参数。
• 这个事件对象可以自己命名比如event、evt、e等等。

<div>123</div>
<script>
    var div = document.querySelector('div');
    // 传统方式
    // div.onclick = function(event) {
    //     console.log(event);
    // }
    // 事件监听方法
    div.addEventListener('click', function(event){
        console.log(event);
    })
</script>

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

var div = document.querySelector('div');
div.addEventListener('click',function(e) {
    console.log(e.target);
    //e.target返回的是触发事件的对象元素
    //this返回的是绑定事件的对象元素
    //区别e.target点击了哪个元素就返回那个元素
    //this哪个元素绑定了这个点击事件那么就返回谁
}

<a href="https://www.baidu.com/">百度</a>
<script>
    var a = document.querySelector('a');
    a.addEventListener('click', function(e){
        e.preventDefault();
    })
    a.onclick = function(e) {
        e.preventDefault();
        // return false;//return 后面的代码不会执行,只限于传统注册方式
    }
</script>

阻止事件冒泡

阻止事件冒泡的两种方式

事件冒泡开始时由最具体的元素接收然后逐级向上传播到DOM最顶层节点。事件冒泡本身的特性会带来坏处也会带来好处需要我们灵活掌握。

标准写法利用事件对象里面的stopPropagation()方法。

<div class="father">
    <div class="son">son</div>
</div>
<script>
    var son = document.querySelector('.son');
    son.addEventListener('click',function(e) {
        alert('son');
        e.stopPropagation();
    },false);
    var father = document.querySelector('.father');
    father.addEventListener('click',function() {
        alert('father');
    },false);
    document.addEventListener('click',function() {
        alert('document');
    })
</script>

事件委托代理、委派

事件冒泡本身的特性会带来坏处也会带来好处需要我们灵活掌握。程序中也有如此场景

点击每个li都会弹出对话框以前需要给每个li注册事件是非常辛苦的
而且访问DOM的次数越多这就会延长整个页面的交互就绪时间。
<ul>
    <li>知否知否应该有弹框在手</li>
    <li>知否知否应该有弹框在手</li>
    <li>知否知否应该有弹框在手</li>
    <li>知否知否应该有弹框在手</li>
    <li>知否知否应该有弹框在手</li>
</ul>

事件委托也称事件代理在jQuery里称为事件委派。

事件委托的原理

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

以上案例给ul注册点击事件然后利用事件对象的target来找到当前点击的li因为点击li事件会冒泡到ul上ul有注册事件就会触发事件监听器。

<script>
    var ul = document.querySelector('ul');
    ul.addEventListener('click',function(e) {
        // alert('知否知否应该有弹框在手');
        e.target.style.backgroundColor = 'pink';
    })
</script>

事件委托的作用

我们只操作了一次DOM提高了程序的性能。

常用的鼠标事件

禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单主要用于程序员取消默认的上下文菜单。

document.addEventListener('contextmenu',function(e) {
    e.preventDefault();
})

禁止鼠标选中(selectstart开始选中)

document.addEventListener('selectstart',function(e) {
    e.preventDefault();
})

鼠标事件对象

event对象代表事件的状态跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent 。

<style>
    body {height: 2000px;}
</style>
<script>
    // 鼠标事件对象 MouseEvent
    document.addEventListener('click',function(e) {
        // 1.client 鼠标在可视区的x和y坐标
        console.log(e.clientX);
        console.log(e.clientY);
        // 2.page 鼠标在页面 文档的x和y坐标
        console.log(e.pageX);
        console.log(e.pageY);
        // 3.screen 鼠标在电脑屏幕的×和y坐标
        console.log(e.screenX);
        console.log(e.screenY);
    });
</script>

案例跟随鼠标移动的小天使

• 鼠标不断的移动使用鼠标移动事件mousemove。
• 在页面中移动给document注册事件。
• 图片要移动距离而目不占位置使用绝对定位即可。
• 核心原理每次鼠标移动都会获得最新的鼠标坐标把这个x和y坐标做为图片的top和left值就可以移动图片。

<style>
    img { width: 100px; height: 80px; position: absolute; }
</style>

<img src="images/angle.gif" alt="">
<script>
    var pic = document.querySelector('img');
    // mousemove只要我们鼠标移动 1px 就会触发这个事件
    document.addEventListener('mousemove',function(e) {
        var x = e.pageX;
        var y = e.pageY;
        console.log('x坐标是'+ x,'y坐标是'+ y);
        // 千万不要忘记给left和top添加 px单位
        pic.style.left = x - 50 + 'px';
        pic.style.top = y - 40 + 'px';
        // pic.style.cursor = 'none';
    }); 
</script>

 

常用的键盘事件

<script>
    // document.onkeyup = function() {
    //     alert('我弹起来了~');
    // }
    document.addEventListener('keyup',function() {
        console.log('我弹起来了~');
    })
    document.addEventListener('keydown',function() {
        console.log('我按下了down~');
    })
    document.addEventListener('keypress',function() {
        console.log('我按下了press~');
    })
</script>

注意

• 如果使用addEventListener不需要加on。
• 三个事件的执行顺序是keydown - keypress - keyup。

keyCode属性

注意

• onkeydown和onkeyup不区分字母大小写onkeypress区分字母大小写。
• 在实际开发中我们更多使用keydown和keyup它能识别所有的键包括功能键。
• Keypress不识别功能键但是keyCode属性能区分大小写返回不同的ASCII值。

<script>
    // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
    document.addEventListener('keyup', function(e) {
        console.log('up' + e.keyCode);
        //我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
        if (e.keyCode === 65) {
            alert('您按下的a键');
        } else {
            alert('您没有按下a键');
        }
    });
    document.addEventListener('keypress', function(e) {
        console.log('press' + e.keyCode);
    })
</script>

案例模拟京东按键输入内容

• 核心思路检测用户是否按下了s键如果按下s键就把光标定位到搜索框里面。
• 使用键盘事件对象里面的keyCode判断用户按下的是否是s键。
• 搜索框获得焦点使用js里面的focus()方法。

<input type="text">
<script>
    var search = document.querySelector('input');
    document.addEventListener('keyup', function(e) {
        if(e.keyCode === 83) {  // 也可以用if(e.key === 's') 
            search.focus();
        }
    });
</script>

案例模拟京东快递单号查询

当我们在文本框中输入内容时文本框上面自动显示大字号的内容。

• 快递单号输入内容时上面的大号字体盒子(con)显示这里面的字号更大。
• 表单检测用户输入给表单添加键盘事件。
• 同时把快递单号里面的值(value)获取过来赋值给con盒子(innerText)做为内容。
• 如果快递单号里面内容为空则隐藏大号字体盒子(con)盒子。
• keydown和keypress在文本框内的特点事件触发时文字还没有落入文本框中。
• keyup事件触发时文字已经落入文本框中。
• 当我们失去焦点就隐藏这个con盒子
• 当我们获得焦点并且文本框内容不为空就显示这个con盒子

<style>
    * {padding: 0;margin: 0;}
    .search {position: relative;width: 178px;margin: 100px;}
    .con {display: none;position:absolute;top:-40px;width:171px;
          border:1px solid rgba(0,0,0,.2);
          box-shadow:0 2px 4px rgba(0,0,0,.2);
          padding:5px 0;font-size:18px;line-height:20px;color:#333;
    }
    .con::before {content:'';width:0;height:0;position:absolute;
          top:28px;left:18px;border:8px solid #000;
          border-style:solid dashed dashed;
          border-color:#fff transparent transparent;
    }
</style>

<div class="search">
    <div class="con">123</div>
    <input type="text" class="jd" placeholder="请输入您的快递单号">
</div>
<script>
    var con = document.querySelector('.con');
    var jd_input = document.querySelector('.jd');
    jd_input.addEventListener('keyup', function() {
        if(this.value == '') {
            con.style.display = 'none';
        } else {
            con.style.display = 'block';
            con.innerText = this.value;
        }
    })
    jd_input.addEventListener('blur',function() {
        con.style.display = 'none';
    })
    jd_input.addEventListener('focus',function() {
        if(this.value !== '') {
            con.style.display = 'block';
        }
    })
</script>