事件

2017-07-20 本文已影响0人 yuhuan121

事件

JavaScript和HTML的交互是通过事件实现的。
事件就是用户或浏览器自身执行的某种动作。比如click、load、mouseover等，都是事件类型（俗称事件名称）。

事件流

事件流描述的是从页面中接收事件的顺序，比如有两个嵌套的div，点击了内层的div，这时候是内层的div先触发click事件还是外层先触发？目前主要有三种模型

IE的事件冒泡：事件从目标节点逐级往上层节点传播
Netscape的事件捕获：事件从顶层节点一级一级往下层传播，最后到达目标节点
DOM事件流：DOM2级事件规定事件流包括三个阶段，先捕获，处于目标阶段，再冒泡
事件冒泡&捕获

事件处理程序的三种方式

响应某个事件的方法就叫做事件处理程序（或称为事件监听器）
绑定事件处理程序——需要提前定义好某些事件发生了该怎么处理
1.HTML内联方式（不建议使用）
直接在html代码中写JavaScript代码，或者在html代码中调用在页面其它地方定义的脚本

<input type="button" value="Click Here" onclick="alert('Clicked!');" />

<input type="button" value="Click Here" onclick="showMessage();" />

在HTML中指定事件处理程序书写很方便，但是有两个缺点。

存在加载顺序问题，如果事件处理程序在html代码之后加载，用户可能在事件处理程序还未加载完成时就点击按钮之类的触发事件，存在时间差问题
这样书写html代码和JavaScript代码紧密耦合，不方便维护

2.JavaScript指定事件处理程序(DOM0级事件)

通过JavaScript指定事件处理程序就是把一个方法赋值给一个元素的事件处理程序属性。

每个元素都有自己的事件处理程序属性，这些属性名称通常为小写，如onclick等，将这些属性的值设置为一个函数，就可以指定事件处理程序，如下（由于是设置属性，所以设置多次的结果是最后的覆盖之前的）

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');
    btnClick.onclick = function showMessage() {
        alert(this.id);
    };
</script>

这样处理，事件处理程序被认为是元素的方法，事件处理程序在元素的作用域下运行，this就是当前元素，所以点击button结果是：btnClick

这样还有一个好处，我们可以删除事件处理程序，只需把元素的onclick属性赋为null即可

3.DOM2事件处理程序

DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：

addEventListener()
removeEventListener()

所有的DOM节点都包含这两个方法，并且它们都接受三个参数：
1.事件类型
2.事件处理方法
3.布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理（如果不写，默认是false 冒泡阶段处理）

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');

    btnClick.addEventListener('click', function() {
        alert(this.id);
    }, false);

    btnClick.addEventListener('click', function() {
        alert('Hello!');
    }, false);
</script>

可见DOM2级事件处理程序的好处是，我们可以为click事件添加多个处理程序(相当于多次调用函数)，并按照添加顺序依次执行

通过addEventListener添加的事件处理程序只能通过removeEventListener移除，移除时参数与添加的时候相同，这就意味着刚才我们添加的匿名函数无法移除，因为匿名函数虽然方法体一样，但是句柄却不相同，所以移除事件处理程序必须采用调用函数名的方法

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');

    var handler=function() {
        alert(this.id);//this代表监听的dom元素
    }

    btnClick.addEventListener('click', handler, false);
    btnClick.removeEventListener('click', handler, false);
</script>

this和事件

<div class="box">
        <button>click me</button>
    </div>
    <script>
        var button = document.querySelector('button')
        var box = document.querySelector('.box')
        box.addEventListener('click',function(e){
            console.log(this) //this指代监听的dom元素 输出是<div class="box">...</div>
            console.log(this.innerText)
            console.log(e)   //e是指事件本身 
            console.log(e.target) // target：事件的目标元素，输出<button>click me</button>
        })
    </script>

IE兼容性

IE并不支持addEventListener和removeEventListener方法，而是实现了两个类似的方法
1.attachEvent
2.detachEvent

这两个方法都接收两个相同的参数
1.事件处理程序名称（on+事件类型）
2.事件处理程序方法（函数）

使用attachEvent添加的事件处理程序可以通过detachEvent移除，条件也是相同的参数，匿名函数不能被移除。

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');

    var handler=function() {
        alert(this.id);
    }

    btnClick.attachEvent('onclick', handler);
    btnClick.detachEvent('onclick', handler);
</script>

写出能跨浏览器的事件处理程序

不同的浏览器下处理事件处理程序的区别（即addEventListener和attachEvent的主要区别）

参数个数不相同，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）
第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）
事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window，所以刚才例子才会返回undefined，而不是元素id
为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律（目前还没有解决方案）

了解了这四点区别后我们可以尝试写一个浏览器兼容性比较好的添加事件处理程序方法

function addEvent(node, type, handler) {
   if (!node) return false;
   if (node.addEventListener) {//js能力检测，看支不支持该方法，而不是检测浏览器版本
       node.addEventListener(type, handler, false);
       return true;
   }
   else if (node.attachEvent) {
       node.attachEvent('on' + type, handler, );
       return true;
   }
   return false;
}

但第三个问题没有解决，由于处理程序作用域不同，如果handler内有this之类操作，那么就会出错，可以采用如下处理方式

function addEvent(node, type, handler) {
    if (!node) return false;
    if (node.addEventListener) {
        node.addEventListener(type, handler, false);
        return true;
    }
    else if (node.attachEvent) {
        node['e' + type + handler] = handler;
        node[type + handler] = function() {
            node['e' + type + handler](window.event);//通过window.event得到事件
        };
        node.attachEvent('on' + type, node[type + handler]);
        return true;
    }
    return false;
}

在取消事件处理程序的时候

function removeEvent(node, type, handler) {
    if (!node) return false;
    if (node.removeEventListener) {
        node.removeEventListener(type, handler, false);
        return true;
    }
    else if (node.detachEvent) {
        node.detachEvent('on' + type, node[type + handler]);
        node[type + handler] = null;
    }
    return false;
}

事件对象

在触发DOM上的某个事件的时候会产生一个事件对象event

DOM中的事件对象

event对象包含与创建它的特定事件有关的属性和方法，触发事件的类型不同，可用的属性和方法也不同，但是所有事件都会包含

属性/方法	类型	读/写	说明
bubbles	Boolean	只读	事件是否冒泡
cancelable	Boolean	只读	是否可以取消事件的默认行为
currentTarget	Element	只读	事件处理程序当前监听的元素
detail	Integer	只读	与事件相关细节信息
eventPhase	Integer	只读	事件处理程序阶段：1 捕获阶段，2 处于目标阶段，3 冒泡阶段
preventDefault()	Function	只读	取消事件默认行为
stopPropagation()	Function	只读	取消事件进一步捕获或冒泡
target	Element	只读	事件的目标元素
type	String	只读	被触发的事件类型
view	AbstractView	只读	与事件关联的抽象视图，等同于发生事件的window对象

在事件处理程序内部，this始终等同于currentTarget（当前监听的元素），而target是事件的目标元素。

preventDefault()&stopPropagation()

要阻止事件的默认行为，可以使用preventDefault()方法，前提是cancelable值为true，比如我们可以阻止链接导航这一默认行为
stopPropagation()方法可以停止事件在DOM层次的传播，即取消进一步的事件捕获或冒泡

IE中的事件对象

直接为DOM元素添加事件处理程序时，event对象作为window对象的一个属性存在

var handler = function () {
    var e = window.event;
    alert(e.type);
}
var btnClick = document.getElementById('btnClick');
btnClick.onclick = handler;

上述代码中，通过window.event取得了event对象
可是如果事件处理程序是通过attachEvent添加的，那么就会有一个event对象被传入事件处理程序中，当然这时候也可以通过window对象访问event，方便起见，我们一般会传入event对象

var handler = function (e) {
    alert(e.type);
}
var btnClick = document.getElementById('btnClick');
attachEvent(btnClick, handler);

IE中所有的事件都包含以下属性方法

属性/方法	类型	读/写	说明
cancelBubble	Boolean	读/写	默认为false，设置为true后可以取消事件冒泡
returnValue	Boolean	读/写	默认为true，设为false可以取消事件默认行为
srcElement	Element	只读	事件的目标元素
type	String	只读	被触发的事件类型

跨浏览器的事件对象

虽然DOM和IE的event对象不同，但基于它们的相似性，我们还是可以写出跨浏览器的事件对象方案

function getEvent(e) {
    return e || window.event;
}

function getTarget(e) {
    return e.target || e.scrElement;
}

function preventDefault(e) {
    if (e.preventDefault)
        e.preventDefault();
    else
        e.returnValue = false;
}

function stopPropagation(e) {
    if (e.stopPropagation)
        e.stopPropagation();
    else
        e.cancelBubble = true;
}

事件代理(事件冒泡的应用)

利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件
事件代理demo
应用场景：页面需要新增的元素，而不用再为其重新再绑定事件

事件代理的原理

举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件代理，代理它们父级代为执行事件。

事件代理的精髓
当用事件代理的时候，根本就不需要去遍历元素的子节点，只需要给父级元素添加事件就好了，其他的都是在js里面的执行，这样可以大大的减少dom操作。

适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。

常见事件的用法

常见事件的用法
click
dblclick
mouseover & mouseout
mouseenter & mouseleave（更推荐）
区别：mouseover & mouseout 当鼠标移至父元素中的子元素上时，会再次触发mouseover ，而mouseenter就能避免这种情况发生
focus & blur 获得焦点／失去焦点
keyup 获得触发键盘事件后的文本
change 相当于：文本内容发生改变+blur
scroll：窗口滚动
表单验证（阻止默认事件的应用）：


$('#form').addEventListener('submit',function(e){
            e.preventDefault();
            if(/^\w{6,12}$/.test($('#username').value)){
                $('#form').submit();
            }else{
                $('#form .msg').innerText = '出错了'
                $('#form .msg').style.display = 'inline-block'
            }
        })

事件

事件

事件流