JavaScript常见事件处理程序实例总结常见事件处理程序实例总结
主要介绍了JavaScript常见事件处理程序,结合实例形式总结分析了javascript HTML事件、DOM事件、IE事件等
相关处理程序与操作技巧,需要的朋友可以参考下
本文实例总结了JavaScript常见事件处理程序。分享给大家供大家参考，具体如下：
事件指的是使用者或者浏览器自身执行的某种动作（比如点击事件）。响应这些事件的函数就叫做事件处理程序（或者叫事件
监听器）。事件处理程序的名字以“on”为前缀，比如 click 事件的事件处理程序就是 onclick。
1 HTML 事件处理程序事件处理程序
如果某个元素支持某个事件，那么它都有一个与相应的事件处理程序同名的 HTML 属性，我们可以通过这个属性来指定 JS：
<input type="button" value="点我" onclick="alert('点击过咯')"/>
因为这里的脚本是嵌入在 HTML 元素的属性中，所以使用了单引号！
也可以调用在页面的其他地方定义的脚本：
<input type="button" value="Click me" onclick="showMessage()">
<script type="text/javascript">
function showMessage() {
console.log("Hello World!");
}
</script>
事件处理程序的代码在执行时，可以访问到全局作用域中的任何代码！
这样指定的事件处理程序，会创建一个封装着元素属性值的函数，它有一个局部变量 event，就是事件对象：
<input type="button" value="点我" onclick="alert(event.type)"/>
通过 event 变量，可以直接访问事件对象。在这个函数内部，this 值等于事件的目标元素：
<input type="button" value="点我" onclick="alert(this.value)"/>
可以通过这个动态创建的函数，来扩展它的作用域。在这个函数内部，可以访问 document 以及该元素本身的成员，这个函数
是像这样使用 with 来扩展作用域的：
function(){
with(document){
with(this){
//元素属性值
}
}
}
所以，在事件处理程序中，要访问自己的属性就变得很容易啦 O(∩_∩)O~：
<!-- 输出 “点我” -->
<input type="button" value="点我" onclick="alert(value)"/>
如果当前元素是一个表单输入元素，则作用域中还会包含访问表单元素（父元素）的入口，所以这个函数应该是这样的：
function(){
with(document){
with(this.form){
with(this){
//元素属性值
}
}
}
}
这样事件处理程序就无需引用表单元素，就可以直接访问到表单中的其他字段啦O(∩_∩)O~：
<form method="post">
<input type="text" name="username" value="">
资源评论
