事件对象的属性：
<!-- <button id="btn">按钮</button>
<script>
var btn = document.querySelector('#btn')
btn.onmousedown = function (){
// 事件源:<button id="btn">按钮</button>
// console.log(event.target)
// ie事件源:<button id="btn">按钮</button>
// console.log(event.srcElement)
// 兼容性
// var target = event.target || event.srcElement;
}
</script> -->
事件源相对电脑屏幕的坐标，和鼠标按下哪个鼠标键的属性值
<!-- <script>
body = document.querySelector('body')
// body.onmousemove = function (){
// // 鼠标到屏幕的坐标
// console.log(event.screenX)
// console.log(event.screenY)
// }
body.addEventListener('mousedown',function (){
// 得到按下的是鼠标的左键 是 0 中间按钮是1 右边按钮是2
console.log(event.button)
})
</script> -->
<!-- 键盘的常见事件及键盘事件的属性，每个键代表的ASCLL值： -->
<!-- <script>
// onkeydown: 任意键按下瞬间就会触发
window.onkeydown = function (){
console.log('谁让你按键盘的')
}
</script> -->
<!-- <script>
// onkeypress: 字符串（a-z0-9符号）按下瞬间就会触发
window.onkeypress = function (){
console.log('谁让你按键盘的')
}
</script> -->
<!-- <script>
// onkeyup: 按键抬起触发的事件
window.onkeyup = function (){
console.log('有本事按着不要松开')
}
</script> -->
<!-- <script>
// ctrlKey 判断按键按下的时候有没有按下ctrl ，返回布尔值
window.onkeydown = function (){
// 按了就是true 没按就是false
console.log(event.ctrlKey)
}
</script> -->
<!-- <script>
// altKey 判断按键按下的时候有没有按下alt ，返回布尔值
window.onkeydown = function (){
// 按了就是true 没按就是false
console.log(event.altKey)
}
</script> -->
<!-- <script>
// shiftKey 判断按键按下的时候有没有按下shift ，返回布尔值
window.onkeydown = function (){
// 按了就是true 没按就是false
console.log(event.shiftKey)
}
</script> -->
<!-- <script>
// 事件对象的属性
// keyCode 返回值是键对应的值 onkeydown 不区分字母大小写
// window.onkeydown = function (){
// // enter = 13 a = 65 A = 65
// console.log(event.keyCode)
// }
// keyCode 返回值是键对应的值 onkeypress 不区分字母大小写
window.onkeypress = function (){
// enter = 13 a = 97 A = 65
console.log(event.keyCode)
}
</script> -->
<!-- <script>
// ie的低版本 event.which 其他浏览器现在也支持
window.onkeydown = function (){
// enter = 13 a = 65 A = 65
console.log(event.which)
}
</script> -->
<script>
// 兼容写法
// var keyCode = event.keyCode || event.which
</script>
事件的绑定
<script>
/*
事件的绑定
1.dom0级 绑定
事件源.onclick = function (){}
再写一个事件源的时候就会覆盖
on+事件
2.dom2级 绑定
addEventListener() //标准浏览器使用 事件源.addEventListener('事件类型',事件处理函数) 事件类型不需要on
// 同时可以给事件类型绑定多个处理函数
attachEvent() //IE 低版本使用 事件源.attachEvent('on事件类型',事件处理函数)
// 同时执行多个函数事件的时候顺序是从事件尾开始执行的 只有两个参数
*/
</script>
<!-- <div id="btn">按钮</div>
<script>
div = document.querySelector("#btn")
// 绑定两个事件源
div.addEventListener('click',function (){
console.log('111')
})
div.addEventListener('click',function (){
console.log('222')
})
</script> -->
<!-- <div id="btn">按钮</div>
<script>
div = document.getElementById("btn")
console.log(div)
// 绑定两个事件源
div.attachEvent('onclick',function (){
console.log('111')
})
div.attachEvent('onclick',function (){
console.log('222')
})
</script> -->
<script>
/*
事件的解绑
复杂数据类型的比较，复杂数据类型的变量存储的就是一个在 堆 里面的地址
复杂数据类型在比较的时候，是进行地址的比较。
*/
/*
1-事件名 click
2-事件处理函数
3-监听 冒泡还是捕获过程 ，false 监听 冒泡过程
实际我们在写程序 只监听冒泡过程 ，第三个参数不传入，默认就是 冒泡
*/
</script>
<!-- <script>
// 复杂数据类型的比较
var obj1 = {name:'zhang'}
var obj2 = {name:'zhang'}
var obj3 = obj1
// 当对象的地址一样的时候才会返回true
// false
console.log(obj1 == obj2)
// true
console.log(obj1 == obj3)
</script> -->
<!-- <div class="box">按钮</div>
<button id="btn">解除绑定事件</button>
<script>
事件的解绑：
/*
dom0级的事件解绑 ：
1.因为赋值的是行为，直接再次给他赋值为null，就会把之前的事件函数给覆盖掉
*/
_box = document.querySelector(".box")
_box.onclick = function (){
console.log('111')
}
_btn = document.querySelector("#btn")
// 当点击解除绑定事件的时候，再次点击div就没有点击效果了
_btn.onclick = function (){
_box.onclick = null
}
</script> -->
<!-- <div class="box">按钮</div>
<button id="btn">解除绑定事件</button>
<script>
/*
dom2级的事件解绑：
removeEventListener('事件源'，要解除绑定事件的函数)
注意：当你要解绑函数的时候，绑定的函数一定要是一个赋值式函数,或者是有函数名的函数
*/
_box = document.querySelector(".box")
_btn = document.querySelector("#btn")
function a(){
console.log('111')
}
// a表示的式函数的地址
_box.addEventListener('click',a)
_btn.addEventListener('click',function (){
_box.removeEventListener('click',a)
})
</script> -->
<!-- IE 低版本 -->
<!-- <div id="box">按钮</div>
<button id="btn">解除绑定事件</button>
<script>
/*
dom2级的事件解绑：
detachEvent('事件源'，要解除绑定事件的函数)
注意：当你要解绑函数的时候，绑定的函数一定要是一个赋值式函数,或者是有函数名的函数
*/
_box = document.getElementById("box")
_btn = document.getElementById("btn")
function a(){
console.log('111')
}
_box.attachEvent('onclick',a)
_btn.attachEvent('onclick',function (){
_box.detachEvent('onclick',a)
})
</script> -->
事件的阻止默认行为：
<!-- <a href="javascript:;">清除a的跳转功能</a>
<script>
/*
有些标签默认会进行跳转，提交等等
*/
// 清除a标签的跳转功能
// href="javascript:;"
</script> -->
<form action="" method="get">
<input type="text" name="username" id="" />
<input type="text" name="password" id="" />
<input type="submit" name="" id="btn" value="注册" />
<button>提交</button>
<!-- input type=button没有提交行为 -->
<input type="button" name="" id="btn" value="注册" />
</form>
<script>
/*
表单中所有submit按钮，默认会提交，刷新当前页面
input type=button没有提交行为
*/
var btn = document.querySelector('#btn')
btn.onclick = function (e){
console.log('111')
// 阻止默认的提交行为
e.preventDefault(); //标准
// e.returnvalue = false //ie9记一下低版本
// return false //通用
}
</script>
