事件的兼容性
1.事件绑定与事件移除
事件绑定:(addEventListener)与事件移除(removeEventListener)
E.addEventListener(type,处理程序,true/flase)
E.removeEventListener(type,处理程序,true/flase)
// 传统绑定事件的写法
获取元素,装进数组,for循环
arr_01[i].function(){
console.log(this);
}
(1)事件冒泡(false):从内向外扩散(一次从内至外 触发元素的事件)
第一个值表示的是事件类型(‘click’);第二个值处理程序(function);第三个值false表示事件的冒泡
arr_01[i]=addEventListener('click',function(){
console.log(this);
},flase);
(2)事件捕获(true):从外向内 依次触发元素的事件
第一个值表示的是事件类型(‘click’);第二个值处理程序(function);第三个值true表示事件的捕获
重点:
在设置元素事件移除时,前提条件必须是该元素具有有名称的 事件处理程序
2.获取事件对象
事件对象封装了事件发生的详细信息
IE中的事件对象:
IE中的事件对象是一个隐式可用的全局对象:event,他是window对象的一个属性
// IE中得到的对象
op.function(){
var oEvent=window.event;
}
标准DOM的事件对象:
在标准DOM浏览器监测发生了某个事件时,将自动创建一个Event对象,并隐式地将该对象作为事件处理函数的第一个参数进行传入
// 标准DOM中得到事件对象
op.function(oEvent){
// 作为参数传进来
}
为了兼容不同浏览器,通常采用下面的方法得到事件
// 传递oEvent是为了设置click事件在浏览器的兼容问题
function handle(oEvent){
// 设置兼容性问题
if(window.event){
oEvent=window.event;
}
}
// 获取绑定事件的元素
var oTarget;
if(oEvent.srcElement){
// srcElement兼容低版本IE的浏览器
oTarget=oEvent.srcElement;
}else{
oTarget=oEvent.target;
}
// 输出绑定事件的标签名称
alert(oTarget.tagName);
oTarget 绑定事件的元素([object HTMLButtonElement]) tagName标签名称
鼠标事件
Onmousedown 单击鼠标按键
Onmouseweel 鼠标滑轮事件
键盘事件
Body.onkeyup=handle; 键盘按下
// 获取键码 使用keyCode 属性
function handle(event){
alert(event.keyCode);
}
3.阻止冒泡
stopPropagation 阻止事件冒泡
阻止事件冒泡的语法结构:事件对象.stopPropagation( );
4.阻止默认行为
E.perventDefault();
事件的闭包作用
1.闭包的理解
闭包是指有权限访问另一个函数作用域中的变量的函数
闭包就是函数和该函数作用域的组合
所有function都是闭包
2.变量的作用域
变量的作用域有两种:全局变量和局部变量。
JS 语言的特殊之处,就在于函数内部可以直接读取全局变量。
垃圾回收机制:被垃圾回收机制GC回收
var num=20;
function my(){
alert(num);
}
my(); // 20
另一方面,在函数外部自然无法读取函数内的局部变量。
function my2(){
var num1=100;
}
alert(num); // 注意,函数内部声明变量的时候,一定要使用 var 命令。如果不用的话,实际上是声明了一个全局变量
function my2(){
num1=50;
}
my2();
alert(num1); // 100