事件

最新推荐文章于 2024-09-25 18:15:20 发布

Edasi

最新推荐文章于 2024-09-25 18:15:20 发布

阅读量180

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Edasi/article/details/104278256

版权

事件捕获–由父节点向子节点捕获
事件冒泡–由子节点向父节点冒泡
先捕获后冒泡（中间还有一个处于目标阶段）

<html>
<body>
	<div></div>
</body>
</html>

除上述代码外还有document
捕获顺序：document --> <html> --> <body> 停止（处于目标<div>阶段）
冒泡顺序：<div> --> <body> --> <html> --> document

DOM0级事件处理程序
如onclick
修改：将属性值设置为一个函数

var btn = document.gertElementById("myBtn");
btn.onclick = function(){
	alert(this.id)
}

删除：属性值设置为null

btn.onclick = null

DOM2级事件处理程序
两个方法：
addEventListener(要处理的事件名，处理函数，布尔值)
removeEventListener(要处理的事件名，处理函数，布尔值)
布尔值为true则表示捕获阶段调用，布尔值为false则表示捕获阶段调用
另注意：处理的事件名不加on
移除时大致相同，但移除时不可移除匿名的处理函数要移除函数名

由于浏览器等问题，自己可手写跨浏览器事件处理程序

var EventUtil={
   addHandler:function(element,type,handler){ //添加事件
      if(element.addEventListener){
         element.addEventListener(type,handler,false);  //使用DOM2级方法添加事件
      }else if(element.attachEvent){                    //使用IE方法添加事件
         element.attachEvent("on"+type,handler);
      }else{
         element["on"+type]=handler;          //使用DOM0级方法添加事件
      }
   }