day25-课堂总结

BOM基础

1.什么是BOM - 浏览器对象模型(browser object model)
js中提供了一个全局的window对象,用来表示当前的浏览器
js中声明的全局变量,其实都是绑定在window对象属性中(使用window的属性和方法的时候,前面window可以省略)
2.window基本操作
a.打开新窗口
window.open(url) - 返回一个窗口对象
b.关闭窗口
window.close()
c.移动当前窗口
窗口对象.moveTo(x坐标,y坐标)
d调整窗口大小
窗口对象.resizeTo(x,y)
刷新 - window.reload()
f.获取浏览器的宽度和高度
innerWidth/innerHeight - 浏览器显示内容的部分的宽度和高度
outerWidth/outerHeight - 整个浏览器的宽度和高度
3.弹框
alert(提示信息) - 弹出提示信息(带确认按钮)
confirm(提示信息) - 弹出提示信息(带确认和取消按钮),返回值是布尔值,取消 - false 确认 - true
c.prompt(提示信息,输入框中的默认值) - 弹出一个带输入框和取消,确认按钮的提示框 - 点取消,返回值是null,点击确认返回的是输入框中输入的内容

定时事件

1.setInterval(函数,时间) - 每隔指定的时间,就执行一次函数,时间单位是毫秒,返回定时对象
clearInterval(定时对象) - 停止指定的定时器
1000毫秒 = 1秒
2.setTimeout(函数,时间) - 隔指定的时间执行函数(只执行一次)
clearTimeout(定时对象) - 停止定时
js是事件驱动语言
1.事件三要素(事件源,事件,事件驱动程序)
2绑定事件
第一步:获取事件源
第二步:绑定事件
第三步:写驱动程序
a.在标签内部给事件源的事件属性赋值
<标签 事件属性='驱动程序'><标签>
<标签 事件属性='函数名()'> <标签> - 一般不这样绑定
注意:这个时候被绑定的驱动程序如果是函数,那么这个函数中的this关键字是window
b.通过节点绑定事件()
标签节点.事件属性 = 函数
注意:这个时候函数中的this是事件源
c.通过节点绑定事件
标签节点.事件属性 = 匿名函数
注意:这个时候函数中this是事件源
d.通过节点绑定事件
标签节点.addEventListener(事件名,函数) - 指定的节点产生指定的事件后调用函数
事件名 - 字符串, 去掉on
注意:这个时候函数中的this是事件源,这种方式可以给同一个节点的同一事件绑定多个驱动程序
3.获取事件对象
当事件的驱动程序是一个函数的时候,函数中可以设置一个参数,来获取当前事件的事件对象
//参数evnet就是事件对象
//a.clientX/clientY - 事件产生的位置的坐标(相对浏览器内容的部分)

常见事件类型

1.onload - 页面加载完成对应的事件
window.onload = 函数
2.鼠标事件
onclick - 点击
onmouseover - 鼠标移入
onmouseout - 鼠标移出
onmousedown - 鼠标按下
onmouseup - 鼠标弹起
3.键盘事件
onkeypress - 按下弹起
键盘事件对象:key属性 - 按键的值, keycode属性 - 按键的编码
onkeydown - 按下
onkeyup - 弹起
4.输入框内容改变
onchange - 输入框输入状态结束

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 10,718评论 0 21
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,887评论 1 32
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,092评论 19 139
  • 睡得越迟,醒的越早。多想把自己耳朵割了,周围人的烦躁不安,就像泡腾片放进一杯水,不停的翻腾起来。最近,总想写点什么...
    Salome羁绊阅读 1,360评论 0 2
  • 什么是复杂度分析? 数据结构和算法解决是“如何让计算机更快时间、更省空间的解决问题”。 因此需从执行时间和占用空间...
    二毛_220d阅读 2,920评论 0 0

友情链接更多精彩内容