JavaScrip--事件

作者: 卓小生 | 来源:发表于2016-12-14 15:11 被阅读0次

事件

事件冒泡

事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡机制

<style>
div {padding: 40px;}
#div1 {background:red}
#div2 {background:green}
#div3 {background:blue}
</style>

<div id="div1">
    <div id="div2">
        <div id="div3"></div>
    </div>
</div>

<script>
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
function fn1() {
    alert( this.id );
}
oDiv1.onclick = fn1;
oDiv2.onclick = fn1;
oDiv3.onclick = fn1;
</script>

点击div3, div3 div2 div1上的点击事件都会被触发

事件冒泡与样式无关,与html结构相关

示意图:

冒泡.jpg

事件对象

在触发DOM上的某个事件的时候会产生一个事件对象event，这个对象包含着所有与事件有关的信息，包括产生事件的元素、事件类型等相关信息。所有浏览器都支持event对象，但支持方式不同。

事件对象必须在一个事件调用的函数里面使用才有内容
事件函数：事件调用的函数，一个函数是不是事件函数，不在定义的决定，而是取决于这个调用的时候

兼容

ie/chrome : event是一个内置全局对象
标准下 : 事件对象是通过事件函数的第一个参数传入

如果一个函数是被事件调用的那么，这个函数定义的第一个参数就是事件对象

ie/chrome下

function fn(){
    alert(event);
}

document.onclick = fn;

标准下:

function fn(ev){
    alert(ev);
}
document.onclick = fn;

兼容性写法:

function fn(ev){
    var ev = ev || window.enent;
    alert(ev);
}
document.onclick = fn;

clientX clientY

clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的垂直坐标。

例如，当你点击客户端区域的左上角时，鼠标事件的 clientX 值为 0 ，这一值与页面是否有水平滚动无关。

document.onclick = function(e){
    var e = e||window.event;
    alert(e.clientX +' '+e.clientY);
}

示例: 方块跟着鼠标移动

取消冒泡

标准下:

event.stopPropagation()

ie下:

e.cancelBubble = true;

兼容性写法:

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

阻止默认行为

标准下:
event.preventDefault();

ie下:
event.returnValue = false;

兼容性写法:

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

target

Element 只读触发事件的目标元素

function getTarget(e) {
    return e.target || e.srcElement;//ie下为srcElement;
}

dom对象事件处理函数

方法一

绑定事件处理函数

function fn(){
    alert(1);
}
div.onclick = fn;

缺点: 只能绑定一个处理函数

function fn1(){
    alert(1);
}

function fn2(){
    alert(1);
}

div.onclick = fn1;
div.onclick = fn2;

div.onclick 属性中的值会被覆盖

移除事件绑定函数

div.onclick = null;

方法二

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

绑定事件处理函数: addEventListener
移除事件绑定函数: removeEventListener

所有的DOM节点都包含这两个方法，并且它们都接受三个参数：

事件类型
事件处理方法
布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理

绑定事件处理函数

function fn1(){
    alert(1);
}

function fn2(){
    alert(2);
}

oDiv.addEventListener('click', fn1, false);
oDiv.addEventListener('click', fn2, false);

移除事件绑定函数

function fn1() {
    alert(1);
}
function fn2() {
    alert(2);
}

document.addEventListener('click', fn1, false);
document.addEventListener('click', fn2, false);

document.removeEventListener('click', fn1, false);

IE兼容性

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

attachEvent
detachEvent

这两个方法都接收两个相同的参数

事件处理程序名称
事件处理程序方法

由于IE只支持事件冒泡，所以添加的程序会被添加到冒泡阶段，使用attachEvent添加事件处理程序可以如下

<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);
</script>

结果是undefined，很奇怪，一会儿我们会介绍到

使用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下事件名称没有on,比如说click,mouseover, attachEvent下有on,比如说onclick
onmousevoer

事件函数触发时, this的指向不相同

addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window，所以刚才例子才会返回undefined，而不是元素id

为一个事件添加多个事件处理程序时，执行顺序不同，

addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)，所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要指望浏览器

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

function addEvent(node, type, handler) {
    if (!node) return false;
    if (node.addEventListener) {
        node.addEventListener(type, handler, false);
        return true;
    }
    else if (node.attachEvent) {
        node.attachEvent('on' + type, handler, );
        return true;
    }
    return false;
}

这样，首先我们解决了第一个问题参数个数不同，现在三个参数，采用事件冒泡阶段触发

第二个问题也得以解决，如果是IE，我们给type添加上on

第四个问题目前还没有解决方案，需要用户自己注意，一般情况下，大家也不会添加很多事件处理程序

试试这个方法感觉很不错，但是我们没有解决第三个问题，由于处理程序作用域不同，如果handler内有this之类操作，那么就会出错。在IE下，实际上大多数函数都会有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.attachEvent('on' + type, function() { handler.call(node); });
        return true;
    }
    return false;
}

这样处理就可以解决this的问题了，但是新的问题又来了，我们这样等于添加了一个匿名的事件处理程序，无法用detachEvent取消事件处理程序，有很多解决方案，我们可以借鉴大师的处理方式，jQuery创始人John Resig是这样做的

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);
        };
        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;
}

事件的捕获

事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段

<style>

div {padding: 50px;}
#div1 {background: red;}
#div2 {background: blue;}
#div3 {background: green;}

</style>

<div id="div1">
    <div id="div2">
        <div id="div3"></div>
    </div>
</div>

<script>
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');

function fn1() {
    alert( this.id );
}

oDiv1.addEventListener('click', fn1, true);
oDiv2.addEventListener('click', fn1, true);
oDiv3.addEventListener('click', fn1, true);
</script>

键盘事件

onkeydown : 当键盘按键按下的时候触发
onkeyup : 当键盘按键抬起的时候触发

document.onkeydown = function(ev) {

    var ev = ev || event;
    alert(ev.keyCode);
    
}

与键盘事件相关的事件对象的属性值

event.keyCode : 数字类型键盘按键的值键值
event.ctrlKey, event.shiftKey, event.altKey

这三个键　我们通常称为功能键

当一个事件发生的时候，如果ctrl || shift || alt 是按下的状态，相应的属性值返回true，否则返回false

document.onclick = function(ev) {
    var ev = ev || event;
    
    alert(ev.ctrlKey);
}

当我们点击时，如果是按住ctrl键则弹出true;

示例：　留言板

当输入完成，　并且按住ctrl+enter(回车),添加留言

<input type="text" id="text1" />
<ul id="ul1"></ul>

var oText = document.getElementById('text1');
var oUl = document.getElementById('ul1');

oText.onkeyup = function(ev) {
    
    var ev = ev || event;
    
    //alert(this.value);
    if ( this.value != '' ) {
        
        //不能写成ev.keyCode == 13 && ev.keyCode == 17;
        //应为ev.keyCode不可能同时为13 和17
        if (ev.keyCode == 13 && ev.ctrlKey) {
        
            var oLi = document.createElement('li');
            oLi.innerHTML = this.value;
            
            if ( oUl.children[0] ) {
                oUl.insertBefore( oLi, oUl.children[0] );
            } else {
                oUl.appendChild( oLi );
            }
            
        }
        
    }
    
}

不是所有元素都能够接收键盘事件，能够响应用户输入的元素，能够接收焦点的元素就能够接收键盘事件

onkeydown : 如果按下不抬起，那么会连续触发

示例：　移动div

oncontextmenu

右键菜单事件，当右键菜单（环境菜单）显示出来的时候触发

document.oncontextmenu = function(){
    alert(1);
    return false;//阻止默认行为
}

例子　弹出自定义右键菜单

var oDiv = document.getElementById('div1');
    
document.oncontextmenu = function(ev) {
    var ev = ev || event;
    
    oDiv.style.display = 'block';
    
    oDiv.style.left = ev.clientX + 'px';
    oDiv.style.top = ev.clientY + 'px';
    
    return false;
    
}

document.onclick = function() {
    oDiv.style.display = 'none';
}

JavaScrip--事件

事件

事件冒泡

事件对象

兼容

clientX clientY

取消冒泡

阻止默认行为

target

dom对象事件处理函数

方法一

绑定事件处理函数

移除事件绑定函数

方法二

IE兼容性

跨浏览器的事件处理程序

事件的捕获

键盘事件

与键盘事件相关的事件对象的属性值

oncontextmenu

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

JavaScrip--事件

事件

事件冒泡

事件对象

兼容

clientX clientY

取消冒泡

阻止默认行为

target

dom对象 事件处理函数

方法一

绑定事件处理函数

移除事件绑定函数

方法二

IE兼容性

跨浏览器的事件处理程序

事件的捕获

键盘事件

与键盘事件相关的事件对象的属性值

oncontextmenu

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

dom对象事件处理函数