- 事件对象 Event
- 当事件的响应函数被触发的时候,浏览器每次都会将一个事件对象作为实参传递进响应函数
- 在事件对象中封装了当前事件相关的一切信息,比如:鼠标的坐标,键盘哪个按键被按下等- onmousemove
- 该事件将会在鼠标在元素中移动时被触发- 属性(event的属性)
- clientX
- 可以获取鼠标指针的可见水平坐标 - clientY
- 可以获取鼠标指针的可见垂直坐标 - div的偏移量,是相对于整个页面的
- pageX
- pageY
- 上面两个属性是可以获取鼠标相对于当前页面的坐标
- clientX
- 属性(event的属性)
- onwheel
- 该事件会在鼠标在元素中滚轮滚动的时候触发- event.wheelDelta
- 判断鼠标滚轮滚动的方向 - event.detail(在火狐浏览器中使用这个属性)
- 获取滚轮的方向 - 当滚轮滚动的时候,如果浏览器有滚动条,滚动条会随之滚动,这是浏览器的默认行为,如果不希望发生,则可以取消默认行为
- return false
使用addEventListner()方法绑定响应函数,取消默认行为时不能使用return false,需要使用event来取消默认行为
- event.preventDefault()
- event.wheelDelta
- 事件的冒泡
- 冒泡:事件的向上传导,当后代元素上的事件被触发的时候,如果满足条件,祖先的事件也会被触发
- 在开发中大部分冒泡都是有用的,如果不希望事件发生冒泡,可以通过事件对象来取消冒泡- canlcelBubble(属性)
event.cancelBubble=true; --这个东西可以取消冒泡
- canlcelBubble(属性)
- 事件的委派
- 指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件被触发的时候,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件
- 事件委派是利用了冒泡,通过减少代码,从而提升了效率- event.client
- 返回触发事件的对象
- event.client
- 事件的绑定
- 使用对象.事件 = 函数的形式绑定响应函数
- 只能同时为一个元素的一个事件绑定一个函数,如果同时绑定了多个函数,则后面的函数会覆盖前面的函数 - 如果想要触发多个函数,可以使用如下的响应函数的绑定方法
- addEventListener()
- 通过这个方法也可以为元素绑定函数
- 参数:- 事件的字符串,不要on
- 回调函数
- 是否在捕获阶段触发事件,需要一个布尔值,一般都传false
- addEventListener()
- 使用对象.事件 = 函数的形式绑定响应函数
- 事件的传播
- 微软公司的理解:事件应该是由内向外传播,也就是当事件触发的时候,应该先触发当前元素上的事件,然后再向当前元素上的元素进行传播
- 网景公司的理解:事件应该是由外向内传播,应该先触发当前元素的最外层祖先元素的事件- W3C综合了两个公司的方案,将事件传播分成了三个阶段
- 捕获阶段
- 在捕获阶段时从最外层的祖先元素,向目标元素进行事件的补货,但是默认此时不会触发事件 - 目标阶段
- 事件捕获到目标元素,捕获结束开始在目标元素上触发事件 - 冒泡阶段
- 事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件
- 如果希望在捕获阶段就开始执行事件,可以在addEventListener()方法的第三个参数设置成true
- 捕获阶段
- W3C综合了两个公司的方案,将事件传播分成了三个阶段
- 键盘的事件
- onkeydown
- 键盘被按下
- 第一次和第二次按下之间会有比较长的反应间隔,这是浏览器为了防止误触发生的 - onkeyup
- 按键被松开 - 键盘事件一般都会绑定给一些可以获取到焦点的对象
- return false 会使事件没办法响应,所以如果想要用户没办法输入某些东西的时候可以使用这个
- event.key
- 可以返回被按下的按键的字符串- altKey
- ctrlKey
- shiftKey
- 这三个可以用来判断alt ctrl和shift是否被按下,如果按下则返回true,否则返回false
- event.keyCode
- 这个会返回按键的编码
- 数字是从48-57
- onkeydown
- onmousemove
- BOM
- 浏览器对象模型
- BOM可以使我们通过JS来操作浏览器
- 在BOM中为我们提供了一组对象,用来完成对浏览器的操作
- BOM对象- Window
- 代表的是整个浏览器的窗口,同时window也是网页中的全局对象 - Navigator
- 代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器- 一般我们只会使用userAgent来判断浏览器的信息
- 是一个字符串,这个字符串中包含有用来描述浏览器信息的内容,不同的浏览器含有不同的userAgent
- 一般我们只会使用userAgent来判断浏览器的信息
- Location
- 代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面- 如果直接打印location,可以获取到当前的完整的路径
- 如果直接将location属性修改为一个完整的路径,或相对路径,则我们页面会跳转到这个页面,并且生成相应的路径
- assign()
- 跳转到其他的页面,作用和直接修改location一样
- 需要一个路径的字符串作为参数 - reload()
- 用于重新加载当前页面,作用和刷新按钮一样
- 如果在方法中传递一个true作为参数,则会强制清空缓存刷新页面 - replace()
- 可以使用一个新的页面替换当前页面,调用完毕也会跳转页面,不会生成历史记录
- History
- 代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录
- 由于隐私的原因,该对象不能获取到具体的历史记录- length
- 属性,可以获取到当前访问的链接数量 - back()
- 可以用来回退到上一个页面 - forward()
- 可以跳转到下一个页面,作用和浏览器的前进按钮一样 - go()
- 可以用来跳转到指定的页面
- 需要一个整数作为参数
1:表示向前跳转一个页面
2:表示向前跳转两个页面
- length
- Screen
- 代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息
- Window
- 定时器
- 如果希望一段程序,可以每见隔一段时间执行一次,可以使用定时调用- setInterval()
- 定时调用
- 可以将一个函数,每隔一段时间执行一次
- 参数:
1.回调函数,该函数会每隔一段时间被调用一次
2.每次调用间隔的事件,单位是毫秒
- 返回值:
返回一个Number类型的数据
这个数字用来作为定时器的唯一标识 - clearInterval()
- 用来关闭一个定时器
- 参数:
1.需要关闭的定时器的标识(定时器的名字或者定时器的号码也行) - 如果一个按钮绑定了开启定时器的东西,点击多次就会开启多个定时器,这就导致图片的切换速度过快,并且我们只能关闭最后一次开启的定时器,所以可以在按钮的内容最顶部先关闭之前的所有定时器
- 延时定时器
- 一个函数不马上执行,而是隔一段时间之后在执行
延时调用和定时调用的区别:定时调用会执行很多次,而延时调用只会执行一次
- setTimeout()
用来设置一个延时调用定时器,参数和定时调用的一样
- clearTimeout()
用来关闭一个延时调用
- setInterval()
- 类的操作
- 通过style属性来修改元素的样式,每修改一个样式,浏览器就需要重新渲染一次页面,这样执行的性能较差
- 修改box的class属性
<style> .b1 { width: 100px; height: 100px; background-color: red; } .b2 { width: 200px; height: 200px; background-color: yellow; } </style> <script> window.onload = function () { var box1 = document.getElementById("box1"); var btn01 = document.getElementById("btn01"); btn01.onclick = function () { box1.className = "b2"; } } </script> </head> <body> <button id="btn01">11111</button> <div id="box1" class="b1"></div> </body>
这样一来,我们只需要修改一次,即可同时修改多个样式,浏览器只需要重新渲染一次页面
-
如果想要两个类进行叠加
- 定义一个函数,用来向一个元素中添加指定的class属性
-
JSON
-
JS中的对象只有JS自己认识,其他的语言都不认识
-
JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别,并且可以转换为任意语言中的对象,JSON在开发中主要用来数据的交互
-
JSON的格式和JS对象的格式一样,只不过JSON字符串中的属性名必须加双引号
-
JSON对象分类
-
对象{
-
数组[]
-
-
JSON中允许的值
-
字符串
-
数值
-
布尔值
-
null
-
对象
-
数组
-
-
将JSON字符串转换为JS中的对象,提供了一个工具类,就叫JSON
- 这个对象可以帮助我们将一个JSON转换为JS对象,也可以将一个JS对象转换为JSON-
JSON.parse();
- 可以讲JSON字符串转换为js对象
- 需要一个JSON字符串作为参数,会将该字符串转换为JS对象 -
JSON.stringify()
-可以将一个JS对象转换为JSON字符串 -
eval()
- 这个函数可以用来执行一段字符串形式的JS代码,并将执行结果返回
- 如果使用这个函数的字符串中含有{},它会将这个{}当成是代码块,则需要在字符串前后各加一个() -
如果需要兼容IE7及以下的JSON操作,则可以通过引入一个外部的js文件来处理
-
-
JS 事件
最新推荐文章于 2024-09-26 01:42:12 发布