25、Javascript 事件

Javascript 事件

是指 Javascript 捕获到用户的操作，并做出正确的相应。

Javascript 事件一般与DOM元素绑定。

Javascript处理事件的基本机制

1、对DOM元素绑定事件处理函数。

2、监听用户的操作。

3、将用户在相应的DOM元素上进行与绑定事件对应的操作时，事件处理函数做出相应。

4、将处理结果更新到HTML文档。

Javascript支持的事件

窗口事件（Window Events）

onload  当页面加载完毕后触发

onunload 当页面被卸载时触发

表单元素事件（Form Element Events）

onchange 当元素（select、checkbox等）改变时触发

onsubmit 当表单（form）被提交时触发

onreset 当表单重置时触发

onselect 当元素被选取时触发

onblur 当元素失去焦点时触发

onfocus 当元素获得焦点时触发

图像事件（Image Events）

onabort 当图像加载中断时触发

键盘事件（Keyboard Events）

onkeydown 当键盘按下时触发

onkeypress 当键盘按下后又松开时触发

onkeyup  当键盘松开时出发

鼠标事件（Mouse  Events）

onclick 当鼠标单击时触发

ondbclick 双击时

onmousedown 按下时

onmousemove 移动时

onmouseout 移出元素时

onmouseover 悬停于某元素时

onmouseup 按钮松开时

绑定事件

如果想让Javascript对用户的操作做出相应，首先要对DOM元素绑定处理事件。

一、在DOM元素中直接绑定

1、原生函数

<input type="button" onclick="alert('原生函数')" value="点我" />

2、自定义函数

<input type="button" onclick="showAlert()" value="点我" />
<script type="text/javascript">
    var showAlert = function()
    {
        alert("自定义函数");
    }
</script>

二、在Javascript 代码中绑定

<input type="button" id="btn" value="点我">
<script>
    document.getElementById("btn").onclick=function(){
        alert(this.getAttribute("type"));
    }
</script>

三、绑定事件监听函数

1、addEventListener()

elementObject.addEventListener(eventName,handle,useCapture);

ie8不支持 ，ie9以上支持

2、attachEvent()

elementObject.attachEvent(eventName,handle);

支持ie8及以下浏览器

<input type="button" id="demo" value="点我" />

<script>
function addEvent(obj,type,handle){
    try{ //ie9+
        obj.addEventListener(type,handle,false); //false代表不捕获
    }catch(e){
        try{ //ie8
            obj.attachEvent('on'+type,handle);
        }catch(e){ //早期浏览器
            obj['on'+type] = handle;
        }
    }
}
function myAlert(){
    alert("我的alert");
}
addEvent(document.getElementById("demo"),"click",myAlert);
//第一个参数元素，第二个参数不加on，第三个参数不加()
</script>

Javascript Event对象

event对象用来表示当前事件，event对象的属性和方法包含了当前事件的状态。

event对象只在事件发生的过程中才有效。

判断点下鼠标哪个键

<div style="200px;height:100px;border:1px solid #ccc" onmousedown="clickButton(event)">
请在文档中点击鼠标。
</div>
<script>
    var clickButton = function(event)
    {
        var btnNum = event.button; //返回哪个鼠标被点下
        switch (btnNum){
            case 0:
                alert("左键");
            break;
            case 1:
                alert("中键");
            break;
            case 2:
                alert("右键");
            break;
            default:
                alert("不确定");
            break;
        }
    }
</script>

显示鼠标坐标

<div id="move" style="200px;height:100px;border:1px solid #ccc" onmousemove="showxy(event)">
请在文档中移动鼠标。
</div>
<script>
var showxy = function(event){
    x = event.clientX; //客户端水平坐标
    y = event.clientY; //客户端垂直坐标
    x1 = event.screenX; //计算机屏幕水平坐标
    y1 = event.screenY; //计算机屏幕垂直坐标
    document.getElementById("move").innerHTML="客户端坐标：X:"+ x + ",Y:"+y +"<br>" + "计算机屏幕坐标：X:" + x1 + ",Y:" + y1;
}
</script>

事件源

事件源指触发事件的DOM节点，就是谁触发的这个事件。

target ie8不支持，ie8使用srcElement;

<button id="targetBtn" attr="123">点击</button>
<script>
document.getElementById("targetBtn").onclick=function(e)
{
    var eve = e || window.event;
    var srcNode = eve.target || eve.srcElement; //这样都兼容了
    alert(srcNode.getAttribute("attr"));
}
</script>

表单事件

<form>
<input type="text" id="userName" name="userName">
<input type="password" id="password" name="password">
<button type="submit">提交</submit> <button type="reset">重置</button>
</form>
<script>
var userName = document.forms[0][0]; //第0个表单，第0个元素
var password = document.forms[0][1];

userName.focus(); //默认获得焦点

document.forms[0].onsubmit = function()
{
    if(userName.value == "")
    {
        alert("请输入账号！");
        userName.focus();
        return false;
    }
    
    if(password.value == "")
    {
        alert("请输入密码！");
        password.focus();
        return false;
    }
    return true;
}
</script>

全选，反选

<div>
    <input type="checkbox" name="id" value="1"> 1<br/>
    <input type="checkbox" name="id" value="2"> 2a<br/>
    <input type="checkbox" name="id" value="3"> 3<br/>
    <input type="checkbox" name="id" value="4"> 4<br/>
    <input type="checkbox" name="id" value="5"> 5<br/>
    <input type="checkbox" name="id" value="6"> 6<br/>
    <input type="checkbox" name="id" value="7"> 7<br/>
    <input type="checkbox" name="id" value="8"> 8<br/>
    <input type="checkbox" name="id" value="9"> 9<br/>
    <input type="checkbox" name="id" value="10"> 10<br/>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNoAll()">全不选</button>
    <button onclick="checkNo()">反选</button>
</div>
<script>
    var checkAll = function()
    {
        var items = document.getElementsByName("id");
        for(var i = 0; i < items.length; i++)
        {
            items[i].checked=true;
        }
    }
    var checkNoAll = function()
    {
        var items = document.getElementsByName("id");
        for(var i = 0; i < items.length; i++)
        {
            items[i].checked=false;
        }
    }
    var checkNo= function()
    {
        var items = document.getElementsByName("id");
        for(var i = 0; i < items.length; i++)
        {
            if(items[i].checked)
            {
                items[i].checked = false;
            }else{
                items[i].checked = true;
            }
        }
    }
</script>