事件

事件的兼容

1、addEventListener

​ 缺点：不支持IE8及以下，方法名太长

​ 优点：

• 支持捕获和冒泡阶段分开侦听

• 支持事件抛发机制

• 支持同一个事件做多个事件回调函数

• 事件使用时可以将函数与内容完全分离

​ 2、attachEvent

​ 缺点：IE8以上不支持，没有捕获，不支持一次点击，未来被淘汰

​ 优点：

• 支持IE8以下，

• 并且可以使一个事件调用多个回调函数

• 事件使用时可以将函数与内容完全分离

​ 3、οnclick=fn

​ 优点:

• 全浏览器支持，不考虑兼容问题，

• 代码便捷

​ 缺点：

• 不支持事件抛发机制，只能使用系统默认事件

• 同一个元素同一个事件不支持多个回调函数

• 因为代码大量使用匿名函数，容易造成回调地狱，并且在开发中代码实际功能不能分离

• 删除事件

div.onclick=function(){
            console.log("a");
            div.onclick=null
        } 

• 下面把上面覆盖了，不支持多个回调函数

    div.onclick=function(){
            console.log("a");
        }
        div.onclick=function(){
            console.log("b");//下面把上面覆盖了，不支持多个回调函数
        }

事件对象

• 事件类型
  • e.type click
• 事件目标对象
  • e.target e.srcElement
• 事件侦听对象
  • e.currentTarget this
• 设置取消冒泡
  • e.cancalBubble

Event事件

• change只能针对表单触发

• input 如果input.value值发生改变，并且失去焦距触发

  • input checkbox radio

• select select.value是选中的值

  • 如果增加多选 multiple
  • select.selectedOptions 被选择多个元素
  • select.selectedIndex 选择下标

• load 和error 用于图片的加载，Ajax通信以及JSON或者其他文件的加载等

• load是加载成功

• error 是加载错误

  var img=new Image();//document.createElement("img");
              img.addEventListener("load",loadHandler);
              img.addEventListener("error",errorHandler);
              img.src="./img/1-.jpg";
              document.body.appendChild(img);
              console.log(img.offsetWidth);//异步
   //任何内容没有放在页面中不能调用clientWidth,offsetWidth,scrollWidth这样的数据
  

• load还可以用于window加载创建完成，

• 使用window，侦听load事件

  • 1、所有的DOM加载完成

  • 2、所有的图片已经加载完成

    window.onload=function(){
                    var bn=document.getElementById("bn1");
                    bn.onclick=function(){//所有都加载完才使用，不推荐使用
    
                    }
               }