JavaScript基础知识---事件

最新推荐文章于 2023-07-13 07:00:00 发布
最新推荐文章于 2023-07-13 07:00:00 发布
阅读量289 收藏 1
点赞数 1
分类专栏： 前端学习开发记录 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h1025372645/article/details/89318418
版权

事件

事件中有：事件源  事件名   事件注册   事件处理

常用的事件

鼠标常用事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>鼠标事件</h2>
<button onclick="fun()">请点击 鼠标单击</button>
<br>
<button ondblclick="fun()">请点击 鼠标双击</button>
<br>
<button onmousedown="fun()">请点击 鼠标按下</button>
<br>
<button onmouseup="fun()">请点击 鼠标弹起</button>
<br>
<button onmouseenter="fun()">请点击 鼠标进入</button>
<br>
<button onmouseleave="fun()">请点击 鼠标离开</button>

</body>
<script>
    function fun() {
        alert("surprise moti！");
    }
  

</script>
</html>

 键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>键盘事件</h2>
键盘按下,获取键码：<input type="text" onkeydown="fun1(this)">
<br>
键盘松开，获取键码：<input type="text" onkeyup="fun1(this)">
<br>

</body>
<script>
   
    function fun1(e) {
        alert("surprise moti！"+e.type);
    }

    

</script>
</html>

事件注册

方法一：写在标签中，如上面的案例

方法二：通过JS去设置OnClick属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<h2>事件注册</h2>
事件注册1：<input type="text" id="input1"><br>
</body>
<script>
    function fun() {
        alert("surprise moti！");
    }
 
    //事件注册
    var input = document.getElementById("input1");
    input.onfocus = fun();

</script>
</html>

方法三：通过addEventListener注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<h2>事件注册</h2>
事件注册1：<input type="text" id="input1"><br>
事件注册2：<input type="text" id="input2"><br>
</body>
<script>
    function fun() {
        alert("surprise moti！");
    }
    function fun1() {
        alert("修改！");
    }

    //事件注册
    var input = document.getElementById("input1");
    input.onfocus = fun();

    var input2 = document.getElementById("input2");
    input2.addEventListener("change",function (ev) {
        alert("值修改了");
    })
    input2.addEventListener("change",fun1);
    //移除事件
    input2.removeEventListener("change",fun1);

</script>
</html>

推荐使用后两种方法，将页面内容和行为分开了

事件捕获与冒泡

如果2个div是父子关系，点击里头那个div，也会触发父亲那个div的点击事件,，

2个div点击事件都会触发，我们怎么去规定它的处理的顺序

冒泡：按照从内往外的方式依次处理，默认方式

捕获：反之

阻止冒泡：ev.stopPropagation();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件捕获与冒泡</title>
    <style>
        .div1{
            height: 200px;
            width: 200px;
            background-color: yellow;
        }
        .div2{
            height: 100px;
            width: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id = "div1" class="div1">
    <div id = "div2" class="div2">   </div>
</div>
</body>
<script>
    //true 与false决定是从里向外执行还是从外向里执行

    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    div1.addEventListener("click",function (ev) {
        console.log("我是div1");
    },false);
    div2.addEventListener("click",function (ev) {
        console.log("我是div2");
        ev.stopPropagation();//阻止冒泡
    },false);
</script>
</html>

DOM

Document Object Mode:文档对象类型

整个文档是由一序列节点对象组成的一棵树

获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom获取元素</title>
    <style>
        .div1{
            height: 200px;
            width: 200px;
            background-color: yellow;
        }
        .div2{
            height: 100px;
            width: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id = "div1" class="div1" name="divs">
    <div id = "div2" class="div2" name="divs">   </div>
</div>
</body>
<script>
    //获取指定元素
    var div1 = document.getElementById("div1");

    var div2 = document.getElementById("div2");
    //修改容器值
    div2.innerHTML="你是2号";

    //获取元素通过标签名 返回元素集合
    var div = document.getElementsByTagName("div");
    console.log(div.length);
    //获取元素通过name 返回元素集合
    var div2 = document.getElementsByName("divs");
    console.log(div2.length);

    //获取元素通过class 返回元素集合
    var div3 = document.getElementsByClassName("div1");
    console.log(div3.length);

</script>
</html>

修改元素，获取标签内容，修改元素样式，添加（删除）元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom修改元素</title>
    <style>
        .div1{
            height: 200px;
            width: 200px;
            background-color: yellow;
        }
        .div2{
            height: 100px;
            width: 100px;
            background-color: red;

        }
        .div2-hiddle{
            display: none;
        }
    </style>
    <script src="../js/hello.js"></script>
</head>
<body>
<div id = "div1" class="div1" name="divs">
    <div id = "div2" class="div2" name="divs">我是第二号</div>
</div>
</body>
<script>
    //获取指定元素
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    //修改值 ,如果有嵌套标题，父类修改内容之后，原有子标签会消失
    // div1.innerHTML="<img src='../img/图片3.png' />"
    // div2.innerHTML="<img src='../img/图片3.png' />";

    //获取文本
    console.log(div2.innerText);
    console.log(div2.innerHTML);

    // 修改元素样式
    div1.addEventListener("click",function (ev) {
        var div2 = document.getElementById("div2");
        if(div2.style.display =="none"){
            div2.style.display ="block";
        }
        else {
            div2.style.display ="none"
        }
    });

    div2.addEventListener("click",function (ev) {
        var div2 = document.getElementById("div2");
        div2.className = div2.className +" div2-hiddle";
        var p = document.createElement("p");
        p.innerText = "明天放假！";
        div1.append(p);
    });


</script>
</html>

BOM

Browser object Model

常用对象

Window：

窗口对象，浏览器窗口

我们定义的全局变量和全局函数都是Window对象的属性和方法

       Window.xx = “aa”

打开一个新的窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bom</title>
</head>
<body>

</body>
<script>
    var myWindow = window.open("https://www.baidu.com",
                                "_black","width=200,height=200");
</script>
</html>

lcation

window.location和直接写location

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bom</title>
</head>
<body>

</body>
<script>
    console.log(window.location.href);//获取当前url
    console.log(window.location.port);//获取端口号
    console.log(window.location.host);//获取主机名
    console.log(window.location.protocol);//获取传输协议
    window.location.href="https://www.baidu.com";//修改href页面跳转
    location.reload(true);//重新加载页面
</script>
</html>

History

历史记录对象，它是一个集合数组，无法读取到里面的值。

Back();

Forward();

History.go(-2)

cookie

作用：在本地浏览器存储数据，常用于记住账号

cookie组成：

         键值对形式存储

         存储数据：“userId=177171;password=123456”

         有效期：“expires=今天以后的时间”

         Cookie可以保持多个键值对

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cookie</title>
</head>
<body>

</body>
<script>
    var date = new Date();
    date.setDate(date.getDate()+7);
    //建立模拟数据
    var userId = "1234611";
    var password = "123456";
    //存到cookie中
    var context1 = "userId="+userId+";expires="+date;
    var context2 = "password="+password+";expires="+date;
    document.cookie = context1;
    document.cookie = context2;
</script>
</html>

效果如下：

所有的网络请求都会将cookie数据带上，发送给后台。

Cookie存储数据是有限的。

SessionStorage和localStorage

localStorage:长期有效，除非移除

sessionStorage：本次会话有效，浏览器关闭就没了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cookie</title>
</head>
<body>

</body>
<script>
   

    //存储数据h5的新特性
    localStorage.setItem("name","zx");
    console.log(localStorage.getItem("name"));

    sessionStorage.setItem("name","ls");
    console.log(sessionStorage.getItem("name"));

</script>
</html>

计时器和延时器

计时器：每隔多少时间，重复干什么事情

延时器：隔多次时间在调用什么函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器演延时器</title>
</head>
<body>
<div id = "count">
    0
</div>
</body>
<script>
    var count = document.getElementById("count");
    var countTime = setInterval(function () {
        count.innerText = parseInt(count.innerText )+ 1;
        //移除计时器
        if(parseInt(count.innerText )> 100){
            clearInterval(countTime);
        }
    },100);
    //延时器 隔多久后执行什么操作
    setTimeout(function () {
        //移除计时器
        clearInterval(countTime);
    },1000);


</script>
</html>

数据交换格式

前端和后端，他们自己有数据交互，

前端的数据需要提交给后端

 后端的数据也需要返回给前端  他们数据交换的格式称为数据交换格式

注意：前后端数据交换方式是HTTP/HTTPS，数据交换格式是JSON/XML

JSON

就是键值对方式；

JSON对象{ }

如果里面的值是数组：[]

定义方式以及常用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json</title>
</head>
<body>

</body>
<script>
    //定义个json对象
    var json = {
        name:"zs",
        list:[
            {pId:1,pName:"car"},
            {pId:2,pName:"bike"},
            {pId:3,pName:"football"}
        ]
    };

    //json对象转换为json字符串
    var jstr = JSON.stringify(json);
    console.log(jstr);
    //json字符串转换为JSON对象
    var ojson = JSON.parse(jstr);
    console.log(ojson);
</script>
</html>

XML

总结

    可以看到，JSON 简单的语法格式和清晰的层次结构明显要比 XML 容易阅读，并且在数据交换方面，由于 JSON 所使用的字符要比 XML 少得多，可以大大得节约传输数据所占用的带宽。

Ajax

异步请求方式，在一些网站可以实现异步刷新，在后台偷偷的跑，

比如：加载一个页面，

          静态的资源（html,css,js）

          页面上要显示的内容通过ajax去访问，得到数据之后，然后将数据展示在页面上。

此处只简单的做一个介绍，具体的使用要结合案例才能更好的理解。

 

无名一小卒
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端-javascript-基础知识-总结笔记
02-25
个人学习javascript的笔记总结
JavaScript事件流（冒泡、捕获）
apple_54470279的博客
04-23 2279
总结：实际开发中，事件冒泡用的会更多，事件捕获一般用在特殊情况下。利用事件委托可以有效的提高程序性能。DOM2 Events 规范将事件流分为三个阶段：事件捕获、到达目标、事件冒泡。并规定事件捕获阶段不触发目标事件，而事件冒泡阶段会在目标事件被触发后执行。但现在的浏览器并没有按照这个规定来实现事件流，在事件捕获阶段的终点，任然还是会触发目标事件，所以对于现在的浏览器而言，不管是捕获还是冒泡，目标事件都会被触发。
JavaScript中的事件
xin_xun_的博客
03-05 249
事件 JavaScript与HTML之间的交互是通过事件实现的。 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序）来预定事件，以便事件发生时执行相应的代码。   事件流： 事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流；而Netscape的事件流是事件捕获流。 Ø  事件冒泡：   IE的事件流叫做事件冒泡，即事件开始时由最具体的元素
JavaScript事件，事件对象event，点击事件的光标坐标点获取，鼠标事件，表单事件，焦点事件，键盘事件，浏览器相关事件，触摸事件及页面中Div的拖动
qq_63322025的博客
08-30 1073
用户名密码判断的登录案列，JavaScript事件，事件对象event，点击事件的光标坐标点获取，鼠标事件，表单事件。焦点事件，键盘事件，浏览器相关事件，触摸事件及页面中Div的拖动
JS:表单事件（7个）
weixin_59519449的博客
10-09 1582
表单事件 属性 描述 onfocus 元素获取焦点时触发 onblur 元素失去焦点时触发 onchange 该事件在表单元素的内容改变时触发( input, select, 和 textarea) oninput 元素获取...
前端常见的事件，案例源码html+css+js
qq_42754222的博客
07-13 701
前端常见事件
js常见事件
amarsoft_wxzhou
03-06 312
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>I
JavaScript常用事件集合，前端小白必备（写的很详细，建议收藏）
欧阳的技术博客
06-22 1804
JavaScript入门级经典教程（无噱头，直接上干货）1. 文档加载事件2. 鼠标事件3. 获取浏览器类型，手机机型（容易出问题的地方）4. 事件冒泡与事件委托（面试重点） 最近有很多粉丝小伙伴，说要一些基础教程，必须安排的明明白白 后续做一个一整个JS教程（知识点 + 经典案例） 新朋友可以关注一波（能三连是最好的了），本博主高产似奶牛 1. 文档加载事件 此事件使用频率很高，务必掌握 文档加载完成之后会做的事情 1.1 ready() ready(): 表示文档结构已经加载完成（不包含
JavaScript 实现功能：所有的div都添加事件，点击后输出时间戳；同时对新增的div也要能监听
MustImproved的博客
08-10 1426
原有的div的监听：使用document.querySelectorAll(‘div’)获取 新增div的监听：使用mutationObserver对document.body进行监听，默认情况下，MutationObserver将观察的范围限定为一个元素以及子节点的变化。可以把观察的范围扩展到这个元素的子树（所有后代节点），这需要在MutationObserverInit对象中将subtree属性设置为true。 <!DOCTYPE html> <html> &..
Javascript - 正确使用div的mouseout事件
小晖Allen的专栏
03-18 5809
在基于javascript的导航菜单中，很多情况下需要对鼠标是否已经离开了某个做出正确的判断，而仅仅对于这个的mouseout事件attach一个handler是无法正确的完成任务的，因为即使你attach了一个的onmouseout事件的handler，由于javascript中著名的event bubbling机制，会导致这个handler同样能够捕获到中其他childNode的mouse
Javascript基础知识（二）事件
10-25
本文是javascript系列文章的第二篇，主要介绍javascript事件，都是本人的一些心得，希望对大家有所帮助
JavaScript-study:JavaScript +基础知识（ES6语法，高级语法）
05-23
因此，我想通过做我所学的js来制作前端的基础知识。 通过学习这个node.js类，我们将学习js的语法以及如何在浏览器中使用js对其进行控制！ 计划 作为第一个计划，在学习js基础知识的同时，我们何时将针对JS ES6语法...
javascript-oop
08-04
要求 Javascript 语法基础知识 指数 对象介绍 操作原则
前端十年经验 - JavaScript基础知识大纲-思维构图.pdf
04-18
这份文件是一份前端十年经验的JavaScript基础知识大纲，主要是为了帮助前端开发者系统地学习和掌握JavaScript的基础知识。该大纲采用思维构图的方式，将JavaScript的基础知识按照不同的主题进行分类和整理，包括数据...
通信电源蓄电池组容量性充放电试验三措一案.docx
04-27
5G通信行业、网络优化、通信工程建设资料。
铁塔维护检测手段.docx
04-27
5G通信行业、网络优化、通信工程建设资料
通信设备安装施工组织方案.doc
04-27
5G通信、网络优化与通信建设
299-教育行业信息化与数据平台建设分享.pptx
04-27
299-教育行业信息化与数据平台建设分享.pptx
手写数字和字母数据集binaryalphadigs.mat
最新发布
04-27
手写数字和字母数据集binaryalphadigs.mat
JavaScript基础知识
08-02
回答: JavaScript是一门最流行的运行在浏览器的脚本语言，它与Java是两种完全不同的语言，无论在概念还是设计上。 JavaScript是一种轻量级的编程语言，可由所有的现代浏览器执行。它最早是在HTML网页上使用，用来给网页增加动态功能。JavaScript可以在客户端运行，它的解释器被称为JavaScript引擎，是浏览器的一部分。JavaScript可以通过行内样式、嵌入样式和外部样式来书写，可以写在HTML标签的行内，也可以写在script标签中，还可以写在外部的js文件中并在页面中引入。[1][2][3]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

无名一小卒

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

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

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

打赏作者

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

抵扣说明：

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

余额充值