DOM0级事件绑定之内联onclick事件

Posted 2020-10-29 胖了个胖胖

　　DOM0级事件中比较常看到的这种绑定方法：

<input type="button" value="click me" onclick="show(this,type,event)">    ---代码1   // 点击按钮谷歌下输出：[input, "button", MouseEvent]

事件在DOM之前定义：

function show() {              ---代码2
  console.log(Array.prototype.slice.call(arguments));
}

　　

之前一直朦朦胧胧，不知道onclick中绑定的show事件是怎么传参数的~~~

show事件一般我们知道的是可以传两个参数：this和event，分别是绑定的这个DOM对象、发生的事件

但是这种绑定事件的原理实际上是这样的：

function(){             ---代码3
  with(document){
    with(this){
      // 元素属性值
    }
  }
}

　　在代码1中，我传了type参数，实际上访问的正好是this.type，就是当前DOM元素的type属性。DOM0级绑定事件的原理就是代码3描述的，综合起来可能就类似这样：

　　传递的参数a，先在this中找,即this.a，如果未定义，就在document中找，找不到就报错

function show() {               ---代码4
  with(document){
    with(this){
      // 元素属性值
      // 实际操作代码
    }
  }
}

　　代码1中传的第1个参数this，这个不用说，都知道是当前的DOM对象；第2个参数type，就是会在this中找，看this有没有这个属性，没有的话，就在document中找；第3个参数就是事件对象。函数里传参的顺序和内容可以随便改变的。

　　------------------------------第2种情况-----------------------------------

　　就是表单情况：

<form action="">       ---代码5
  <input type="text" name="username">
  <input type="button" value="click me" this="32" event="sd" onclick="show(this,getAttribute(‘this‘),type,event,getAttribute(‘event‘),username.value)">  

// 点击按钮谷歌下输出：[input, "32", "button", MouseEvent, "sd"，""]

</form>

　　表单情况会增加一层逻辑，就是this.form：

function(){
  with(document){
    with(this.form){
      with(this){
        // 元素属性值
        // 处理代码
      }
    }
  }
}

　　在代码5中，先说说username.value这个参数，就是表单中可访问的一个作用域this.form。传入参数会先看this有没有定义该属性，有就传入，没有的话，就在this.form中找，没有的话，最后在document中找。

　　另外，我故意在DOM上写了this、event的属性，看怎么样才能访问，会不会影响默认的this、event。验证后发现，自定义的属性只能通过getAttribute函数获取到（做这个验证只能说明我的js不扎实o(╥﹏╥)o）