注册事件

给元素添加事件称为注册事件或者叫绑定事件

注册事件的两种方式

  • 传统方式

    • 利用on开头的事件
    • 特点：注册事件的唯一性（一个元素一个相同事件只能设置一个处理函数，若有多个则只会执行最后一个）

  • 方法监听注册方式

    • w3c的标准推荐方式
    • addEventListener()是一个方法
    • 特点：同个元素同一个事件可以注册多个监听器

addEventListener() 事件监听方式

语法：eventTarget.addEventListener(type, listener, useCapture)

方法将指定的监听器注册到eventTarget上
参数说明
type事件类型字符串，例如click，事件类型是字符串，必须加引号，并且不带on
listener事件处理函数，事件发生时会调用该监听函数
useCapture可选参数，是一个布尔值。默认为false

addachEvent

语法：eventTarget.attachEvent(eventNameWintOn,callback)

方法将指定的监听器注册到eventTarget上 （仅i9前的版本支持）
参数说明
eventNameWintOn事件类型字符串，比如onclick，这里需要携带on
callback事件处理函数

删除事件

语法：eventTarget.removeEventListener(type, listener[, useCapture])

示例：

<body>
    <button>按钮</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', fn)

        function fn() {
            alert('这是按钮');
            btn.removeEventListener('click', fn)
        }
    </script>
</body>

//当第二次点击按钮的时候不会再弹出

DOM事件流

事件流是从页面接受事件的顺序

事件发生时会在元素节点之间按照特定的顺序传播

分为三个阶段：

捕获阶段>当前目标阶段>冒泡阶段

如果eventTarget.addEventListener(type, listener, useCapture)的useCapture为true则处于捕获阶段：document->html->body->father->son

示例

<body>
    <div class="father">
        <button>按钮</button>
    </div>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', fn, true);
        var fa = document.querySelector('.father');
        fa.addEventListener('click', father, true)

        function fn() {
            alert('这是按钮');
            btn.removeEventListener('click', fn)
        }

        function father() {
            alert('father');
            btn.removeEventListener('click', father)
        }
    </script>
</body>

//点击按钮依次弹出father->这是按钮
如果eventTarget.addEventListener(type, listener, useCapture)的useCapture为false或者省略则处于冒泡阶段 执行：son->father->body->html->document

示例

<body>
    <div class="father">
        <button>按钮</button>
    </div>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', fn);
        var fa = document.querySelector('.father');
        fa.addEventListener('click', father)

        function fn() {
            alert('这是按钮');
            btn.removeEventListener('click', fn)
        }

        function father() {
            alert('father');
            btn.removeEventListener('click', father)
        }
    </script>
</body>

//依次弹出 这是按钮 -> father
onclick和addchEvent只会得到冒泡阶段

事件对象

事件对象写到监听函数的小括号里面，当形参来看

事件对象只有有了事件才会存在，系统自动创建的，不需要传递参数

事件对象是事件的一系列相关数据的集合

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

事件对象属性方法说明
e.target返回触发事件的对象 标准
e.type返回事件的类型 比如click mouseover 不带on
e.stopPropagation()组织冒泡 标准
e.preventDefault()该方法阻止默认事件（默认行为） 标准 比如禁止链接跳转
e.srcElement返回触发事件的对象 非标准 IE6-8使用
e.cancelBubble该属性阻止冒泡 非标准 IE6-8使用
e.returnValue该方法阻止默认事件（默认行为） 非标准 IE6-8使用

e.target和this的区别

e.target:返回的是触发事件的对象

this：返回的是绑定事件的对象

<body>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            console.log(this);
            console.log(e.target);
        })
    </script>
</body>

//第一个log输出的是ul，第二个输出的li

阻止事件冒泡

标准方法：利用事件对象里面的 stopPropagation()方法
<body>
    <div class="father">
        <button>按钮</button>
    </div>
    </div>
    <script>
        var son = document.querySelector('button');
        var father = document.querySelector('.father');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation();
        });
        father.addEventListener('click', function() {
            alert('father');
        })
    </script>
</body>

//点击按钮只会弹出son，不会再弹出father

事件委托

不用给每个子节点单独设置监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            var text = e.target.innerHTML;
            alert(text)
        })
    </script>
</body>

//点击1弹出的为1，点击2弹出的为2

鼠标事件

鼠标事件触发条件
onclick鼠标点击触发
onmouseover鼠标经过触发
onmouseout鼠标离开触发
onfocus获得鼠标焦点触发
onblur失去鼠标焦点触发
onmousemove鼠标移动触发
onmouseup鼠标弹起触发
onmousedown鼠标按下触发

禁止鼠标右键

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

禁止鼠标选中

selectstart

鼠标事件对象

键盘事件

键盘事件对象

keycode属性可以得到相应键的ASCII码值
    <script>
        document.addEventListener('keyup', function(e) {
            console.log(e.keyCode);
        })
    </script>

//按a或者A都是输出65
keypress区分字母的大小写
    <script>
        document.addEventListener('keypress', function(e) {
            console.log(e.keyCode);
        })
    </script>
    
 //按a输出97，按A输出65

按下s键，光标聚焦到搜索框案例 

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

最后修改：2022 年 01 月 26 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏