js day9 事件2

最新推荐文章于 2023-10-20 09:39:12 发布
最新推荐文章于 2023-10-20 09:39:12 发布
阅读量220 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QiuShuiFuPing/article/details/87889461
版权

1。html事件：

<script>
        function show() {
            alert('hello');
        }
    </script>
</head>

<body>
        <button id="btn" οnclick="show()">按钮</button>
</body>

2，Dom0级事件

<button id="btn">按钮</button>
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function() {
            // dom 0级事件处理
            alert('hello');
        }

        btn.onclick = function() {
            // dom 0级事件只允许绑定一个事件处理函数
            alert('ok');
        }
        btn.onclick = null; //移除事件
    </script>

3.DOM2级事件

<script>
        window.onload = function() {
            var btn = document.getElementById('btn');
            btn.addEventListener('click', function() {
                alert('ok');
            });

            function show() {
                // dom2级事件允许给元素绑定多个事件处理函数
                alert('show');
            }

            btn.addEventListener('click', show);

            //btn.removeEventListener('click', show); //移除事件

            btn.addEventListener('mouseover', function() {
                console.log('test');
            });
        }
    </script>

4.一次性事件

<script>
        var btn = document.querySelector('#btn');

        // function show() {
        //     alert('show');
        //     btn.removeEventListener('click', show);
        // }
        btn.addEventListener('click', function() {
            alert('show');
            // this.disabled = true;
            btn.removeEventListener('click', arguments.callee); 
            // arguments.callee 指向当前函数,。当一个函数必须调用自身的时候,避免使用 arguments.callee(),
        });
    </script>

5.ie事件处理

<button id="btn">按钮</button>
    <script>
        var btn = document.getElementById('btn');

        function fn() {
            alert(1);
        }
        btn.attachEvent('onclick', fn);

        btn.detachEvent('onclick', fn);
    </script>

6，事件处理兼容

    <script>
        function addEvent(elm, type, callback) {
            if (elm.addEventListener) {
                elm.addEventListener(type, callback);
            } else if (elm.attachEvent) {
                elm.attachEvent('on' + type, callback);
            } else {
                elm[on + "type"] = callback;
            }
        }
        window.onload = function() {
            var btn = document.getElementById('btn');
            addEvent(btn, 'click', function() {
                alert(123);
            });

        }
    </script>

7.事件冒泡

<body>
    <div id="box">
        <button id="btn">按钮</button>
    </div>
</body>
<script>
    var btn = document.getElementById('btn');
    var box = document.getElementById('box');
    var body = document.body;
    box.addEventListener('click', function(event) {
        console.log('div click');

    });

    body.addEventListener('click', function() {
        console.log('body click');
    });

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

7.事件冒泡

<body>
    <div id="box">
        <button id="btn">按钮</button>
    </div>
</body>
<script>
    var btn = document.getElementById('btn');
    var box = document.getElementById('box');
    var body = document.body;
    box.addEventListener('click', function(event) {
        console.log('div click');

    });

    body.addEventListener('click', function() {
        console.log('body click');
    });

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

8兼容问题1

<body>
    <div id="box">
        <button id="btn">按钮</button>
    </div>
</body>
<script>
    var btn = document.getElementById('btn');
    var box = document.getElementById('box');
    var body = document.body;
    box.addEventListener('click', function(event) {
        console.log('div click');

    });

    body.addEventListener('click', function() {
        console.log('body click');
    });

    btn.addEventListener('click', function(e) {
        var e = e || event; //兼容 ie只能识别event
        console.log('btn click');
        if (e.stopPropagation) {
            e.stopPropagation();//该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。
        } else {
            e.cancelBubble = true;
        }
    });
</script>

9兼容问题2

<script>
        // 将事件处理函数通过冒泡托管给父级元素  -- 事件委托
        // 应用场景 --- 为未来元素绑定事件
        window.onload = function() {
            var box = document.getElementById('box');
            var btn = document.getElementById('btn');
            box.addEventListener('click', function(e) {
                var e = e || event;
                // console.log(this === e.target);
                e.stopPropagation();
                console.log('点击了');
            });
        }
    </script>

10事件委托2

 <div id="box">
        <button>按钮</button>
    </div>
    <script>
        var box = document.getElementById('box');
        box.addEventListener('click', function(e) {
            var e = e || event;
            e.stopPropagation();
            if (e.target.nodeName == "BUTTON") {
                //给未来元素(脚本动态创建的元素)绑定事件
                var button = document.createElement('button');
                button.innerHTML = 'new button';
                box.appendChild(button);
            }
        });
    </script>

11.事件委派

<body>
    <div id="box">
        <button id="btn1">第1个按钮</button>
        <button id="btn2">第2个按钮</button>
        <button id="btn3">第3个按钮</button>
        <button id="btn4">第4个按钮</button>
        <button id="btn5">第5个按钮</button>
    </div>
    <script>
        var box = document.getElementById('box');
        box.addEventListener('click', function(e) {
            var e = e || event;
            e.stopPropagation();
            switch (e.target.id) {
                case 'btn1':
                    console.log(11111);
                    break;
                case 'btn2':
                    console.log(222222);
                    break;
                case 'btn3':
                    console.log(33333333333);
                    break;
                case 'btn4':
                    console.log(44444444444);
                    break;
                case 'btn5':
                    console.log(5555555555);
                    break;
            }
        });
    </script>
</body>

12.event对象

<script>
        window.onload = function() {
            var box = document.getElementById('box');
            console.log(box.scrollTop);
            document.addEventListener('click', function(e) {
                console.log(e.pageX, e.pageY);
                console.log("clientX：" + e.clientX + "," + (e.clientY + document.documentElement.scrollTop));
            });
            box.addEventListener('click', function(e) {
                var e = e || event;
                // console.log("x:" + e.offsetX + "  y:" + e.offsetY);  //从当前元素开始计算的XY坐标//从box开始计算鼠标在box中的位置
                // console.log("x:" + e.pageX + "  y:" + e.pageY);  //从页面左上角开始计算的XY坐标//从页面（要累积划到上面的）
                // console.log("x:" + e.screenX + "  y:" + e.screenY); //从显示屏左上角开始计算的XY坐标
                // console.log("x:" + e.clientX + "  y:" + e.clientY); //从页面左上角开始计算的XY坐标（不累计）

            });
        }
    </script>
</head>

<body>
    <div id="box" style="height:500px;width:500px;background:#ccc;margin:0 auto;"></div>
</body>

12.鼠标事件JavaScript中判断鼠标按键(event.button)

 <script>
        window.onload = function() {
            var box = document.getElementById('box');
            box.addEventListener('dblclick', function(e) {
                console.log(e.button);
                console.log('doubleclick');
            });
            box.addEventListener('contextmenu', function(e) {
                e.preventDefault(); //阻止事件的默认行为
                console.log(e.button);
                // return false;
            });

//

mouseover事件：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。

mouseenter事件：只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

mouseout事件：不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

mouseleave事件：只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
 

            var a = document.getElementById('baidu');
            a.addEventListener('click', function(e) {
                e.preventDefault();
                alert('123');
                // return false;
            });
            // click dblclick contextmenu 
            // mouseover mouseout mousemove mouseenter mouseleave

            box.addEventListener('mouseover', function() {
                console.log('mouseover');
            });
            box.addEventListener('mouseout', function() {
                console.log('mouseout');
            });
            box.addEventListener('mouseenter', function() {
                console.log('mouseenter');
            });
            box.addEventListener('mouseleave', function() {
                console.log('mouseleave');
            });
            box.addEventListener('mousemove', function(e) {
                console.log(e.pageX, e.pageY);
            });
        }
    </script>
</head>

<body>
    <a href="https://www.baidu.com" id="baidu">百度</a>
    <div id="box" style="height:500px;width:500px;background:#ccc;margin:0 auto;"></div>
</body>

13.图片跟随

<title>Document</title>
    <style>
        img {
            position: absolute;
        }
    </style>
</head>

<body>
    <img src="timg.jpg" alt="" style="width:120px" id="img">
    <script>
        var img = document.getElementById('img');
        document.addEventListener('mousemove', function(e) {
            var e = e || event;
            var x = e.pageX;
            var y = e.pageY;
            img.style.left = x + "px";
            img.style.top = y + "px";
        });
    </script>
</body>

14.键盘事件

 <script>
        function showEvent(ev) {
            for (var i in ev) {
                console.log(i + ":" + ev[i]);
            }
        }
        document.addEventListener('keyup', function(e) {
            // e.preventDefault();
            // showEvent(e);
            if (e.altKey) {
                switch (e.key) {
                    case 'b':
                        location.href = "https://www.baidu.com";
                        break;
                    case 's':
                        location.href = "https://www.sina.com.cn";
                        break;
                }
            }
            // return false;
        });
    </script>
</head>

<body>

</body>

15.就绪事件

body>
    <img src="timg.jpg" alt="">
    <script>
        // var img = document.querySelector('img');
        // img.addEventListener('load', function() {
        //     alert('图片加载完毕');
        // });
        // window.onload = function() {
        //     alert('onload');
        // }
        // document.addEventListener('DOMContentLoaded', function() {
        //     // DOMCountentLoaded 当DOM结构加载完毕执行
        //     alert('加载完毕');
        // });

        function $(callback) {
            document.addEventListener('DOMContentLoaded', callback);
        }

        $(function() {
            console.log('加载完毕');
        });
    </script>

16考试题

 <script>
        // var arr = [1, 2, 3, 4];
        // arr.splice(1, 0, [1, 2, 3, 4], 5);
        // console.log(arr.length);

        // var arr = [1, 2, 3, 4];
        // arr.slice(2);
        // console.log(arr);

        // var arr = [100, 4, 2, 3, 200];
        // console.log(arr.sort(function(a, b) {
        //     return b - a;
        // }))

        // var arr = [1, 2, 3, 'hello'];
        // arr.concat('world');
        // console.log(arr.toString());
        var arr = new Array(5);
        arr[1] = 1;
        arr[5] = 2;
        console.log(arr.length);
    </script>
</head>

QiuShuiFuPing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript基础练习题（二）
qqatt的博客
12-29 1万+
一、单选题（共30题，每题2分） 得分：2.0分 1. 已知数组 var arr = [1,2,3,4,5],执行 arr.pop() 后，数组的长度是 A 4 B 5 C 6 D 7 正确答案: A 解析: arr.pop()是删除数组后一个数据 得分：2.0分 2. Math.floor(-3.14) 的结果是（ ） A -3.14 B -3 C -4 D 3.14 正确答案: C 解析: 得...
join方法 js 单字符串会报错_js基础试题及答案(二)
weixin_39657521的博客
12-21 1073
一、单选题1.已知数组 var arr = [1,2,3,4,5],执行 arr.pop() 后，数组的长度是A 4B 5C 6D 7正确答案: A解析:arr.pop()是删除数组后一个数据2.var array = new Array(5); array.push(8); 数组array的长度是A 5B 6C 7D 8正确答案: B解析:new Array(5);创建一个长度为5的空数组，pu...
【JavaScript】 数组 重要方法详解篇（一）
浅陌繁星的博客
12-24 833
数组中有许多的重要的方法，而本篇文章主要叙述会改变原数组的七种常用方法(push()、pop()、unshift()、shift()、reverse()、sort()、splice())。
JS基础练习题及答案（二）
Hi_Eleven的博客
08-07 1万+
一、单选题（共30题，每题2分） 得分：2.0分 1.Math.pow(1,2)的结果是 A 1 B 2 C 3 D 0 正确答案: A 解析: 1的2次方，还是1 2.已知字符串"hello everybody "通过下面哪个方法可以去掉字符串两端的空白 A trim() B split() C reverse() D join() 正确答案: A 解析: 使用排除法：split分割字符串；reverse反转数组；join将数组转成字符串 trim() 去除字符串两端空
JavaScript的sort方法
weixin_34235105的博客
04-03 110
说明 array.sort()用于对数组进行排序，返回数组，方法默认是“升序”排序，原数组会发生改变 简单点：比较函数两个参数a和b，返回a-b升序，返回b-a升序 普通数组（降序） var arr = [1, 3, 4, 2, 5]; arr.sort(function(a, b){ 　　return b - a; }); console.log(arr); /...
JavaScript sort() 方法
aitanxiaofeng的博客
07-09 160
var arr = [3,5,1,6]; arr.sort((a1,a2)=>{ return a1-a2; }) 输出: [1,3,5,6] 返回负数,参数1在前 返回正数,参数2在前 返回0,默认排序.
js库——Day.js、Big.js
黎小小的博客
10-20 885
Day.js 方便操作对时间解析 验证 对时间进行计算等操作。
Day.js 常用方法
热门推荐
halo1416的博客
04-21 4万+
前言 Day.js 是代替修改本地Date.prototype，Day.js对Date对象进行了封装，只需要调用Dayjs()即可。 相对moment.js而已，day.js的体积更小，只有2KB左右；moment.min.js 有16.7KB。 对应普通项目来说，对应时间的操作就只有那么几个（格式化、查询、计算），这些基于Day.js完全足够。并且Day.js的文档相对简单、清晰！ 该文章对比之前的moment.js的文章 Day.js官方文档   当前文章很多实例是以当前时间来处理的， 当前时间
vue2day9.rar
最新发布
12-21
我们还将学习如何使用流行的前端框架和工具，如React、Vue.js和Webpack等，来构建功能强大、响应迅速的现代化网页应用。 这个视频系列旨在帮助你掌握前端开发所需的技能，并能够在实际项目中应用所学的知识。每个...
day9_bytgq_javascript_
10-02
在“day9_bytgq_javascript_”这个资源中，我们很显然聚焦于JavaScript的学习，尤其是第九天的学习内容。尽管描述中提到这只是day9的学习材料，但JavaScript的学习是一个循序渐进的过程，每一部分都至关重要。 首先...
JS.rar_day3lb_javascript
09-23
在"JS.rar_day3lb_javascript"这个压缩包中，我们很显然关注的是JavaScript技术，特别是与“futdraft”程序相关的应用。"futdraft"可能是一个足球模拟选秀或者阵容构建的应用，这需要对JavaScript有深入的理解以及对...
JS高级 day2.zip
12-21
我们还将学习如何使用流行的前端框架和工具，如React、Vue.js和Webpack等，来构建功能强大、响应迅速的现代化网页应用。 这个视频系列旨在帮助你掌握前端开发所需的技能，并能够在实际项目中应用所学的知识。每个...
JS-Day-2:Javascript 第 2 天
06-24
在“JS-Day-2:Javascript 第 2 天”这个学习主题中，我们将深入探讨JavaScript这一强大且广泛应用的编程语言。作为Web开发的核心技术之一，JavaScript不仅用于网页交互，还在服务器端、移动应用、游戏开发等多个领域...
前端面试整理一
QiuShuiFuPing的博客
08-31 681
前端基础 2.1）对称加密也有缺陷，如何克服？ 对称加密虽然简单性能也好，但是首次把密钥发送给对方时，很容易被拦截。 这里介绍非对称加密： 解决方案：结合两种加密方式，将对称加密的密钥，使用非对称加密的公钥进行加密，然后接收方只能用私钥解，最后双方可以使用对称加密来进行沟通。 但是还有缺陷，如果存在一个中间人把通信的公钥换成他自己的公钥，这样就可完全拿到通信的数据。这样需要一个安全的第三...
js day7dom and bom
QiuShuiFuPing的博客
12-22 423
BOM概念 BOM : Browser Object Model 浏览器对象模型，用来描述与浏览器进行交互的方法和接口。 BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。 BOM 的核心对象是 window ，它表示浏览器的一个实例。window对象有双重角色，它既是通过JavaScript 访问浏览器窗口的一个接口，又是ECMAScript规定的全局对象。这意味...
js day2循环与判断
QiuShuiFuPing的博客
12-18 354
程序的三大结构(了解) 顺序结构 选择结构 循环结构 程序的分支结构 IF语句 大多数编程语言中最为常用的一个语句就是 if 语句。以下是 if 语句的语法： if (条件) { 语句块1 } else { 语句块2 } 其中的条件可以是任意表达式；而且对这个表达式求值的结果不一定是布尔值。 ECMAScript 会自动调用 Boolean() 转换函数将这个表达式的结果转...
html day3---CSS核心属性二
QiuShuiFuPing的博客
11-02 300
                                    CSS核心属性二 继承和嵌套问题： 嵌套问题：  块套行\块;p不能嵌套块状元素，只能嵌套行元素；块的宽度继承父元素的宽度：h1-h6,p,hr,ul,ol,dl,dt,dd,li,form 行套行,   a不能套a,h标签不能嵌套h标签，行标签宽度与内容同宽:em,i,b,strong,br,img,a,input...
html day4-- html错误集锦1
QiuShuiFuPing的博客
11-02 286
错误集锦 1.css样式表中的注释不能用&lt;!--xx--&gt;,可以用/**/或//，不然不会报错，也不会起作用 2. 3.图片放在块状元素和超链接中是个祸害： 4. 5.浮动后的margin是不会重叠的。   6.简写. 7.padding:在父类中加padding，对子元素起作用 8. 9.margin不会撑大父框，当元素+margin的宽度大于父...
js day1
QiuShuiFuPing的博客
12-18 255
Js1 //1.JavaScript是一种轻量级、解释型的Web开发语言。 //轻量级：弱类型语言，比企业级语言简单。无法操作系统文件。 //解释型：无需任何的环境进行编译。只需要浏览器。依赖浏览器解释。 //2.JavaScript核心组成部分（ECMAscript/BOM/DOM） //ECMAscript：欧洲的计算机协会组织。发布JavaScript基本的语法标准。 //BOM...
day.js 和 mount
08-19
在提供的引用内容中，没有提到day.js和mount的具体含义和用法。但是从引用中可以看出，day.js是一个日历插件，可以用于滑动月份日历的展示。而mount可能是指将day.js插件添加到页面中的过程，具体的使用方法和示例可以参考day.js的官方文档链接。需要注意的是，从引用和引用可以看出，day.js插件可能需要在Three.js的基础上进行设置和使用，因此建议在使用day.js之前先熟悉Three.js的基础知识。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [day.js 插件，小程序滑动月份日历](https://download.csdn.net/download/sinat_40257787/12980616)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [three.js创建光线_使用Three.js创建类似水的扭曲效果](https://blog.csdn.net/culiao9310/article/details/108865048)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

QiuShuiFuPing

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值