js函数之事件-CSDN博客

事件概念及三要素

事件：即用户在页面上的操作，如：点击鼠标、敲打键盘、鼠标移动...
事件三要素：

     1、事件源：事件是谁触发？
     2、事件名称：什么事件？
     3、事件处理程序：触发后做什么？
复制代码

事件的三种写法:

1、写 在标签上，on事件名=“函数调用”，单做标签的属性；  
2、标签.onclick=匿名函数；  
3、标签.onclick=函数名 
复制代码

<body>
    <input type="button" value="按钮" onclick="dian()" id="btn">
</body>
复制代码

第一种

   function dian(){
       alert("点击了按钮");
   }
复制代码

第二种

    btn.onclick = function(){
        alert("点击了按钮")
    }
复制代码

第三种

    function cc(){
        alert("点击了按钮")
    }
    btn.onclick = cc;
复制代码

事件的类型

鼠标单击 click

btn.onclick=function(){
    alert("单击鼠标")
}
复制代码

鼠标双击 dblclick

btn.ondblclick=function(){
    alert("双击了鼠标")
}
复制代码

鼠标放上去 mouseover

btn.onmouseover=function(){
    alert("鼠标滑过")
}
复制代码

鼠标离开 mouseout

btn.onmouseout=function(){
    alert("鼠标离开")
}
复制代码

键盘按下去 keydown

window.onkeydown=function(){
    alert("键盘按下了")
}
复制代码

键盘弹起 keyup

window.onkeyup=function(){
    alert("键盘弹起了")
}
复制代码

加载事件 load
当网页中所有内容都加载完成之后，再加载自己的内容

<script>
window.onload=function(){
    btn.ondblclick=function(){
        alert("双击了鼠标")
    }
}
</script>
<body>
<input type="button" value="按钮" onclick="dian()" id="btn">
</body>
复制代码

针对于表单的

<form action="http://www.baidu.com" id="f">
            姓名：<input type="text" id="username">
            <br>
            <input type="submit">
复制代码

表单提交表单名.submit

window.onkeydown=function(){
    f.submit()
}
复制代码

f.onsubmit=function(){
    alert("表单即将提交");
}
复制代码

获取焦点 focus

username.onfocus = function(){
    alert("鼠标点到了文本框里面")
}
复制代码

失去焦点 blur

username.onblur = function(){
    alert("鼠标离开了文本框")
}
复制代码

内容改变了 change

username.onchange = function(){
    alert("内容发生了改变")
}
复制代码