键盘事件
//按键按下
document.onkeydown = function(){
console.log("onkeydown")
}
//按键抬起
document.onkeyup = function(){
console.log("onkeyup")
}
//按键被触发，获取输入框内容的时候，永远少一位
document.onkeypress = function(){
// console.log("onkeypress")
console.log(document.getElementsByTagName("input")[0].value)
} 事件对象
鼠标事件中：
clientX -- 鼠标位置，相对于可视化窗口的距离，距离左边
clientY -- 鼠标位置，相对于可视化窗口的距离，距离顶部
screenX -- 鼠标，距离屏幕左边的距离
screenY -- 鼠标，距离屏幕顶部的距离
pageX -- 距离页面左边
pageY -- 距离页面顶部
键盘事件：
console.log(event.keyCode)
console.log(event.which)事件绑定
//事件绑定汇总
document.onclick = function(){
console.log(123)
}
//不能同时绑定两个点击事件，会以最后的生效
document.onclick = fn1
document.onclick = fn2
function fn1(){
console.log("fn1")
}
function fn2(){
console.log("fn2")
}
//同时绑定多个事件 attachEvent -- ie浏览器（11以下的版本,在8号版本以下有执行顺序的问题）
document.attachEvent("onclick",fn1)
document.attachEvent("onclick",fn2)
//addEventListener 谷歌浏览器/火狐等高版本浏览器支持
// addEventListener("事件名",函数,是否开启事件捕获)
document.addEventListener("click",fn1,true)
document.addEventListener("click",fn2,true) //第三个参数可省，默认为false 阻止默认行为
document.getElementsByTagName("img")[0].onmousedown = function(){
console.log(123)
return false
}
document.onkeydown = function(event){
console.log(event.which)
// return false
event.preventDefault()
}
//阻止冒泡 ： ev.cancelBubble = true true阻止冒泡 false允许冒泡
event.cancelBubble = true事件的取消方式
document.onclick = function(){
console.log(123)
}
document.onclick = null //取消的方式1
function fn(){
console.log(789)
}
document.attachEvent("onclick",fn)
document.detachEvent("onclick",fn) //取消方式2
document.addEventListener("click",fn,false)
document.removeEventListener("click",fn,false) //取消方式3 右键事件
document.oncontextmenu = function(event){}滚动事件
outer.onmousewheel = myScroll
outer.addEventListener("DOMMouseScroll",myScroll)
function myScroll(event){
if(event.wheelDelta){
//存在event.wheelDelta参数，说明一定是ie/谷歌浏览器
if(event.wheelDelta>0){
console.log("向上")
}else{
console.log("向下")
}
}else{
//没有event.wheelDelta参数，说明是 火狐浏览器
if(event.detail<0){
console.log("向上")
}else{
console.log("向下")
}
}
}
//IE chrome
document.onmousewheel = function(event){
console.log("ie或者谷歌")
console.log(event.wheelDelta)
if(event.wheelDelta>0){
console.log("向上")
}else{
console.log("向下")
}
}
//火狐浏览器的滚轮事件
document.addEventListener("DOMMouseScroll",function(event){
// console.log("火狐")
console.log(event.detail)
//根据 event.detail 的正负判断是向上/向下
if(event.detail<0){
console.log("向上")
}else{
console.log("向下")
}
}) 常用的BOM操作
//javascript = ECMAscript + DOM + BOM
//BOM (浏览器对象模型)：所有浏览器相关的方法/对象都是BOM操作
//常用BOM操作：
//1，window 窗口对象 innerWidth innerHeight
//2，timing 计时器 setInterval setTimeOut clearInterval
//3,弹窗 alert confirm prompt
$id("alert").onclick= function(){
alert("这里是alert弹出窗口")
}
//确认框
$id("confirm").onclick= function(){
//获取用户是确定还是取消
var cfm = confirm("这里是confirm弹出窗口")
// console.log(cfm)
if(cfm){
//点击了确定
console.log("用户选择了确定")
}else{
//选择了取消
console.log("用户选择了取消")
}
}
// //带输入框的弹框
$id("prompt").onclick= function(){
var prm = prompt("这里是prompt弹出窗口")
console.log(prm) //获取到用户输入的内容
}
// 4,处理页面跳转 open() close()
$id("open1").onclick = function(){
window.open("01-DOM操作的简单认识.html","_self")
// window.open("01-DOM操作的简单认识.html","_blank")
}
$id("close").onclick = function(){
window.close()
}
// 5，history 前进后退的历史记录
console.log(window.history)
console.log(history)
console.log(history.length) //获取当前前进后退历史记录的长度
//history对象提供了3个方法 back返回 forward前进 go
$id("forward").onclick = function(){
//控制前进下一个页面
window.history.forward()
}
//点击 back ，返回上一个页面
$id("back").onclick = function(){
//控制前进下一个页面
window.history.back()
}
//点击 go按钮，控制页面跳转多级 2前进两个页面 -2后退两个页面
$id("go").onclick = function(){
history.go(-2)
}
// 6，location 页面的路径url
console.log(location.href) //当前页面的路径
console.log(location.search) //访问get请求的查询参数
console.log(location.hash) //访问hash参数 以#开头
// 7，【了解】 浏览器用户代理 window.navigator.user-Agent
console.log(window.navigator.userAgent)
//谷歌
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
//ie
// Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko
// Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
//火狐
// Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:84.0) Gecko/20100101 Firefox/84.0
if(window.navigator.userAgent.indexOf("Chrome")>0){
console.log("谷歌")
}
if(window.navigator.userAgent.indexOf("Firefox")>0){
console.log("火狐")
}
if(window.navigator.userAgent.indexOf("Trident")>0){
console.log("IE")
}
// 8，窗口的滚动距离 窗口的滚动事件onscroll 【*****】
window.onscroll = function(){
console.log(document.documentElement.scrollTop)
}
$id("top").onclick = function(){
document.documentElement.scrollTop = 0
}
201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
