-
- weixin_慕码人0466761 2023-02-23
1html事件
通过 onclick 绑定一个函数。
例如：<input type="button" value="html事件点击" onclick="fun()">
<script>function fun(){
alert('hello MOOC')
}
主要是操作简单的点击事件
</script>
2DOM0级事件
事件绑定
例如：
<input type="buttom" value="dom0级事件” id="btn">
<script>
document.getElementById("btn").onclick = function(){
alert('hello MOOC2')
}
</script>
通过js语法获取DOM对象，通过onclick 等绑定一些事件。相当于一个分离了，逻辑操作跟结构是分开的。这样比较清晰。
3DOM2级事件
事件监听 【通过element（对象）.addEvenListener（函数）（event【事件名】, function【函数】, useCaptrue【可选指定事件是否捕获冒泡阶段执行。true执行，默认false.】(事件对象）)来做事件的监听】
removeEventListener移除事件监听
例如：
<inpunt type="button" value="dom2级事件" id="btn1">
<script>document.getElementById("btn1").addEventListener("click",fun2);
function fun2(){
alert('hello MOOC3')
}
</script>
(后两种用的比较多)
事件监听可以绑定多个事件（可以触发多个绑定事件）
事件绑定只能绑定一个事件（如果同时绑定两个点击事件，只执行最后一个绑定事件）
原因：js中不支持事件的重载，如果再绑定一个事件，相当于变量指向另外一个新的函数地址。
- 0赞 · 0采集
-
- 慕码人8469678 2021-10-27
三种事件绑定的异同
◆htm事件
◆dom0级事件
◆dom2级事件
<body>
< input type=" button" value="htm事件点击" onclick="fun()"丬r
input type=" button" value="dome级事件"id="btn"
input type=" button" value="dom2级事件"id="btn1">
<script>
/// JAvascript: ECMAScript DOM +BOM DOMe DOM1 DOM2
//狭义] avascript: ECMAScript ES6Es5Es3
/1、htm1事件
function fun (){
alert("hello Mooc")
}
2、dom级事件:事件绑定
document. getElementById(btn").onclick= function(){
alert('hello MOOC2')}
//3、dom2级事件：事件监听
//element.addEventListener(event,function,useCapture)removeEventListener
//event:(必需）事件名，支持所有DOM事件。
//function:(必需）指定要事件触发时执行的函数。
//useCapture:(可选）指定事件是否在捕获或冒泡阶段执行。true,捕获。false,冒泡。默认false
//IE8:element.attachEvent(event,function)
//event:(必需）事件类型。需加“on“，例如：onclick。
//function:(必需）指定要事件触发时执行的函数。
document.getElementById("btn1").addEventListener("click",fun2);
function fun2(){
alert('hello MOOC3')
}
/事件监听的优点:可以绑定多个事件;常规的事件绑定只执行最后绑定的事件
//js不支持事件重载,绑定事件相当于一个变量存储的是函数的地址,如果再绑定一个事件,相当于变量指向另一个函数的地址;事件监听相当于订阅发布者,改变了数据,触发了事件,订阅这个事件的函数被执行
- 0赞 · 1采集
-
- Schuck哦 2021-08-27
html 简单的点击事件
dom0级事件：事件绑定,逻辑和结构分开
dom2级事件：事件监听
事件监听的优点，可以绑定多个事件，常规事件绑定只执行最后的绑定事件
原因:js不支持事件重载,绑定事件相当于一个变量存储的是函数的地址,如果再绑定一个事件,相当于变量指向另个函数的地址;事件监听相当于订阅发布者,改变了数据,触发了事件,订阅这个事件的函数被执行
- 0赞 · 0采集
-
- 蜗牛_猴 2021-04-16
三种事件绑定的异同
广义的javascript: ECMAScript+DOM+BOM ,DOM0 DOM1 DOM2
狭义的javascript：ECMAScript, ES6 ES5 ES3
htlml事件
通过行内onClick 添加的事件
dome0级事件（事件绑定）
通过js代码给元素onclick属性赋值
DOM.onclick=function(){
alert('DOM0级事件')
}
demo2级事件(事件监听)
DOM.addEventListener('click',function,bool) // function 事件触发的回调函数 bool:事件处于冒泡阶段还是捕获阶段
移除：removeEventListener
优点：可以绑定多个事件，常规的事件绑定只执行最后绑定的事件
js不支持事件重载，绑定事件相当于一个变量存储的是函数的地址，如果再绑定一个事件，相当于变量指向另一个函数的地址；事件监听相当于订阅发布者，改变了数据，触发了事件，订阅这个事件的函数被执行。
总结：事件绑定相当于绑定到DOM的属性，重复绑定会覆盖。而事件监听相当于添加属性到DOM对象，多次监听，就会多次添加属性到DOM对象，所以都会触发，不会覆盖。
- 0赞 · 0采集
-
- 人心思动 2021-03-16
事件监听的优点:可以绑定多个事件;常规的事件绑定只执行最后绑定的事件
原因:js不支持事件重载,绑定事件相当于一个变量存储的是函数的地址,如果再绑定一个事件,相当于变量指向另
个函数的地址;事件监听相当于订阅发布者,改变了数据,触发了事件,订阅这个事件的函数被执行
-
截图1赞 · 1采集
