事件定义
用户对页面操作的一种行为就是事件
常用的基本事件
1.click 元素点击
2.focus 鼠标获取焦点
3.blur 鼠标失去焦点
4.keyup 键盘抬起
5.keydown 键盘按下
6.onlaod 加载
7.resize 浏览器放大或缩小
8.change 输入框value值变化
9.load JavaScript程序加载
10.mouseover 鼠标移入
11.mouseout 鼠标移出
12.mousemove 获得鼠标指针在页面中的位置
事件级别
dom0级 直接在元素上放入一个事件
<div onclick="fn()" style="margin:10px;border:1px solid #ccc;padding:10px">
hello word
</div>
<script>
function testfn(){
alert()
};
<script>
dom1级 选择器.事件
var div = document.getElementsByTagName('div')
div[0].onclick = function(){
console.log(this)
}
dom2级 增加了addEventListener 包裹事件 removeEventListener移出事件
div[0].addEventListener('click',function(){
console.log(this)
})
dom1级 和 dom2级 区别
dom1级 同样一个事件 使用多次 最终执行最后一次 前面的会被覆盖掉
app.onclick = function(){
alert(1)
}
app.onclick = function(){
alert(2)
}
app.onclick = function(){
alert(3)
}
//print 只打印alert(3)
dom2级 同样一个事件 使用多次 可以执行多次
var f1 = function(){alert('f1')}
var f2 = function(){alert('f2')}
var f3 = function(){alert('f3')}
app.addEventListener('click',f1);
app.addEventListener('click',f2);
app.addEventListener('click',f3);
//点击 print alert(1) alert(2) alert(3) 会打印三次