javascript事件

prtyaa
prtyaa 2023-12-26 18:05:12 66331
分类专栏： 资讯

1.事件基础

事件是由三部分组成：事件源 事件监听 事件处理程序

代码样例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>123</div>
    <script>
        //1.获取事件源
        var div = document.querySelector('div');
        //2.事件监听、事件处理程序
        div.onclick = function() {
            console.log('onclick');
        }
    </script>

</body>

</html>
1

2.事件高级-注册事件

给元素添加事件监听和事件处理程序，称为注册事件或者绑定事件
注册事件有两种方式：传统方式和方法监听注册方式
2

样例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <button>传统注册方式</button>
    <button>方法监听注册方式</button>
    <script>
        var btns = document.querySelectorAll('button');
        //1.传统注册方式
        btns[0].onclick = function(){
            alert('hi');
        }
        btns[0].onclick = function(){
            alert('hao a u');
        }
        //2.方法监听注册方式
        btns[1].addEventListener('click',function(){
            alert(22);
        })
        btns[1].addEventListener('click',function(){
            alert(33);
        })
    </script>


</body>

</html>

3.事件高级-删除注册事件

3

代码样例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <button>1</button>
    <button>2</button>
    <script>
        var btns = document.querySelectorAll('button');
        //1.传统方式删除注册事件
        btns[0].onclick = function(){
            alert(11);
            btns[0].onclick = null;
        }
        //2.新方式删除注册事件
        btns[1].addEventListener('click',fn);

        function fn(){
            alert(22);
            btns[1].removeEventListener('click',fn);
        }
    </script>
</body>

</html>

4.事件高级-DOM事件流理论

4.1 事件流理论

个人理解：
DOM树中的A元素属于B元素的子元素，当A元素被点击后，相当于B元素同样被点击了；
浏览器会先判断该点击行为是否触发B元素的事件监听，然后再判断该点击行为是否触发A元素的事件监听；（该流程称为事件捕获阶段）
事件处理程序的执行顺序是先执行A元素的事件处理程序，再执行B元素的事件处理程序;（该流程称为事件冒泡阶段）

4.2 注意

  • onclick和attachEvent不涉及事件捕获阶段，只涉及事件冒泡阶段。
  • addEventListenner(type,listenner[,useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
  • 有些事件是没有事件冒泡阶段的，比如onblur、onfocus、onmouseenter、onmouseleave

4.3 DOM事件流验证代码

样例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        //1.事件捕获阶段
        var son = document.querySelector('.son');
        son.addEventListener('click', function(){
            alert('son');
        },true);
        var father = document.querySelector('.father');
        father.addEventListener('click', function(){
            alert('father');
        },true);
        //2.事件冒泡阶段
        var son = document.querySelector('.son');
        son.addEventListener('click', function(){
            alert('son');
        },false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function(){
            alert('father');
        },false);
    </script>
</body>

</html>

5.事件高级-事件对象

4

5.1 什么是事件对象

代码样例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div>123</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function(event){
            //1. event就是一个事件对象
            //2. 事件对象只有有了事件才会存在，他是系统给我们自动创建的，不需要我们传递参数
            //3. 事件对象 是我们事件的一系列相关数据的集合 跟事件相关的
            console.log(event);
        }

        div.addEventListener('click',function(event){
            console.log(event);
        })
    </script>
</body>

</html>

5.2 e.target和this的区别

代码样例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(e){
            //this返回绑定事件的元素
            console.log(this);
            //e.target返回的是触发了事件的对象（元素）
            console.log(e.target);
            //白话总结：e.target点击的哪个元素，就返回哪个元素；this返回的是绑定事件的元素
        })
    </script>
</body>

</html>

5.3 阻止默认行为

代码样例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
         //阻止默认（事件） 让链接不跳转或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click',function(e){
            e.preventDefault();
        })
    </script>
</body>

</html>

5.4 阻止事件冒泡

代码样例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        //2.事件冒泡阶段
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e){
            alert('son');
            e.stopImmediatePropagation();//停止事件冒泡
        },false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function(){
            alert('father');
        },false);
    </script>
</body>

</html>

5.5 事件委托

代码样例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <ul>
        <li>测试</li>
        <li>测试</li>
        <li>测试</li>
        <li>测试</li>
        <li>测试</li>
    </ul>
    <script>
        //事件委托的核心原理：给父节点添加侦听器
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(e){
            e.target.style.backgroundColor = 'red';
        });
    </script>
</body>

</html>

6.常用的鼠标事件

6.1 鼠标事件对象-禁止选中文字和禁止右键菜单

样例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    我是一段不愿意分享的文字
    <script>
        //1. contextmenu 我们可以禁止右键菜单
        document.addEventListener('contextmenu',function(e){
            e.preventDefault();
        });
        //2. 禁止选中文字 selectstart
        document.addEventListener('selectstart',function(e){
            e.preventDefault();
        })
    </script>
</body>

</html>

6.2 鼠标事件对象-获取鼠标在页面中的坐标

5

样例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <script>
        document.addEventListener('click',function(e){
            console.log(e.clientX);
            console.log(e.clientY);
            console.log(e.pageX);
            console.log(e.pageY);
            console.log(e.screenX);
            console.log(e.screenY);
        });
    </script>
</body>

</html>

7.常用的键盘事件

6

样例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <script>
        //1. keyup 按键弹起的时候触发
        document.addEventListener('keyup',function(){
            console.log('我弹起了');
        });
        //2. keydown 按键按下的时候触发 能识别功能键 比如ctrl shift 左右箭头
        document.addEventListener('keydown',function(){
            console.log('我按下了down');
        });
        //3. keypress 按键按下的时候触发 不能识别功能键 比如ctrl shift 左右箭头
        document.addEventListener('keypress',function(){
            console.log('我按下了press');
        });
        //4. 三个事件的执行顺序 keydown -》 keypress -》 keyup
    </script>
</body>

</html>

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=30971
赞同 0
评论 0 条

相关文章

  • [网页编程]-10 javascript event事件 2023-12-27 65611 浏览

    满足某些条件就会被触发例如单击常用操作:单击事件:onclick最常用双击事件:ondblclick获得焦点事件:onfocus失去焦点事件:onblur鼠标移动事件:onmousemove鼠标离开事件:onmouseout鼠标抬起事件:onmouseover键盘抬起事件:onkeyup页面加载事件:onload要一个操作触发多个事件只需要在事件中以分号隔开即可

  • javascript 鼠标事件 2023-12-26 67193 浏览

    写一个DIV跟随鼠标一起移动的例子<em class="color_r">javascript</em>鼠标<em class="color_r">事件</em>偏移量的研究

    • 关注我们

      信创开放社区公众号二维码

      扫一扫关注公众号

      信创开放社区交流群

      添加我为好友，拉您入交流群！

    添加我为好友，拉您入交流群！

    请使用微信扫一扫!