注册事件

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

注册事件的两种方式

  • 传统方式

    • 利用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>

Last modification:January 26, 2022
如果觉得我的文章对你有用,请随意赞赏