DOM高级事件

最新推荐文章于 2024-09-30 15:42:36 发布

xSing1e

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量40

点赞数

文章标签：前端 javascript 开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_52310583/article/details/129540170

版权

增删改查属性操作事件操作

注册事件

传统、方法监听注册事件

传统注册事件

onclick

特点：唯一性；

同一个元素同一事件只能添加一个处理函数

方法监听注册

w3c标准

addEventListener（）；

特点：同一个元素同一个事件可以添加多个

addEventListener

eventTarget.addEv entListener(type,listener)
将指定的监听器注册到目标对象上eventTarget

listener：事件处理函数

type：事件类型字符串（加引号不带on），例如click mouseover

<body>
    <button>123</button>
    <button>456</button>
    <script>
        var bt = document.querySelectorAll('button');
        bt[0].addEventListener('click', function () {
            alert(22);
        })
//同一个元素同一个事件可以添加多个
        bt[0].addEventListener('click', function () {
            alert(363);
        })
    </script>
</body>

3.删除事件

传统

element.onclick = null;

监听方法

eventTarget.removeEv entListener(type,listener)

先封装一个函数

再在函数里移除

例如

bt[0].addEventListener('click', fn);

function fn() {

alert(22);

bt[0].removeEventListener('click',fn);

}

4.DOM事件流

事件发生时节点按照特定的顺序传播，这个传播过程，叫DOM事件流从页面

三个阶段

捕获阶段（从上往下类似于构造函数

当前目标阶段

冒泡阶段（从下往上类似于解析函数开始由

注意

js只能执行捕获和冒泡其中一个

onclick只能冒泡阶段

捕获阶段 true 从上往下执行

<body>
    <div class="farther">
        <div class="son">son
        </div>
    </div>
   <script>
        //捕获 最后为true 从上往下 document-html-body-farther-son
        //因为只有son注册了监听事件 所以只执行son
        var son = document.querySelector(".son");
        son.addEventListener('click', function () {
            alert('son');
        }, true);
        //为farther添加事件 先执行farther
        var f = document.querySelector(".farther");
        f.addEventListener('click', function () {
            alert('farther');
        }, true);
<script>
<body>

冒泡阶段 flase或者省略（一般更关注冒泡

    //冒泡阶段        
    //son-farther-body-html-document
        var son = document.querySelector(".son");
        son.addEventListener('click', function () {
            alert('son');
        }, false);
        var f = document.querySelector(".farther");
        f.addEventListener('click', function () {
            alert('farther');
        }, false);
        document.addEventListener('click', function () {
            alert('document');
        });

onblur onfocus onmouse 没有冒泡

5.事件对象

div.onclick = function(event){}

event事件对象，当一个形参看

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

系统创建不需要传递参数

必须先有事件才有事件对象

div.addEventListener('click',function(e/event){})

e.target 和 this区别

this指定绑定事件的对象

e.target返回触发事件的对象（指向点击的对象）

例如 var ul = document.querySelector('ul');
ul.addEventListener('click',function(e){
console.log(this); //给ul绑定事件返回ul
console.log(e.target); //点击li，指向li，返回li
})

常见属性方法

返回事件类型 click/onmouseout

e.type

阻止默认行为（让链接不跳转提交按钮不提交）

e.preventDefault(); //dom标准写法方法
e.returnValue；//属性

阻止冒泡

e.stopPropagation();
加在函数里可以阻止后面的事件不再发生

e.cancelBubble=true;

6.事件委托

事件代理

原理：不是给每个子结点单独设置监听器，而是事件监听器设置在父节点是，利用冒泡影响每个子结点。

7.鼠标事件

禁用右键

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

禁止选择文件

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

鼠标事件对象

相对于浏览器可视区

e.clientX
e.clientY

相对于文档页面（常用

e.pageX
e.pageY

相对于电脑屏幕的坐标

e.screenX
e.screenY

案例图标跟随鼠标移动

思路：

1.鼠标移动时的坐标赋值给图片的xy坐标！

<body>
    <img src="" alt="">
<script>
    var im = document.querySelector('img');
    document.addEventListener('mousemove',function(e){
           var x = e.pageX;
           var y = e.pageY;
           im.style.left = x +'px';
           im.style.top = y + 'px';
           
})

键盘事件

松开时触发

document.addEventListener('onkeyup',function(){}) //松开的时候触发

按下出发（按下时即执行代码）

onkeydouwn onkeypress

onkeypress不识别功能键

注意：

先执行keydown --keypress -- keyup

1.键盘事件对象

得到相应键的ascii码值

e.keyCode
用这个值判断用户按下了哪些键

keyup keydown不区分大小写

keypress区分大小写

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

敲代码时出的问题：

1.不知道怎么来判断键盘输入的字符

2.不知道获得焦点 focus（）；

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

案例模拟快递单号查询

问题：

placeholder 是HTML5 中新增的一个属性。 placeholder可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示，一旦用户输入信息该提示就会自动消失。

隐藏为 element.style.display

失去焦点为blur

获得焦点为focus

<body>
    <div class="search">
        <div class="con"></div>
        <input type="text" placeholder="请输入您的快递单号">

    </div>
    <script>
        var con = document.querySelector('.con');
        var inp = document.querySelector('input');
        inp.addEventListener('keyup', function (e) {
            if (this.value == '') {
                con.style.display = 'none';

            } else {
                con.style.display = 'block';
                con.innerText = this.value;
            }
        })
        inp.addEventListener('blur', function (e) {
            con.style.display = 'none';
        })
        inp.addEventListener('focus', function (e) {
            if (this.value !== '') {
                con.style.display = 'block';

            } else {
                con.style.display = 'none';
            }
        })
    </script>
</body>