基本概念
1.事件源
事件发生的来源,
按钮、文本框等
2.事件名称
onclick、onchange、onfocus等
通常事件以on开头
3.事件处理函数
发生事件以后 调用的函数叫做事件处理函数(也叫做事件监听器)
4.事件对象
即对事件的一个具体的描述, 键盘按下事件,如果想获得用户到底按了哪个键,可以通过事件对象来获取
常用事件
一.文本框的常用事件
onfocus 获得焦点
onblur 移除焦点
二.常用的鼠标事件
onmouseover 鼠标悬停
onmouseout 鼠标移除
需求: 演示人人网登录
密码框其实一开始是文本框,获得焦点以后 使用dom技术动态产生一个密码框 然后把文本框
替换成密码框
绑定事件的三种方式
一、xhtml绑定方式
例：
<script type="text/javascript">
function test (a) {
alert(a);
}
function test2 () {
alert('test2');
}
</script>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="xhtml绑定方式" onclick="test(100);test2();" />
</body>优点：
1.写起来简单。
2.可以绑定多个函数。
3.可以传参。
缺点：
1.内容和行为没有分离，不符合W3C规范。
2.如果多个按钮都绑定一个函数test,需要一个一个绑定，比较麻烦。
3.dom编程时，动态创建的对象，就不能使用这种绑定方式了。
演示人人网登录：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>人人网</title>
<script type="text/javascript">
function mousein () {
//清空
var uname = document.getElementById("username");
if (uname.value=="邮箱/手机号/用户名") {
uname.value="";
}
}
function out () {
//恢复
var uname = document.getElementById("username");
if (uname.value=="") {
uname.value="邮箱/手机号/用户名";
}
}
function textToPwd () {
var text = document.getElementById("pwd");
text.type="password";
}
// function pwdToText () {
// var pwd = document.getElementById("pwd");
// pwd.type="text";
// }
</script>
</head>
<body>
<h2>用户登录</h2>
<form action="第三种绑定方式和两种事件模型(DOM2).html" method="post">
<input type="text" name="username" id="username" value="邮箱/手机号/用户名"
onfocus="mousein();" onblur="out();"/><br/>
<input type="text" name="pwd" id="pwd" value="" onfocus="textToPwd();"
/><br/><!--onblur="pwdToText();"-->
<input type="submit" name="sbmt" id="sbmt" value="提交" />
</form>
</body>
</html>
二、dom绑定方式
基本语法：dom对象.事件 = 事件处理函数；
例：btn1.onclick = test;
示例：
<script type="text/javascript">
function test () {
alert('test');
}
window.onload = function(){
var btn1 = document.getElementById("btn1");
btn1.onclick = test;
}
</script>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="dom绑定方式" />
</body>匿名函数：没有名字的函数。形如function(){
alert(‘test’);
}
第二中定义函数的方式：
var test = function(){
alert(‘test’);
}
立即调用的匿名函数：
函数只执行一次时，没必要给函数起名
(function(){
alert(‘test’);
})();
三、第三种绑定方式和两种事件模型
一.DOM2
dom对象.addEventListener(“click”,事件处理函数);
dom对象.removeEventListener(“click”,事件处理函数);
二.IE
dom对象.attchEvent(“onclick”,事件处理函数);
dom对.detachEvent(“onclick”,事件处理函数)
写兼容性代码
可以通过第三种绑定方式不同来判断浏览器，从而写多浏览器兼容性的代码
if(document.attachEvent){
//IE浏览器的代码
}else {
//其他浏览器的代码
}
优点:可以绑定多个事件、可以动态添加和移除事件
缺点:浏览器不兼容、必须写兼容性代码
*****************事件的传播机制*****************************
一. IE模型
只有一个阶段: 事件冒泡阶段
如果想停止事件传播
IE
event.cancelBubble = true;// 停止事件向上传播
FF
e.stopPropagation();//停止事件传播
二. DOM2(FF)
两个阶段:
1.事件捕获阶段
从外向内触发
dom对象.addEventlistener(“click”,事件处理函数,true);//给捕获阶段绑定事件
2.事件冒泡阶段
从内向外触发
dom对象.addEventlistener(“click”,事件处理函数,false);//默认值是false 给冒泡阶段绑定事件
e.stopPropagation();//停止事件向上传播
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function test () {
alert('test');
}
function test2 () {
alert('test2');
}
function test3 () {
if(document.attachEvent){
btn1.detachEvent("onclick",test2);
}else{
btn1.removeEventListener("click",test2);
}
}
var btn1;
window.onload = function () {
//
btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
if(document.attachEvent){
btn1.attachEvent("onclick",test);
btn1.attachEvent("onclick",test2);
btn2.attachEvent("onclick",test3);
}else{
btn1.addEventListener("click",test);
btn1.addEventListener("click",test2);
btn2.addEventListener("click",test3);
}
}
</script>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="单击事件" />
<input type="button" name="btn2" id="btn2" value="移除btn1的test2" />
</body>
</html>
