学习笔记4

1、事件流

当页面元素触发事件的时候, 该元素的容器以及整个页面都会按照特定的顺序响应该元素的触发事件,事件传播的顺序叫作事件流。

一、事件流分类：

• 冒泡型事件： 全部浏览器都支持,由明确的事件源到最不肯定的事件源依次向上触发。

• 捕获型事件：(IE不支持) 不肯定的事件源到明确的事件源依次向下触发。

二、传统事件：

`  div1.onclick = function(){
    console.log(1);
    };
    div2.onclick = function(){
        console.log(2);
    };
    div3.onclick = function(){
        console.log(3);
    }`

三、现代事件：须要绑定的事件名称只须要写后面的，‘on’可不写；最后一个语句是判断处于捕获阶段仍是冒泡阶段（true：捕获阶段；false：冒泡阶段）

`function  fn(){
    console.log('hello');
}
div3.addEventListener('click',fn,false)`

四、传统事件和现代事件的区别：

• 传统事件只能给一个事件绑定一个事件处理函数，而现代事件能够给一个事件绑定多个处理函数
• 传统事件全部的浏览器都支持，现代事件在低版本的IE浏览器下不支持
• 现代事件既能够绑定在冒泡阶段，也能够绑定在捕获阶段；传统事件只能绑定在冒泡阶段

阻止冒泡事件：

`div.removeEventlistener`  移除

对于最里层的节点来讲，捕获阶段和冒泡阶段的事件，哪一个事件先绑定，就会先执行哪一个事件。

2、阻止事件流

IE: event.cancelBubble = true;

FF: event.stopPropagation();

`input.onkeydown = function(e){
    if(e.keyCode === 67 && e.altKey === true){
        alert('触发快捷键');
    }
};`

一、阻止事件流

` div1.onclick = function(){
    alert(1);
};
div2.onclick = function(){
    alert(2);
};
div3.onclick = function(event){
    //系统申明形参
    //在标准浏览器下 var event = 事件对象；
    //在ie浏览器下 var event = undefined;
    //alert(3);
    //兼容两个浏览器
    //if(event === undefined){
    //    event = window.event;
    //}

    //也可简写为：
    event = event || window.event;
    if(event.stopPropagation){
        event.stopPropagation();
    }else{
        event.cancelBubble = true;
    }
    alert(3);
};`

二、阻止事件的默认行为

`input.addEventListener('keydown',function(event){
    console.log('hello');
    event.preventDefault();
},false)`

在传统事件中，还能够使用return false的方式来阻止事件的默认行为

` input.onkeydown = function(event){
    console.log('hello');
    //event.preventDefault();
    return false;
}`

（event.preventDefault();方式两种均可以使用，推荐使用此方法）

3、例子：

div在浏览器中随意拖拽：

`(function(){
    var div =document.getElementById('tuo');

    //页面刚加载完成时，div距离页面左侧和顶部的距离
    div.initPosition = {
        x:div.getBoundingClientRect().left,
        y:div.getBoundingClientRect().top
    };

    //设置位置
    function setPosition(x,y){
        div.style.WebkitTransform = 'translate(' + x + 'px,' + y + 'px)';
        div.style.OTransform = 'translate(' + x + 'px,' + y + 'px)';
        div.style.MozTransform = 'translate(' + x + 'px,' + y + 'px)';
        div.style.msTransform = 'translate(' + x + 'px,' + y + 'px)';
        div.style.transform = 'translate(' + x + 'px,' + y + 'px)';
    }

    div.addEventListener('mousedown',function(event){
        //获取当前鼠标按下的时候，鼠标在div内部的坐标
        this.downPosition = {
            x:event.offsetX,
            y:event.offsetY
        };
        document.addEventListener('mousemove',hanleMouseMove,false);
        document.addEventListener('mouseup',releaseMouse,false);
    },false);

    //鼠标移动时候的事件处理函数
    function hanleMouseMove(event){
        var x = event.clientX - div.downPosition.x - div.initPosition.x;
        var y = event.clientY - div.downPosition.y - div.initPosition.y;
        setPosition(x,y);
    }

    //鼠标抬起时的事件处理函数
    function releaseMouse(){
        document.removeEventListener('mousemove',hanleMouseMove,false);
        document.removeEventListener('mouseup',releaseMouse,false);
    }
})();`