Web API -DAY05
通过on方式注册事件（DOML0)
语法:
事件源.on事件类型= function(){}
代码演示:
<body>
<input type="button" value="按钮">
<script>
let btn = document.querySelector('input')
btn.onclick = function () {
this.style.color = 'red'
}
</script>
</body>
on方式注册事件和 addEventListener 注册事件的区别
-
on方式注册事件(DOML0)
-
addEventListener 注册事件(DOML2)
-
备注:标签行内js代码的写法叫 DOML1
-
DOML0方式注册的事件,同一种事件只能注册一次（后面的事件会将前面的覆盖掉）
-
本质上DMOL0是在给对象赋值，类似 obj.uname=‘张三' ，只能保存一个值。
-
-
DOML2方式注册的时候.同一种事件可以注册多次
-
本质上相当于调用函数执行代码,函数可以被调用多次调用函数，类似：obj.eat()
-
移除事件
事件源.on事件类型= null
如果元素是通过DOML0方式注册的事件,那么移除事件的时候通过:
事件源.on事件类型= null; 移除事件 （重新赋值，覆盖掉）
事件源.on事件类型= ' '; （也可以）
事件源.on事件类型= 0 ; （也可以）
事件源.removeEventListener('事件类型'，函数名);
如果元素注册事件通过DOML2方式注册的,那么移除事件的时候需要按照如下步骤：
-
如果确定要移除事件,则在注册事件的时俱,必须使用函数名方式注册。
-
通过
事件源.removeEventListener('事件类型'，函数名);移除
<body>
<input type="button" value="按钮">
<script>
let btn=document.querySelector('button')
function fn() { //一个匿名函数
console.log(123)
}
btn.addEventListener('click',fn); //点击事件
//移除事件
btn.removeEventListener('click',fn)
</script>
</body>
页面加载事件
场景
页面加载语法
代码演示
原因
练习.
<body>
<script>
window.onload = function () {
let btn = document.querySelector('input')
btn.onclick = function () {
console.log(123)
}
}
</script>
<input type="button" value="按钮">
</body>
滚动事件
代码演示
height:3000px
写法一
写法二
通过js获取元素大小
通过div获取元素的宽度