javascript（十一）事件

JS事件
说明：
用户对浏览器所做的特定的动作（操作），是实现交互操作的一种机制。
事件处理程序：
浏览器响应某个事件，实现用户的交互操作而进行的处理（过程）。
事件处理程序的调用：
浏览器等待用户的交互操作，并在事件发生时，自动调用事件处理程序（函数），完成事件处理过程。
对象行内绑定

<div onclick="showMessage()"></div>
<script type="text/javascript">
    function showMessage(){

    }
</script>

使用addEventListener绑定事件监听

<div id="user"></div>
<script type="text/javascript">
    document.getElemetById('user').addEventListener('click',function(){

    })
</script>

JS中书写

<div onclick="showMessage()"></div>
<script type="text/javascript">
    对象.onclick = function(){
        [语句组]
    }
</script>

语法：

<tag on事件=”<语句组>|<函数名>”> 

示例：

<div onclick="alert(1)"></div>

常用事件：
onclick ： 用户单击事件
onload ：一张页面或一幅图像完成加载。
ondblclick： 当用户双击某个对象时调用的事件句柄。
onkeydown ： 某个键盘按键被按下。
onkeyup ：某个键盘按键被松开。
onmouseout： 鼠标从某元素移开。
onmouseover： 鼠标移到某元素之上。
onfocus ： 元素获得焦点。
onblur ： 元素失去焦点。
onchange ： 域的内容被改变。
onreset ： 重置按钮被点击。
onsubmit ： 确认按钮被点击。
this属性操作
说明：
表示操作的当前对象
指向调用它所在方法的对象，因为this是在函数运行时，自动生成的一个内部对象，只能在函数内部使用。
示例：

document.getElementById('show').onclick=function(){
    alert(this.innerText)
}

常见形式1：

<div id="my"></div>
<script type="text/javascript">
document.getElementById('my').onclick = function(){
    this.className = 'show';
}
</script>

常见形式2：

<div id="my" onclick="changeClass(this)"></div>
<script type="text/javascript">
function changeClass(obj){
    obj.className = 'show';
}
</script>

onsubmit扩展：
onsubmit是监听表单提交事件
在js中书写onsubmit事件，需要配合return true|false进行表单控制提交动作操作;
在标签中书写onsubmit事件示例：

<form onsubmit="alert('您点击了submit按钮');return false;">   
<form onsubmit="return 方法名称();">

reset()扩展：

reset()方法是JS中重置表单使用
document.getElementById("myForm").reset()

扩展代码：
辨识当前点击的是第几个元素!

var divObj = document.getElementsByTagName('div');
for(var i=0;i<5;i++){
    divObj[i].index = i;
    divObj[i].onclick = function(){
        alert(this.index+1);
    }
}