浅谈js之事件处理

上一篇是谈的事件流，博客地址：点我；这次我们说说具体的事件处理。

0x00：事件处理程序

现在有三种方式注册事件处理程序：

HTML事件处理程序
DOM0级事件处理程序
DOM2级事件处理程序

001：HTML事件处理程序

就是说给html标签的属性设置事件处理程序；例如：

<p onclick="alert('hello')">点我</p>

p标签的属性onclick，把它的值设置成javascript代码字符串；这就是早期的js的用法

现在这个方式，用的不多了，是因为HTML与JavaScript代码耦合太紧密。就是说html代码里有javascript代码，现在都讲究行为，样式，结构分离；

还有就是这里的javascript代码字符串中的this，event对象是可以直接使用的。例如：

<p onclick="console.log(this);console.log(event)">点我</p>

打印是这样：浅谈js之事件处理

这是因为当指定一串javascript代码作为HTML事件处理程序属性值时，浏览器会把代码字符串为类似下面的函数中运行:

function (event) {
    with(document) {
        with(this.form || {}) {
            with(this) {
                //这里是代码字符串
            }
        }
    }
}

这就解释了为什么能直接使用event对象和this对象了。

但是还要注意有时我们也这样用

<body>
<p onclick="aa();">点我</p>
<script type="text/javascript">
function aa() {
    console.log(this);
    console.log(event);
}
</script>
</body>

这样打印什么呢？

浅谈js之事件处理

这时候的this就是window对象，这就是this对象有的时候让人很难确定到底指的那个作用域。这这里的函数就是window调用的；还有就是如果你想引用指向元素的作用域的this，你可以向这个函数把这个this对象传递当参数过去，就像这样：

<body>
<p onclick="aa(this)">点我</p>
<script type="text/javascript">
function aa(_this) {
    console.log(_this);
    console.log(event);
}
</script>
</body>

View Code