js中的事件部分总结

Posted 2020-07-21 鱼鱼疯

一、HTML事件

　　　　html事件处理就是直接在HTML标签上添加事件，举例

　　　　　<p class="" onclick=function(){alert(HTML事件)}></p>

　　　　这种方式的好处是简单易懂，兼容性好。

　　　　缺点是代码的耦合性太高，不便于修改，而且一个事件只能监听一个function，多个function会被覆盖，并且事件无法删除。

二、DOM 0级处理事件

　　　　DOM 0级处理事件可以理解成通过修改标签元素的onclick属性，来加入事件。 举例

　　　　<div id="btn"></div>

　　　　<script>

　　　　　　var btn=document.getElementById("btn");

　　　　　　btn.onclick=function(){alert(DOM 0级事件)}　

　　　　</script>

　　　　　　删除方式为

　　　　　　btn.onclick=null;

　　　　这种方式的优点是耦合较低，产生的问题是只能监听一个事件，容易被覆盖。

三、DOM 2级处理事件（重点）

　　　　DOM 2级处理事件是通过addEventListener(参数一，参数二，参数三)的方式添加事件

　　　　　其中

　　　　　参数一：事件类型，如onclick onload，但在参数一种,前面的On 需要省略。

　　　　　参数二：回调函数：可以直接为某个function（）{},也可以将函数提取，直接写函数名，不必添加括号

　　　　　参数三：定义冒泡或捕获，true为捕获，false为冒泡，考虑到兼容器的问题（IE 678只支持冒泡，不支持捕获）在这里推荐使用false——冒泡

　　　　　function Dom(){alert(“DOM 2级处理事件”)}

　　　　　addEventListener("click",Dom,false);

　　　　　这里删除监听的方式为

　　　　　removeEventListener("click",Dom,false);

　　　　DOM 2级处理事件的有点是不会被覆盖，一次性可以添加多个监听事件，缺点是IE 8之下不可用（IE 8之下使用IE事件的处理程序）

四、 IE事件的处理程序（补充）

　　　　IE 6 7 8 9 10都支持的一种专属事件方式，通过attachEvent添加事件

　　　　举例

　　　　attachEvent(参数一，参数二)

　　　　其中参数一为事件类型，但和DOM 2级事件不同，这里的事件类型前面需要加上On

　　　　参数二为回调函数

　　　　因为是IE专属，默认为冒泡处理，所以没有参数三

　　　　举例：

　　　　　　function Ie（）{alert(IE专属事件)}

　　　　     btn.attachEvent("onclick",Ie);

　　　　　  删除事件用detachEvent

　　　　　  btn.detachEvent("onclick",Ie);