JavaScript学习笔记（三）

最新推荐文章于 2024-05-28 11:44:38 发布
最新推荐文章于 2024-05-28 11:44:38 发布
阅读量486 收藏
点赞数
文章标签： javascript 前端 dom bom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44992579/article/details/122846287
版权

目录

1. 事件对象

1.1 事件对象的常见属性和方法

2.常用的鼠标事件

2.1 常用鼠标事件-----禁止复制功能的实现

2.2 鼠标事件对象MouseEvent

3. 键盘事件

3.1 常用的键盘事件

3.2 键盘事件对象KeyboardEvent

三、BOM

1. window对象的常见事件

1.1 页面加载事件

1.2 窗口加载事件

1.3 调整窗口大小事件

1.4 定时器

1.5 location对象

1.6 navigation对象

1.7 history对象

1. 事件对象

1.1 事件对象的常见属性和方法

e.target                        返回触发事件的对象（标准），this返回的是绑定事件的对象
e.srcElement               返回触发事件的对象（非标准IE6-8使用）
e.type                           返回事件的类型，比如click mouseover 不带on
e.returnValue               该属性阻止默认事件(默认行为)（非标准ie6-8使用），比如不让链接跳转
e.preventDefault()        该方法阻止默认事件(默认行为)（标准），比如不让链接跳转

我们可以利用return false 也能阻止默认行为没有兼容性问题特点: return 后面的代码不执行了，
而且只限于传统的注册方式
e.stopPropagation()     阻止冒泡（标准）

e.cancelBubble 该属性阻止冒泡（非标准ie6-8使用）

2.常用的鼠标事件

2.1 常用鼠标事件-----禁止复制功能的实现

1.禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单
document. addEventListener ('contextmenu', function(e) {
e. preventDefault() ;
})

2.禁止鼠标选中( selectstart开始选中)

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

2.2 鼠标事件对象MouseEvent

e.clientX       返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY       返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX        返回鼠标相对于文档页面的X坐标1E9+ 支持
e.pageY         返回鼠标相对于文档页面的Y坐标1E9+ 支持
e.screenX      返回鼠标相对于电脑屏幕的X坐标
e.screenY      返回鼠标相对于电脑屏幕的Y坐标

3. 键盘事件

3.1 常用的键盘事件

onkeyup           某个键盘按键被松开时触发
onkeydown      某个键盘按键被按下时触发
onkeypress      某个键盘按键被按下时触发，但是它不识别功能键，比如ctrl shift箭头等
执行顺序：keydown -> keypress -> keyup

3.2 键盘事件对象KeyboardEvent

e.keyCode       案件的ASCⅡ码值，keyup和keydown不区分字母大小写

三、BOM

1. window对象的常见事件

1.1 页面加载事件

window.οnlοad=function(){ }         页面内容全部加载完毕后执行，只执行最后一个

window.addEventListener('load',function(){      })  可以执行多个

1.2 窗口加载事件

document.addEventListener('DOMContentLoaded',function(){   })   仅当DOM加载完成，不包含样式表、图片、flash等，IE9以上支持

1.3 调整窗口大小事件

window.οnresize=function(){  }        窗口大小发生变化时触发事件

window.addEventListener('resize',function(){ })

1.4 定时器

1.这个时间后调用:window.setTimeout(调用函数，[延迟的毫秒数]);

停止定时器：window.clearTimeout(timeoutID);

2.每隔这个时间调用：window.setInterval(回调函数,[间隔的毫秒数]);

停止定时器：window.clearInterval(timeoutID);

1.5 location对象

1.location对象的属性：

location.href              获取或者设置整个URL
location. host            返回主机(域名)
location.port              返回端口号如果未写返回空字符串
location.pathname    返回路径
location. search        返回参数
location. hash           返回片段#后面内容 常见于链接锚点

2.location对象的方法：

location.assign)         跟href-样,可以跳转页面(也称为重定向页面)
location.replace()      替换当前页面，因为不记录历史，所以不能后退页面
location.reload()        重新加载页面，相当于刷新按钮或者f5，如果参数为true强制刷新ctrl+f5

1.6 navigation对象

不同终端打开不同的页面:

if ( (navigator.userAgent.match (/ (phone | pad | pod | iPhone |iPod| ios | iPad |Android | Mobile |BlackBerry | IEMobile |MQQBrowser | JUC | Fennec |wOSBrowser | BrowserNG I Webos | Symbian | Windows Phone)/i))) {
        window. location.href ="";    //手机
} else {
        window. location.href = "";     //电脑
}

1.7 history对象

back()            后退功能
forward()        前进功能
go(参数)        前进后退功能参数如果是1前进1个页面如果是-1后退1个页面

要每天学习啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
调整窗口大小事件 2020/11/24
weixin_50286102的博客
11-24 211
调整窗口大小事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti
Ruffy javascript 学习笔记
10-29
Ruffy javascript 学习笔记
javascript学习笔记
11-24
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要目的是，验证发往服务器端的数据、增加Web互动、加强用户体验度等。
Document: DOMContentLoaded 事件（MDN社区）
黛琳ghz的博客，期待你的关注。
01-02 1000
当纯 HTML 被完全加载以及解析时，DOMContentLoaded事件会被触发，而不必等待样式表，图片或者子框架完成加载。
javascript总结
妙蛙真香的博客
09-14 413
操作样式 操作样式 操作元素.style.元素属性 = '属性值'; 添加样式或修改样式属性 操作元素.setAttribute('style','color: #fff; font-size:24px;') 操作元素.getAttribute("样式名") 操作样式名 操作元素.className = '样式类名' className或覆盖之前的样式名 操作元素.classList.add("样式类名") 添加样式，不会覆盖之前样式 操作元素.classList.remove("样
窗口页面加载事件
weixin_52212950的博客
03-04 2039
在之前没有学习 BOM 时，我们书写 HTML 和 Script 的顺序是先写完 HTML 再写 Script，目的是先让 HTML加载完，才能执行后面的交互效果，但是学习了 BOM 后，我们就可以实现 Script 标签随意放啦 window.addEventListener('load',function(}) : 这个方法可以使文档内容全部加载完后再执行 JS 的内容，包括了图片，flash，css，脚本文件等等，(如果使用的 window.onload=function(){} 的话那么相同的元
addEventListener
weixin_33898233的博客
11-13 950
先看个例子： document.getElementById("myBtn").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World"; }); 1 2 3 定义和用法 addEventListener() 方法用于向指定元素添加事...
js 加载事件
weixin_45773503的博客
07-01 728
1. 传统方式 所有的都加载完（包括图片，，css，js，等） document.onload = function() { console.log(11); } 2. addEventListener方法 所有的都加载完（包括图片，css，js，等） window.addEventListener('load', function() { console.log(11);
ready()与onload()事件的区别 &document.addEventlistener()
weixin_53341042的博客
03-09 877
$(document).ready(function(){}) 1、$(document).ready()是当页面当中的DOM元素加载完成后就会去触发js代码；只是等标签加载完成，不管外部引入的img、视频。音频等文件。 2、$(document).ready() 可以同时编写多个且可以执行多次。 3、其他形式： $().ready(function(){})、 $(function(){}) window.onload() = function(){} 1、window.onload()是页面全部加载完成
页面加载时触发的事件及顺序
10-13 1141
前言 　　页面加载时，大致可以分为以下几个步骤： 　　开始解析HTML文档结构 　　加载外部样式表及JavaScript脚本 　　解析执行JavaScript脚本 　　DOM树渲染完成 　　加载未完成的外部资源（如 图片） 页面加载成功 　　那么在这整个过程中触发了哪些常用的事件呢？ documentreadystatechange事件 　　r...
JavaScript 学习笔记（十一）
10-29
继续学习的是document对象。
JavaScript学习笔记
04-10
JavaScript学习笔记
javaScript学习笔记
03-10
个人在学习javaScript过程中做的一些笔记和代码实例
document.addEventListener
weixin_61151047的博客
12-15 1万+
document.addEventListener("事件名称", 函数, false); function 某函数(event){ // 方法执行 } addEventListener里最后一个参数决定该事件的响应顺序； document.addEventListener("事件名称", 函数, true): 如果为true时事件执行顺序为 addEventListener ---- 标签的onclick事件 ---- document.onclick 　 documen...
判断页面是否加载完成
lio-zero 的博客
03-06 1035
Load 事件触发代表页面中的 DOM，CSS，JS，图片已经全部加载完毕。 DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析，不需要等待 CSS，JS，图片加载。 document.addEventListener('load', function () {}) document.addEventListener('DOMContentLoaded', f...
window.addEventListener()和document.addEventListener()区别
xinxin_zhu的博客
03-29 6993
window.addEventListener('load',function(){ //页面的全部资源加载完后才会执行 包括 图片 视频等 }) window.addEventListener('DOMContentLoaded',function(){ //Dom 渲染完即可执行 此时图片视频还可能没加载完 }) ...
HTML DOM addEventListener() 方法
anzy/pine的博客
01-10 6231
element.addEventListener(event, function, useCapture) 参数 描述 event 必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event
扫盲-----addEventlistener()方法，事件监听(一)
热门推荐
yangchunshang的博客
06-04 5万+
一、扫盲事件起因    时间：2018年6月1日周五下午，原本我以为我已经把当前的bug改好，应该没啥问题了，坐等下班公司聚餐（开心）突然，隔壁同组大哥，哎。。。。cp,你看看，你这个首页报了很多错哎。我的第一反应就是，不可能，怎么会有错误呢，我明明都自己测过好几次了。我一看，我去，果然。。。。首页报的错误都是在我写的组件里面出现的同一个错误。我的天。。。。。当页面缩放时，渲染页面提示,某方法不存...
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
最新发布
JIngJaneIL的博客
05-28 620
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
前端学习笔记 javascript
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值