事件

事件的兼容

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(){//所有都加载完才使用,不推荐使用
      
                      }
                 } 
      
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页