JAvaSCript的事件

Posted 2021-01-17 菜菜小谭

***************************几个概念***************************************

1.事件源

事件发生的来源,

按钮、文本框等

2.事件名称

onclick、onchange、onfocus等

通常事件以on开头

3.事件处理函数

发生事件以后 调用的函数叫做事件处理函数(也叫做事件监听器)

4. 事件对象

即对事件的一个具体的描述, 键盘按下事件,如果想获得用户到底按了哪个键,可以通过事件

对象来获取

***************************常用事件***************************************

一.文本框的常用事件

1. onfocus 获得焦点

2. onblur 移除焦点

二.常用的鼠标事件

onmouseover 鼠标悬停

onmouseout 鼠标移除

需求: 演示人人网登录

密码框其实一开始是文本框,获得焦点以后 使用dom技术动态产生一个密码框 然后把文本框

替换成密码框

 

***************************绑定事件的三种方式***************************************

一. xhtml 绑定方式

优点:
1.写起来简单 2.可以绑定多个函数 3.可以传参

缺点:
1.内容和行为没有分离 不符合W3C规范
2.如果多个按钮都绑定一个函数test 需要一个一个绑定 比较麻烦
3.dom编程时 动态创建的对象 就不能使用这种绑定方式了

 

二. dom绑定方式

dom对象.事件 = 事件处理函数

btn1.onclick = test;

演示代码：

window.onload = function(){

//给btn1绑定事件
var btn1 = document.getElementById("btn1");

btn1.onclick = test;
}

 

可以简写成

 

btn1.onclick = function(){

alert(‘按钮被点击了!!!‘);
};


**************************************匿名函数***********************************

没有名字的函数叫做匿名函数,形如:

function(){

alert(‘按钮被点击了!!!‘);
}

**************************************第二种定义函数的方式****************************

var test = function(){
alert(‘test‘);
}

 

**************************************立即调用的匿名函数***************************

函数只执行一次的时候 没必要给函数起名

(function(){

alert(‘test‘);
})();

 

********************第三种绑定方式和两种事件模型*******************************

两种事件模型:

1. DOM2事件模型

Firefox 、非IE浏览器遵循这个模型

2. IE事件模型

IE浏览器

 

区别:

1. 第三种绑定方式代码不一样

2. 事件的传播机制不一样

 

******************************第三种绑定方式*************************************

一.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();//停止事件向上传播