JAvaSCript的事件

Posted 菜菜小谭

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JAvaSCript的事件相关的知识,希望对你有一定的参考价值。

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

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

 



























































以上是关于JAvaSCript的事件的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript 事件

学习javascript中的事件——事件流

JavaScript异步编程 深入理解JavaScript事件

JavaScript学习-事件响应,让网页交互

javascript事件

JavaScript常用的事件