前端笔记15

目录

1.事件的传播 

2.拖拽

3.滑轮事件

4.键盘事件

 4.BOM对象

(1)window

(2)Navigator

 (3)Location

(4)History

(5)Screen


1.事件的传播 


引入:   微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件,然后再向当前元素的祖先元素上传播,也就说事件应该在冒泡阶段执行。 网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素的事件,然后在向内传播给后代元素

w3C综合了两个公司的方案,将事件传播分成了三个阶段
(1)捕获阶段: 在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件

(2)目标阶段:事件捕获到目标元素,捕获结束开始在目标元素上触发事件

(3)冒泡阶段:事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件
如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true,一般情况下我们不会希望在捕获阶段触发事件,所以这个参数一般都是false。

IE8及以下的浏览器没有捕获阶段。

2.拖拽

拖拽的流程
1.当鼠标在被拖拽元素上按下时,开始拖拽onmousedown

2.当鼠标移动时被拖拽元素跟随鼠标移动onmousemove

3.当鼠标松开时,被拖拽元素固定在当前位置onmouseup
当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容,此时会导致拖拽功能的异常,这个是浏览器提供的默认行为,
如果不希望发生这个行为,则可以通过return false来取消默认行为。但是其对IE8不起作用。

当调用一个元素的setCapture()方法以后,这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上
setCapture():只有IE支持,但是在火狐中调用时不会报错,而如果使用chrome调用,会报错

解决其兼容性问题语法:元素名.setCapture&&setCapture();
取消捕获:元素名.releaseCapture()

3.滑轮事件

onmousewheel鼠标滚轮滚动的事件,会在滚轮滚动时触发,但是火狐不支持该属性。
在火狐中需要使用DOMMouseScroll来绑定滚动事件注意该事件需要通过addEventListener()函数来绑定。

当滚轮滚动时,如果浏览器有滚动条,滚动条会随之滚动,*这是浏览器的默认行为,如果不希望发生,则可以取消默认行为。

使用addEventListener()方法绑定响应函数,取消默认行为时不能使用return false,需要使用event来取消默认行为,但是IE8不支持event.preventDefault();这个玩意,如果直接调用会报错。

4.键盘事件

onkeydown:按键被按下

onkeyup:按键被松开
键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document。

可以通过keyCode来获取按键的编码,通过它可以判断哪个按键被按下
除了keyCode,事件对象中还提供了几个属性

altKey、ctrlKey、shiftKey这个三个用来判断alt ctrl 和shift是否被按下,如果按下则返回true,否则返回false
在文本框中输入内容,属于onkeydown的默认行为
果在onkeydown中取消了默认行为,则输入的内容,不会出现在文本框中。

 4.BOM对象

定义:浏览器对象模型
 BOM可以使我们通过JS来操作浏览器
在BOM中为我们提供了一组对象,用来完成对浏览器的操作-BOM对象

(1)window

代表的是整个浏览器的窗口,同时window也是网页中的全局对象

这些BOM对象在浏览器中都是作为window对象的属性保存的,

可以通过window对象来使用,也可以直接使用

方法:

1)setInterval( )---定时调用
可以将一个函数,每隔一段时间执行一次

参数:回调函数,该函数会每隔一段时间被调用一次

        每次调用间隔的时间,单位是毫秒
返回值:
       返回一个Number类型的数据
       这个数字用来作为定时器的唯一标识

2)clearInterval()可以用来关闭一个定时器
方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器

(2)Navigator

代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器

在IE11中已经将微软和IE相关的标识都已经去除了,所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了。

appName 属性可返回浏览器的名称。

appName 属性是一个只读到字符串,声明了浏览器的名称。在基于 Netscape 的浏览器中,这个属性的值是 "Netscape"。在 IE 中,这个属性的值是 "Microsoft Internet Explorer"。其他浏览器可以正确地表示自己或者伪装成其他的浏览器以达到兼容性。

userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值。

 (3)Location

代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页

如果直接打印location,则可以获取到地址栏的信息.(当前页面的完整路径)
如果直接将location属性修改为一个完整的路径,或相对路径则我们页面会自动跳转到该路径,并且会生成相应的历史记录

assign( ):用来跳转到其他的页面,作用和直接修改location一样
reload( ):用于重新加载当前页面,作用和刷新按钮—样
如果在方法中传递一个true,作为参数,则会强制清空缓存刷新页面
replace( ):可以使用一个新的页面替换当前页面,调用完毕也会跳转页面
                   不会生成历史记录,不能使用回退按钮回退
 

(4)History

代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录
由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页而且该操作只在当次访问时有效

1}length
属性,可以获取到当成访问的链接数量
2)back
可以用来回退到上一个页面,作用和浏览器的回退按钮一样
3)forward( )
可以跳转下一个页面,作用和浏览器的前进按钮一样

4)go
可以用来跳转到指定的页面-它需要一个整数作为参数
1:表示向前跳转—个页面相当于forward()

2:表示向前跳转两个页面
-1∶表示向后跳转一个页面

-2:表示向后跳转两个页面
 

(5)Screen

代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息 
 


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值