js事件以及案例

最新推荐文章于 2023-07-06 09:53:00 发布
最新推荐文章于 2023-07-06 09:53:00 发布
阅读量1k 收藏 1
点赞数 1
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shaco335/article/details/123439696
版权

目录

onload 页面加载事件

onresize 改变窗口大小时触发事件

onscroll滚动条事件

表单事件

键盘事件

鼠标事件

事件绑定

冒泡事件

捕获事件案例

onload 页面加载事件

window.onload是一个事件，在文档加载完成后能立即触发，并且能够为该事件注册事件处理函数。将要对对象或者模块进行操作的代码存放在处理函数中。即：window.onload =function (){这里写操作的代码};

案例：

<img src="images/logo_170x46.png" id="pic">

    <div id="box"></div>

    <script type="text/javascript">

        /* window.οnlοad=function(){

                console.log("图片加载完成")

            } */

        var op = document.getElementById('pic');

        op.onload = function () {

            console.log("图片加载")

        }

    </script>

onresize 改变窗口大小时触发事件

• onresize 事件会在窗口或框架被调整大小时发生

• window 对象支持 onresize 事件，同时常规标签也都支持（ div 、 textarea 、 table 等）

• 获取窗口的宽高值

兼容写法如下
• 宽度： document.body.clientWidth ||document.documentElement.clientWidth
• 高度： document.body.clientHeight ||document.documentElement.clientHeight

案例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            #box{width: 200px;height: 200px;background-color: red;position: absolute;

            top: 0;left: 0;}

        </style>

    </head>

    <body>

        <div id="box"></div>

        <script type="text/javascript">

            var ow=0;

            var oh=0;

            var obox=document.getElementById("box");

            ow=document.documentElement.clientWidth;

            oh=document.documentElement.clientHeight;

            window.οnresize=function(){

                ow=document.documentElement.clientWidth;

                oh=document.documentElement.clientHeight;

                autoFn(ow,oh);

            }

            function autoFn(w,h){

                obox.style.left=(w-obox.offsetWidth)/2+"px";

                obox.style.top=(h-obox.offsetHeight)/2+"px";

            }

        </script>

    </body>

</html>

onscroll滚动条事件

是检测页面是否滚动的函数，常用在页面的动态加载中

返回顶部案例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            #back{

                width: 100px;

                height: 200px;

                background-color: red;

                color: #fff;

                border: none;

                position: fixed;

                right: 10px;

                bottom: 100px;

                cursor: pointer;

            }

        </style>

    </head>

    <body style="height: 2000px;">

        <button id="back">返回顶部</button>

        <script type="text/javascript">

            var oback=document.getElementById('back');

            oback.οnclick=function(){

                document.documentElement.scrollTop=0;

            }

        </script>

    </body>

</html>

表单事件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <!-- onfocus:元素获取焦点事件

        onblur：元素失去焦点事件 -->

        <!-- 初始化设置焦点 autofocus -->

        <form action="01onload.html" method="post" id="form">

            <input type="text" placeholder="请输入用户名" id="user">

            <input type="password" placeholder="请输入密码" id="pass">

            <input type="reset" value="重置" >

            <input type="submit" value="提交" >

        </form>

        <script type="text/javascript">

            var ouser=document.getElementById("user");

            // ouser.οnfοcus=function(){

            //  console.log("获取焦点事件");

            // }

            // ouser.οnblur=function(){

            //  console.log("失去焦点事件");

            // }

           

            // onchange用户改变域的内容的时候触发的事件

            // ouser.οnchange=function(){

            //  console.log(this.value);

            // }

           

            // onreset 表单重置的时候触发事件

            // var oform=document.getElementById("form");

            // oform.οnreset=function(){

            //  var off=confirm("是否要清空表单");

            //  if(!off){

            //      return false;//阻止清空

            //  }

            // }

           

            // onsubmit事件：表单提交的时候触发的事件

            var oform=document.getElementById("form");

            oform.οnsubmit=function(){

                if(oform.user.value===''){

                    alert("用户名不能为空");

                    return false;

                }

            }

           

        </script>

    </body>

</html>

键盘事件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <input type="text" id="txt">

        <!-- onkeydown ：键盘按下

        onkeypress:某个键盘被按下然后释放的时候发生的事件

        onkeyup：某个键盘被松开 -->

        <script type="text/javascript">

            // document.οnkeydοwn=function(){

            //  console.log("当前是某个键盘的键被按下了")

            // }

            // document.οnkeypress=function(){

            //  console.log("某个键盘被按下然后释放")

            // }

            // document.οnkeyup=function(){

            //  console.log("当前是某个键盘的键被松开；了")

            // }

           

            var otxt=document.getElementById('txt');

            otxt.οnkeyup=function(){

                console.log(this.value)

            }

           

        </script>

    </body>

</html>

鼠标事件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <input type="button" id="btn" value="双击">

        <script type="text/javascript">

            // ondbclick双击事件

            document.getElementById('btn').οndblclick=function(){

                alert(1)

            }

            // onmousedown鼠标按下

            document.οnmοusedοwn=function(){

                console.log("鼠标按下")

            }

           

            document.οnmοuseup=function(){

                console.log("鼠标抬起")

            }

           

            document.οnmοusemοve=function(){

                console.log("鼠标移动")

            }

           

        </script>

    </body>

</html>

事件绑定

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <input type="button" name="" id="btn" value="按钮" />

        <script type="text/javascript">

        var obtn=document.getElementById('btn');

        // obtn.οnclick=function(){

        //  alert(1)

        // }    

        // obtn.οnclick=fn2;

        // obtn.οnclick=fn1;

        function fn1(){

            alert(1)

        }

        function fn2(){

            alert(2)

        }

       

       

        // addEventListener()  兼容chrome firefox safari opera

        // removeEventListener()

        // 所有dom的节点都包含这个方法，并且这个方法会接收3个参数

        // 1.事件类型

        // 2.事件的处理方法

        // 3.布尔参数 默认为false

        // true 捕获阶段调用事件处理的方法，false冒泡事件调用事件处理的方法

       

        // obtn.addEventListener('click',false);

        // obtn.addEventListener('click',fn2,false);

       

        // attachEvent()兼容ie7/8

        // obtn.attachEvent('onclick',fn1)

        // obtn.attachEvent('onclick',fn2)

       

        // onclick 是绑定事件，告诉浏览器在鼠标点击的时候要执行什么

        // click本身的作用是触发onclick事件，只要你执行click方法，就可以执行onclick事件

       

        function bind(obj,even,fn){

            if(obj.addEventListener){

                obj.addEventListener(even,fn,false);

            }else{

                obj.attachEvent('on'+enen,function(){

                    fn.call(obj);

                })

            }

           

        }

           

        bind(obtn,'click',function(){

            alert(this.value)

        })

           

           

        </script>

    </body>

</html>

冒泡事件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            div{padding: 40px;}

            #box1{background-color: red;}

            #box2{background-color: yellow;}

            #box3{background-color: green;}

        </style>

    </head>

    <body id="body">

        <div id="box1">box1

            <div id="box2">box2

                <div id="box3">

                    box3

                </div>

            </div>

        </div>

        <!-- 事件冒泡：当一个元素接收到事件的时候，会把已经收到的所有的事件传递给父级，直到window。事件冒泡默认情况存在的， -->

        <script type="text/javascript">

            var obox1=document.getElementById('box1'),

            obox2=document.getElementById('box2'),

            obox3=document.getElementById('box3');

            var obody=document.getElementById('body');

            function getid(){

                console.log(this.id);

                event.stopPropagation();

            }

            obox1.οnclick= getid;

            obox2.οnclick= getid;

            obox3.οnclick= getid;

        </script>

    </body>

</html>

捕获事件案例

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            div{padding: 40px;}

            #box1{background-color: red;}

            #box2{background-color: yellow;}

            #box3{background-color: green;}

        </style>

    </head>

    <body id="body">

        <div id="box1">box1

            <div id="box2">box2

                <div id="box3">

                    box3

                </div>

            </div>

        </div>

       

        <script type="text/javascript">

            var obox1=document.getElementById('box1'),

            obox2=document.getElementById('box2'),

            obox3=document.getElementById('box3');

            var obody=document.getElementById('body');

            function getid(){

                console.log(this.id);

            }

            obox1.addEventListener('click',getid,true);

            obox2.addEventListener('click',getid,true);

            obox3.addEventListener('click',getid,true);

        </script>

    </body>

</html>


以上案例可以自己边敲边理解，个人的理解都写在注释里了，希望能帮助到大家，有不对的地方或者不当的地方希望大佬指点，我会听取意见。

shaco335
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 趣味案例-事件处理-dom操作表格 示例代码
06-26
JavaScript 事件处理 示例代码 包含表格表单创建、样式设置、事件绑定（表格、表单、复选框）、事件处理 JavaScript 事件处理 示例代码 包含表格表单创建、样式设置、事件绑定（表格、表单、复选框）、事件处理...
JavaScript案例-js轮播图
02-16
在这个"JavaScript案例-js轮播图"中，我们将深入探讨如何使用纯JavaScript实现一个功能完善的轮播图效果。 首先，轮播图是网页设计中常见的元素，它允许展示一组图片或内容，并在用户交互或定时自动切换之间进行...
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
11-27
本文实例讲述了JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法。分享给大家供大家参考，具体如下： 这里演示js如何给页面中所有的img对象加上onclick事件，且实现在新窗体中查看该图片文件的功能： [removed] <!-- ///给页面中所有img对象添加onclick事件 //author:aganar /// function AddImgClickEvent() { var objs = document.ge
【13.0】前端基础JavaScript之JS事件案例
最新发布
Chimengmeng的博客
07-06 170
【13.0】前端基础JavaScript之JS事件案例 【一】开关灯示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ...
JS事件篇
m0_53157173的博客
08-24 1401
事件篇window.onload:事件Dom查询innerhtml ----获取节点的html内容，或者设置对应节点html内容读取或者设置节点的相关属性获取元素节点的子节点children属性可以获取到当前元素所有子元素，不包括文本节点区分概念: 节点包括文本节点，而元素不包括文本节点firstChild获取当前元素第一个子节点 VS firstElementChild获取当前元素第一个子元素抽离出按钮点击函数的小案例parentNode :获取一个元素的父元素innertext :获取到一个标签里面的
onload事件
qq_45361567的博客
10-17 659
onload事件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //onload事件的方法 function onloadFun(){ alert('静态注册
20个JavaScript开发案列（一）
终成大师的博客
02-17 4890
20个JavaScript开发案列（一）
JavaScript案例-js表单验证
02-16
在这个"JavaScript案例-js表单验证"中，提供的"03_validation"文件很可能包含了上述提到的验证示例代码。你可以深入研究这些代码，了解具体的实现方式，并尝试根据自己的需求进行修改和扩展。通过实践，你将更好地...
黑马程序员 大事件案例程序
08-24
layui ajax 没有node.js功能都可用，高度类似。 黑马刘龙彬老师主讲的大事件项目，整体看完，给刘老师点个赞，讲的非常细致，开发流程清晰，涉及的知识点也很精准。另外黑马还为这个项目提供了在线接口文档，并且将...
JavaScript页面事件案例.pdf
07-11
在本案例中，我们探讨了两个关于JavaScript页面事件的实例。 案例1关注的是`onload`和`onunload`事件。`onload`事件在页面完全加载后触发，包括所有的图像、脚本、样式表等资源。在这个例子中，它用于调整一个图片...
JavaScript常见事件对象与操作实例总结
12-09
本文实例讲述了JavaScript常见事件对象与操作。分享给大家供大家参考，具体如下： 触发 DOM 上的事件时，会生成一个事件对象 event，它包含着所有与事件有关的信息，诸如导致事件的元素、事件的类型以及其他与特定事件相关的信息。所有的浏览器都支持 event 对象，但支持的方式不同。 1 DOM 中的事件对象 兼容 DOM 的浏览器会将 event 对象传入事件处理程序（DOM0 级与 DOM2 级都支持）： var btn = document.getElementById("myBtn"); btn.onclick = function (event) { console.l
js事件.html
10-27
前端的js小技巧，js事件类型，js事件的操作，js事件的描述
500套JavaScript小案例
05-11
500套JavaScript小案例，包含事件、特效、ajax、Dom操作等等，js学习必备。。。。。。。。。。。。。。
JS基础入门篇（二十）—事件对象以及案例（二）
weixin_34258782的博客
06-06 64
案例一.点击按钮，选中input中的全部内容 select（）方法：选中全部。 点击按钮选中输入框中的内容！！！！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titl...
通过经典案例教你学Javascript
04-14
通过案例，讲解Javascript的各种语法，API和使用方法。
js事件（事件流、鼠标位置Client等、事件委托、事件冒泡等）
YiLin_Classics的博客
06-17 677
事件：浏览器之中提前定义好的函数，在用户特定的操作下会被调用，这样的浏览器和用户的交互行为（给浏览器一个操作，浏览器给我一个反馈）事件在程序之中是所有特效的起点，编写的功能就是通过事件去触发1.事件源2.事件类型函数是通过函数名来调用的一般函数的调用要结合事件来调用事件：用户与网页交互的重要方式调用方式：方式一：通过html标签调用 方式二：js调用 例1：直接使用onclick在行内绑定函数 例2：直接在id上绑定事件 事件对象 事件在触发的时候，浏览器会记录很对事件信息，这些事件信息会被存储在一个对象之
js事件的一个例子
xinpo66的专栏
05-22 407
js事件的一个例子https://stackoverflow.com/questions/22186467/how-to-use-javascript-eventtarget这个我试了，还真有效：// listen to event window.addEventListener("say", function(e) { alert(e.detail.word); }); // create a...
js常见事件及案例-onFocus
baidu_28107061的博客
05-25 456
事件是可以被javascript侦测到的行为（事件通常与函数配合使用，当事件发生时函数才会执行）。 事件举例：鼠标点击                     页面或图像载入                     鼠标悬浮于页面的某个热点之上                     在表单中选取输入框                     确认表单
js-事件
muzidigbig的博客
06-22 8074
JavaScript 事件（常用）网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。事件举例：鼠标点击 页面或图像载入 鼠标悬浮于页面的某个热点之上 在表单中选取输入框 确认表单 键盘按键 注意：事件通常与函数配合使用，当事件发生时函数才会执行。事件三要素事件源、事...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值