JS闯关之路饥人谷技术博客让前端飞

事件和事件对象

2017-07-13  本文已影响48人  icessun
事件流.png

事件

就是和浏览器产生交互效果的,事件触发和函数一起使用,当触发事件的时候,调用相应的事件去处理接下来的事情。

DOM0级事件

直接在dom对象上注册事件名称,所有浏览器都支持。

document.getElementById('div1').onclick=function(e){ // 触发事件之后的操作}

事件触发会默认传入一个参数e事件对象;通过这个事件对象,可以获取到触发这个事件的dom元素,点击的坐标值,等一些主要的信息。当然事件的触发也可以这样写:

document.getElementById('div1')['onclick']=function(e){// 触发事件后的操作}

这上面的两种事件的触发,其实也就是js对象身上属性的两种访问方式,也就是说:

DOM0级事件中的this

一般下面这种写法的时候,当事件触发的时候,事件中的this就是指向触发该事件的dom元素对象

 <script>
var oDiv=document.getElementById('div1');

oDiv.onclick=function(e){ 
// 触发事件之后的操作
alert(this.id); // div1
}

// 要想解除div身上的点击事件,直接在后面注册点击事件并且设置为null
oDiv.onclick=null;
 </script>

当把事件写在html代码里面的时候,虽然也遵守事件覆盖的原则,但不会传入event事件对象,相当于动态调用函数,this指向的是window,而不是事件触发者:dom元素

<div id='div1' class='div1' onclick='exec();'></div>

DOM2级事件

支持元素绑定多个事件

var btn=document.getElementById('div');
btn.addEventListener('click',function(e){
     console.log(this); // btn
  },false)

原先点击的事件,事件应该发生本来的事件效果,但是可以去阻止默认的事件

通过e.preventDefault来判断是标准浏览器还是低级IE浏览器

 e.preventDefault?e.preventDefault():e.returnValue=false;

只能输入和编辑数字

<input type="text" placeholder="只能输入和编辑数字" id="txt"/>
<script>
     var oText=doucment.getElementById('txt');
     oText.onkeydown=function(e){
       e=e||window.event;
       // console.log(e.keyCode)
// 阻止默认事件
     if((e.keyCode<48||e.keyCode>57)&&e.keyCode!==8){
              e.preventDefault?e.preventDefault():e.returnValue=false;
    }
 }

事件流

定义

文档对象模型DOM的结构是一个树状,当一个元素产生一个事件时,该事件会在元素节点与跟节点按特定的顺序传播,路径所经过的节点都会收到该事件,这个过程称为事件流

类型

DOM标准同时支持上述两种事件类型,但是捕获事件先发生。两种事件流都会触发DOM中的所有对象,在document对象开始,也在其中结束。但也有标准的浏览器会将事件延续到window对象

<div id='div1'>
    <div id='div2'></div>
</div>

var btn=document.getElementById('div1');
            
            // 冒泡
            btn.addEventListener('click',function(e){
                console.log('冒泡')
            },false);
            
            // 捕获事件
            btn.addEventListener('click',function(e){
                console.log('捕获')
            },true);

当我们点击里面的div的时候,是先打印捕获,在打印冒泡;但是当我们先点击外面的div的时候,是先打印的冒泡,在打印的是捕获;为什么?

根据事件流触发的顺序图,可以知道,当我们点击里面的div的时候,根据下面的事件流传递的过程原理知道,是先发生捕获事件在发生冒泡事件;当点击的是外面的div,并且事件绑定在点击元素上面,其触发的顺序是按照绑定的顺序触发的

外层div和内层div同时注册了捕获事件,那么点击内层div时,外层div的事件一定是先触发的;外层div和内层div都是注册的冒泡事件,点击内层div时,一定是内层div事件先执行,原理相同。

事件流触发顺序
首先是捕获事件传递,接着是冒泡事件传递;要是一个事件处理函数同时注册了捕获和冒泡事件,则会在dom事件模型中调用两次。标准的DOM事件模型(特有):文本节点也会触发事件,但是IE不会

事件流传递过程

如果为一个超链接添加了click事件监听器,那么当该链接被点击时该事件监听器就会被执行。但如果把该事件监听器指派给了包含该链接的p元素或者位于DOM树顶端的document节点,那么点击该链接也同样会触发该事件监听器。这是因为事件不仅仅对触发的目标元素产生影响,它们还会对沿着DOM结构的所有元素产生影响。

W3C事件模型标准

W3C事件模型中明确地指出了事件流转送的原理。可以分为3个阶段。

并非所有的事件都会经过冒泡阶段的,所有的事件都要经过捕捉阶段和目标阶段,但是有些事件会跳过冒泡阶段。例如,让元素获得输入焦点的focus事件以及失去输入焦点的blur事件就都不会冒泡。

事件冒泡(代理\委托)

利用到事件的冒泡和目标元素,把事件处理器添加到父元素上,等待子元素事件冒泡,并且父元素能够通过target,IE为srcElement来判断是哪一个子元素,从而进行处理

<style>
        div{
            width: 100px;
            height: 100px;
            margin: 10px;
            font-size: 20px;
            float: left;
            background: #ff0000;
        }
    </style>
</head>
<body>
<script>
    for(var i=0; i<20; i++){
        var oDiv=document.createElement('div');
        oDiv.innerHTML='<a href="javascript:;">'+i+'删除我吧</a>';
        document.body.appendChild(oDiv);
    }
    //如果一个容器中,有很多个元素,都要触发某个行为,我们可以这个行为委托给他们共同的父级;然后通过事件源来做不同的区分;
    document.body.onclick=function(e){
        e=e||window.event;
        //通过事件源来做不同的区分
        e.target= e.target|| e.srcElement;
        if(e.target.tagName.toLowerCase()=='a'){
            this.removeChild(e.target.parentNode);
        }
    }
</script>
</body>

好处

上一篇下一篇

猜你喜欢

热点阅读