正文
HTML事件处理程序---内联onclick事件
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
HTML事件处理程序绑定方法：
<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）
