标签：onchange 兼容 人人网 事件传播 创建 on() 判断 get 事件冒泡
***************************几个概念***************************************
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();//停止事件向上传播
标签：onchange 兼容 人人网 事件传播 创建 on() 判断 get 事件冒泡
原文地址：https://www.cnblogs.com/MrTanJunCai/p/9907708.html
