浏览器事件小析

Posted 2020-08-02 冯小漂儿

一、焦点事件
焦点：使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户输入；我们可以通过一些方

式设置焦点：1.点击，2.Tab，3.js；不是所有的元素都能接收焦点，能够响应用户操作的元素才有焦点。
事件：
onfocus ==>当元素获取焦点时触发
onblur ==>当元素失去焦点时触发
方法：
obj.focus(); ==>给元素添加焦点的方法
obj.blur(); ==>给元素添加失去焦点的方法
obj.select(); ==>选择指定元素里面的文本内容（复制内容）；只能选中用户输入的可交互的内容

二、Event对象
evert:事件对象，当一个事件发生时，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存在一个指定

的地方--event对象供我们在需要时候调用。
事件对象必须在一个事件调用的函数里使用才有内容。
事件函数：事件调用的函数，一个函数是不是事件函数取决于这个函数调用的时候。
eg:function fn(){alert(event)}
   fn();  //不是事件函数
   document.onclick=fn;  //事件函数调用

兼容性问题：
IE/Chorme:event是一个内置全局对象，可直接如上例直接调用
标准浏览器：事件对象是通过事件函数的第一个参数传入，如果一个函数时被事件调用，那么这个函数定义的第一个参数

就是事件对象。

兼容性问题处理：
function fn(ev){
var ev=ev||event
}

补充：clientX[Y] ==>当一个事件发生时，鼠标到页面可视区距离（无单位）
onmousemove ==>当鼠标在一个元素上移动时触发；触发频率是间隔时间，在一个指定时间（很短），如果鼠标的位置和

上一次位置发生变化，就触发一次。

三、事件流
事件冒泡：当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window。（div->body-

>html->document->window）
阻止冒泡：当前要阻止冒泡的事件函数中调用 event.cancelBubble=true;
事件捕获：从外到内，父类先触发，子类后触发。（window->document->html->body->div）

四、事件绑定
1.给一个对象绑定一个事件处理函数的第一种形式
obj.onclick=fn;
2.给一个队形同一事件绑定不同函数
IE：obj.attachEvent(事件名称，事件函数)
标准浏览器：obj.addEventListener(事件名称，事件函数，是否捕获)==>第三参数默认：false，不补获，冒泡

IE和标准浏览器绑定事件的区别：
IE：
(1)没有捕获
(2)事件名称带有on
(3)事件函数执行顺序：标准IE->正序，非标准IE->倒序
(4)this指向window ==》解决,函数下的一个方法call（），call方法一参可改变函数执行过程中内部this的指向，call

的二参开始是原函数的参数列表。
eg:
function fn(a,b){alert (this);alert(a+b)}
fn; //指向window
fn.call(1) //1
fn.call(1,10,20) //30
fn.call(null,10,20) //指向window
标准浏览器：
(1)有事件捕获
(2)事件名称无on
(3)事件执行顺序是正序
(4)this指向触发该事件对象
因此，封装绑定事件：
function bind(obj,evname,fn){
if(obj.addEventListener){obj.addEventListener(evname,fn,false)}
}else{
obj.attachEvent(‘on‘+evname,function(){
fn.call(obj);
})
}