event事件对象

event: 事件对象,当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细信息都会被临时保存到一个指定的地方-event对象,供我们在需要的时候调用。

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

      function f1(){
          alert(event);
      }
     f1();
     document.onclick=f1;
//给一个对象绑定一个事件处理函数的第一种形式

注意兼容:ie/chrome :event是一个内置的全局变量 标准下的浏览器:事件对象是通过事件函数的第一个参数传入的。(非标准浏览器ie 6 、7不支持,非标准支持event);

如果一个函数是被事件调用的,那么,这个函数定义的第一个参数就是事件对象。下列案例中a就是事件对象

      function f1(a){
          alert(a);
      }
     document.onclick=f1;

兼容写法

      function f1(a){
          var a=a || event;
          for(var attr in a){
              console.log('属性:'+attr+'值:'+a[attr]);
          }
      }
     document.onclick=f1;

clientX、clientY:当一个事件发生的时候,鼠标到页面可视区域的距离

   var i=0;
   document.onmousemove= function (ev) {
       document.title=i++;
   };
   var div1=document.getElementById('div1');
   document.onmousemove= function (ev) {
       var ev=ev||event;
       div1.style.left=ev.clientX+'px';
       div1.style.top=ev.clientY+'px';
   };

事件流~~~~ 一.事件冒泡 当一个元素接收到事件的时候,会把他接收到的所有传播给他的父级,一直到顶层window,事件冒泡机制。 阻止冒泡:当前要阻止冒泡的事件函数中调用 ev.cancelBubble=true;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
       div{
           padding: 40px;
       }
        #div1{
            background: pink;
        }
        #div2{
            background: yellow;
        }
        #div3{
            background: yellowgreen;
        }
    </style>
    <script>
        window.onload= function () {
            var div1=document.getElementById('div1');
            var div2=document.getElementById('div2');
            var div3=document.getElementById('div3');
            div1.onclick=function(ev){
                var ev=ev||event;
                ev.cancelBubble=true;
                alert(this.id);
            };
            div2.onclick=function(){
                alert(this.id);
            };
            div3.onclick=function(){
                alert(this.id);
            };
        };

    </script>
</head>
<body>
<div id="div1">
    <div id="div2">
        <div id="div3"></div>
    </div>
</div>
</body>
</html>

按钮点击的时候显示,点击任何地方消失

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #div1{
            width: 100px;
            height: 200px;
            border: 1px solid red;
            display: none;
        }

    </style>
    <script>
         window.onload= function () {
             var div1=document.getElementById('div1');
             var btn=document.getElementById('btn');
             btn.onclick= function (ev) {
                 var ev=ev||event;
                 ev.cancelBubble=true;
                div1.style.display='block';
             };
             document.onclick= function () {
                 div1.style.display='none';
             };
         };

    </script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<div id="div1"></div>
</body>
</html>
        function fn1(){
            alert(1)
        }
        function fn2(){
            alert(2)
        }
        document.onclick=fn1;
        document.onclick=fn2;

上面的绑定函数的时候是有一些问题的 为了解决这个问题,给一个对象同一个事件绑定多个不同的函数。

ie下:obj.attachEvent(事件名称,事件函数); 1.没有事件捕获 2.事件名称中没有on 3.事件执行顺序 非标准->倒序 4.this指向window

        function fn1(){
            alert(1)
        }
        function fn2(){
            alert(2)
        }
        document.attachEvent('onclick',fn1);
        document.attachEvent('onclick',fn2);
//        document.attachEvent('onclick', function () {
//         fn1.call(document);
//     })

2.标准下 document.addEventListener(事件名称,事件函数,是否捕获) 1.有捕获 2.事件名称中没有on 3.事件执行是正序 4.this指向该触发事件的对象

//第三个参数:是否捕获(默认是false) false:冒泡  true:是捕获
      document.addEventListener('click', fn1,false);
      document.addEventListener('click', fn2,false);

call(),函数下的一个方法,call方法第一个参数可以改变函数执行过程中的内部this指向,call方法第二个参数开始就是原来函数的参数列表

      function a(){
          alert(this);
      }
//      a();
      a.call();   //a()==a.call()
//      a.call(1)
      function fn(a,b){
          alert(this);
          alert(a+b);
      }

      fn.call(1,10,20);
//     fn.call(null,10,20); 不改变原来的指向

封装的函数addEventListener和attachEvent调兼容

<script>
    function fn1(){
        alert(this);
    }

    function fn2(){
        alert(2);
    }
  function getfn(obj,evname,fn){
     if(obj.addEventListener){
         return obj.addEventListener(evname,fn,false);
     }else{
         return obj.attachEvent('on'+evname, function () {
             fn.call(obj);
         })
     }
  }
  getfn(document,'click',fn1);
</script>

二.事件捕获 在绑定事件中,标准下浏览器是有事件捕获的,非标准无事件捕获。

addEventListener(事件名称,事件函数,是否捕获’)
第三个参数:是否捕获(默认是false) false:冒泡 true:是捕获
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            padding: 40px;
        }
        #div1{
            background: pink;
        }
        #div2{
            background: yellow;
        }
        #div3{
            background: yellowgreen;
        }
    </style>
    <script>
        window.onload= function () {
            var div1=document.getElementById('div1');
            var div2=document.getElementById('div2');
            var div3=document.getElementById('div3');
            function fn(){
                alert(this.id);
            }
//            div3.onclick=fn;
//            div2.onclick=fn;
//            div1.onclick=fn;

//            false=冒泡
//            告诉div1,如果有一个出去的事件触发了你,你就去执行这个函数
//              div1.addEventListener('click',fn,false);
//              div2.addEventListener('click',fn,false);
//              div3.addEventListener('click',fn,false);

            //true 事件捕获
            //告诉div1,如果有一个进去的事件触发了你,你就去执行这个函数
//            true和false就是监听是进来的一项还是出去的一项
            div1.addEventListener('click',fn,true);
            div2.addEventListener('click',fn,true);
            div3.addEventListener('click',fn,true);
            
        };
    </script>
</head>
<body>
<div id="div1">
    <div id="div2">
        <div id="div3"></div>
    </div>
</div>
</body>
</html>

取消事件的绑定函数 1.事件绑定形式的取消

    function fn1(){
        alert(1);
    }
    function fn2(){
        alert(2);
    }
    document.onclick=fn1;
    document.onclick=null;

ie:detachEvent 标准下:removeEventListener

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

//    document.attachEvent('onclick',fn1);
//    document.attachEvent('onclick',fn2);
//    document.detachEvent('onclick',fn1);

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

CSS 1.0~3.0选择器(下)

HTML5学堂:对于CSS选择器我们熟悉了CSS1.0~CSS2.0的使用,我们那么有些选择器还是无法简单获取某元素,对于CSS3的选择器的产生,让我们更加方便...

3103
来自专栏ytkah

css继承样式怎么控制?用选择器

  css样式继承性是指下级的样式属性会继承上级的属性,通俗点讲是儿子来继承父亲的属性,比如li会继承ul的属性。css继承原理是我们设置上级(父级)的CSS样...

3945
来自专栏天天

DOM

1263
来自专栏HTML5学堂

利用JavaScript获取浏览器计算后的样式

HTML5学堂:JavaScript可以用style对象给标签设置样式、获取样式,但是利用style对象获取的样式只能是标签内联的样式,今天要给大家讲解的是利用...

3575
来自专栏zaking's

CSS(CSS3)选择器(1)

这篇文章主要用于存储CSS以及CSS3的选择器部分知识,以便日后查阅及记忆. 该内容分为两部分,第一部分为css选择器的一些基本知识。第二部分为CSS3新增...

29010
来自专栏逸鹏说道

jQuery选择器大全(48个代码片段+21幅图演示)2

4. 属性过滤选择器 ——4.1 [attribute](取拥有attribute属性的元素) 下面的代码,最后一个a标签没有title属性,所以它仍然会带下划...

2918
来自专栏Pythonista

golang之切片

4.cap可以求出slice最大的容量,0<=cap(slice)  <=len(array),其中array是slice引用的数组

1602
来自专栏微服务

jQuery选择器大全(48个代码片段+21幅图演示)

选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就...

3538
来自专栏xingoo, 一个梦想做发明家的程序员

【web必知必会】—— 使用DOM完成属性填充

  本文介绍了使用DOM的简单方法实现动态加载图片的功能。 前文介绍了: 1 DOM四个常用的方法   首先看一下效果,初始时是一个相册,可以点击...

1819
来自专栏九彩拼盘的叨叨叨

使用 CSS 伪元素需要注意的

若不设置,则伪元素不会显示。如果不想设置 content 的内容,可以将内容设置为空。如:

682

扫码关注云+社区