一、事件基础
1.行内事件属性赋值
<button onclick="alert('行内事件属性赋值')">点击按钮</button>
2.事件属性赋值
var btn=document.querySelector('button');
btn.onclick=fuction(){
alert('事件属性赋值')
}
3.事件监听
//type:事件类型
//listener:监听器(处理程序)
//useCapture:默认为false,设置为true是不会因冒泡触发监听器
const btn = ducment.querySelector('button');
btn.adadEventListener('click',fuction(){
alert('事件监听')
})
二、鼠标事件
使用事件属性赋值时,变成class1.onxxxx
click;单击鼠标触发。
contextmenu; 右键点击
dbclick; 双击左键触发
mouseenter; 指针移至元素范围内触发一次
mouseleave; 指针移出元素范围外触发移除
mouseover; 指针移至元或其子元素内,可能触发多次
mouseout; 指针移出元素,或者移至其子元素内,可能触发多次
over与out在指针进入子级时会进行触发,无特殊要求下建议使用enter和leave
三、键盘事件
使用事件属性赋值时,变成class1.onxxxx
1.keydown;按下任意键,按住可连续触发
2.keypress;按下按键触发,按住可连续触发,不能监听一些特殊按键(ALT/CTRL/SHIFT/ESC等)
四、键盘事件属性
1.keyCode;返回keypress事件触发的键的值的字符代码,或者keydown或keydown或keyup事件的键盘代码;
字符代码:ASCII字符的数字
键盘代码:键盘上真实键的数字
2.charCode;返回keypress事件触发时按下的字符键的字符Unicode值,用于keydown或keyup时总是返回0
3.key:返回按键标识符(区分大小写);keypress/keyup/keydown返回值相同
var input = document.querySelector('input')
input.addEvementListener('keydown',fuction(e){
console.log(e.keyCode);//65
console.log(e.charCode);//0
console.log(e.key);//a
})input.addEvementListener('keypress',fuction(e){
console.log(e.keyCode);//97
console.log(e.charCode);//97
console.log(e.key);//a
})input.addEvementListener('keydown',fuction(e){
console.log(e.keyCode);//65
console.log(e.charCode);//0
console.log(e.key);//a
})
五、窗口事件
1.load; 当整个页面 都完成加载时,触发load事件
//输出div.box中的文字内容
//方法一
window.addEventListener('load',fuction(){
console.log(document.querySelector('.box').innerHTML)
})
//方法二
window.onlaod=fuction(){
console.log(document.querySelector('.box').innerHTML)
}
2.beforeunload; window/document及它们的资源即将卸载时触发。
window.addEventListener("beforeunload",fuction(e){
var confirmationMessage="confirm close window?"
//兼容WebKit与非WebKit内核浏览器
(e||window.event).returnValue=confirmationMessage
return confirmationMessage
})
3.resize; 窗口大小改变时触发
//调整浏览器窗口时,获取可视窗宽高
window.addeventListener("resize",fuction(e){
console.log(window.innerWidth)//可视窗口宽
console.log(window.innerHeight)//可视窗口高
})
4.scroll; 元素内发生滚动时触发
//获取滚动条垂直滚动距离
window。addEventListener("scroll",fuction(){
var myTop= window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;//兼容写法
console.log(myTop)
})
六、BOM window对象
1.window对象
open(); 打开新的浏览器窗口
open(url,name,features,replace)
alert(); 显示警告框
close(); 关闭当前浏览器窗口
scrollTo(); 可把内容滑动到指定坐标
scrollBy(); 可将内容华东指距离(向对于当前位置)
innerWidth; 返回窗口的网页显示区宽度
innerHeight; 返回窗口的网页显示高度
2.location对象
herf; 返回当前完整地址
host; 返回主机名和端口号,通常指完整域名
protocol; 返回网址协议
port; 返回端口号
pathname; 返回网址路径部分
search; 返回网址中的?及?后的字符串,通常指查询参数
hash; 返回网址中的#及#后的字符串,通常指锚点名称
assign(url); 在当前页面打开指定新url(增加浏览记录)
reload; 重新打开当前页面
replace(url); 打开新url替换当前页面
3. history对象
back(); 返回历史记录的上一个url
forward(); 返回历史记录的下一个url
go(n); 返回对于当前记录的第n个url
4. navigator对象
platform; 返回操作系统类型
userAgent; 返回用户代理头
5. screen对象
availWidth; 返回屏幕的宽度,但不包括window任务栏
availHeight; 返回屏幕的高度,但不包括window任务栏
width; 返回屏幕总宽度
heigth; 返回屏幕总高度
七、BOM定时器
setTimeout(); 指定的毫秒数后调用函数或计算表达式
clearTimeout(); 清除定时器
setInterval(); 按照指定的周期来调用函数或表达式、
clearInterval(); 清除定时器