JS事件分析

1.注册事件

1.1 使用HTML元素的事件属性

<div id='myDiv' style="width:100px;height:100px;background-color:red" onclick="clickHandler()"
        onmouseover="javascript:mouseOverHandler()">
</div>

1.2 给元素对象添加事件属性---DOM0形式

<div id='myDiv' style="width:100px;height:100px;background-color:red"></div>

    <script>
        function clickHandler(){
            console.log("click handler");    //"click handler"
            console.log(arguments.length);    //0
            console.log(event.type);
        }
        var myDiv = document.getElementById('myDiv');
        myDiv.onclick = clickHandler;
  </script>

1.3 使用script标签的for和event属性(仅IE支持)

<div id='myDiv' style="width:100px;height:100px;background-color:red"></div>

  <script for="myDiv" event="onclick">
       alert("clicked in IE")
  </script>

1.4 attachEventh和detachEvent(仅 lt IE 11支持)---DOM2形式

<div id='myDiv' style="width:100px;height:100px;background-color:red"></div>

  <script>
      var myDiv = document.getElementById("myDiv");
      myDiv.attachEvent("onclick",function(){alert("clicked in ie")});
  </script>

在IE 11中:对象不支持“attachEvent”属性或方法

1.5 addEventListener和removeEventListener(gte IE 9支持，chrome支持，ff支持)---DOM2形式

<div id='myDiv' style="width:100px;height:100px;background-color:red"></div>

  <script>
      var myDiv = document.getElementById("myDiv");
      myDiv.addEventListener("click",function(){alert("clicked")});
  </script>

在addEventListener中，第二个参数可以是函数也可以一个对象，要求该对象必须有handleEvent方法属性

<div id='myDiv' style="width:100px;height:100px;background-color:red"></div>
    <input type="button" value="remove" onclick="removeListener()" />
<script>
      var myDiv = document.getElementById("myDiv");
      var obj = {
              name:"handle",
              handleEvent:function(){
                  alert("clicked");
              }
      }
      myDiv.addEventListener("click",obj);

      function removeListener(){
          myDiv.removeEventListener("click",obj);
      }
  </script>

2.this的指向

2.1 使用HTML事件属性

　　this指代绑定监听器的HTML元素

<div id='myDiv' style="width:100px;height:100px;background-color:red" onclick="console.log(this)">
     <div id="d1" style="width:40px;height:40px;background-color:blue"></div>
</div>

this指向myDiv

2.2 给元素对象添加事件属性

　　this指向绑定监听器的HTML元素

<div id='myDiv' style="width:100px;height:100px;background-color:red">
      <div id="d1" style="width:40px;height:40px;background-color:blue"></div>
</div>

<script type="text/javascript">
        function clickHandler(){
            console.log(this);
        }

        var myDiv = document.getElementById("myDiv");
        myDiv.onclick = clickHandler;
</script>

this指向myDiv

2.3 使用script标签的for和event

　　this指代绑定监听器的HTML元素

<div id='myDiv' style="width:100px;height:100px;background-color:red">
      <div id="d1" style="width:40px;height:40px;background-color:blue"></div>
</div>

<script for="myDiv" event="onclick">
    console.log(this);
</script>

this指向myDiv

2.4 使用attachEvent和detachEvent

　　this指向window对象

<div id='myDiv' style="width:100px;height:100px;background-color:red">
     <div id="d1" style="width:40px;height:40px;background-color:blue"></div>
</div>

<script type="text/javascript">
        function clickHandler(){
            console.log(this == window);
        }

        var myDiv = document.getElementById("myDiv");
        myDiv.attachEvent("onclick",clickHandler);
 </script>

打印结果:true

2.5 使用addEventListener和removeEventListener

　　this指代绑定监听器的HTML元素

<div id='myDiv' style="width:100px;height:100px;background-color:red">
        <div id="d1" style="width:40px;height:40px;background-color:blue"></div>
</div>

    <script type="text/javascript">
        function clickHandler(){
            console.log(this);
        }

        var myDiv = document.getElementById("myDiv");
        myDiv.addEventListener("click",clickHandler);
    </script>

3.事件对象Event

IE各个版本会将Event对象绑定到window中，在需要使用Event对象时，只需window.event;

在使用DOM0方法注册事件时:

　　gte IE 9的版本会将Event对象作为参数传递到处理函数中

在使用attachEvent方法注册事件时:

　　IE的各个版本Event对象作为参数传递到处理函数中

firefox会将Event对象作为参数传递到处理函数中

chrome:两种都有

<div id='myDiv' style="width:100px;height:100px;background-color:red" >
        <div id="d1" style="width:40px;height:40px;background-color:blue"></div>
</div>

<script type="text/javascript">
     function clickHandler(ev){
         console.log(ev);
     }

     var myDiv = document.getElementById("myDiv");
     myDiv.onclick = clickHandler;
 </script>

4.事件对象的属性和方法

4.1 cancleBubble:是否取消冒泡

4.1.1该属性在IE的各个版本都支持

<div id='myDiv' style="width:100px;height:100px;background-color:red" >
        <div id="d1" style="width:40px;height:40px;background-color:blue"></div>
    </div>

    <script type="text/javascript">
        function parentCliked(ev){
            console.log("parent clicked");
            var ev = ev ? ev : window.event;
        }
        function childClicked1(ev){
            console.log("child clicked1");
            var ev = ev ? ev : window.event;
            ev.cancelBubble = true;
        }
        function childClicked2(ev){
            console.log("child clicked2");
            var ev = ev ? ev : window.event;

        }

        var myDiv = document.getElementById("myDiv");
        var d1 = document.getElementById('d1');

        myDiv.onclick = parentCliked;
        d1.attachEvent("onclick",childClicked2);
        d1.attachEvent("onclick",childClicked1);

    </script>

IE中打印:

child clicked1

child clicked2

注意:添加监听器的顺序

4.1.2 chrome和firefox的高版本也支持

<div id='myDiv' style="width:100px;height:100px;background-color:red" >
        <div id="d1" style="width:40px;height:40px;background-color:blue"></div>
    </div>

    <script type="text/javascript">
        function parentCliked(ev){
            console.log("parent clicked");
            var ev = ev ? ev : window.event;
        }
        function childClicked1(ev){
            console.log("child clicked1");
            var ev = ev ? ev : window.event;
            ev.cancelBubble  = true;
        }
        function childClicked2(ev){
            console.log("child clicked2");
            var ev = ev ? ev : window.event;

        }

        var myDiv = document.getElementById("myDiv");
        var d1 = document.getElementById('d1');

        myDiv.onclick = parentCliked;
        d1.addEventListener("click",childClicked1);
        d1.addEventListener("click",childClicked2);

    </script>

打印出:

child clicked1

child clicked2

4.2 stopPropagation():取消冒泡

　　bubbles:返回boolean值，判断当前事件能否冒泡(只读)

只有使用addEventListener方法添加的监听器，该属性才有效(即使在IE 中)

<div id='myDiv' style="width:100px;height:100px;background-color:red" >
        <div id="d1" style="width:40px;height:40px;background-color:blue"></div>
    </div>

    <script type="text/javascript">
        function parentCliked(ev){
            console.log("parent clicked");
            var ev = ev ? ev : window.event;
        }
        function childClicked1(ev){
            console.log("child clicked1");
            var ev = ev ? ev : window.event;
            ev.stopPropagation();
        }
        function childClicked2(ev){
            console.log("child clicked2");
            var ev = ev ? ev : window.event;

        }

        var myDiv = document.getElementById("myDiv");
        var d1 = document.getElementById('d1');

        myDiv.onclick = parentCliked;
        d1.addEventListener("click",childClicked1);
        d1.addEventListener("click",childClicked2);

    </script>

打印出:

child clicked1
child clicked2

4.3 stopImmediatePropagation():取消冒泡，监测该事件的其他监听器都停止工作

只有使用addEventListener方法添加的监听器，该属性才有效

<div id='myDiv' style="width:100px;height:100px;background-color:red" >
        <div id="d1" style="width:40px;height:40px;background-color:blue"></div>
    </div>

    <script type="text/javascript">
        function parentCliked(ev){
            console.log("parent clicked");
            var ev = ev ? ev : window.event;
        }
        function childClicked1(ev){
            console.log("child clicked1");
            var ev = ev ? ev : window.event;
            ev.stopImmediatePropagation();
        }
        function childClicked2(ev){
            console.log("child clicked2");
            var ev = ev ? ev : window.event;

        }

        var myDiv = document.getElementById("myDiv");
        var d1 = document.getElementById('d1');

        myDiv.onclick = parentCliked;
           d1.addEventListener("click",childClicked1);
        d1.addEventListener("click",childClicked2);

    </script>

打印出:

child clicked1

4.4 cancelable和preventDefault();

preventDefault()方法阻止默认行为

cancelable:返回boolean值，判断能否阻止默认行为(只读)

只有使用addEventListener方法添加的监听器，该属性才有效

<a id="aa" href="#">click here</a>

 <script>
        var link = document.getElementById("aa");
        link.addEventListener("onclick",clickHandler);

        function clickHandler(ev){
            var ev = ev ? ev : window.event;
            ev.preventDefault();
        }
 </script>

cancelable是只读的

<a id="aa" href="http://www.baidu.com/">click here</a>

    <script>
        var link = document.getElementById("aa");
        link.addEventListener("click",clickHandler);

        function clickHandler(ev){
            var ev = ev ? ev : window.event;
            console.log(ev.cancelable);//true
            ev.cancelable = false;
            ev.preventDefault();
            console.log(ev.cancelable);//true
        }
    </script>

即使设置了cancelable=true,仍然能阻止默认行为

4.5 returnValue:是否取消默认行为，设置为false则取消默认行为是IE浏览器特有的属性

<a id="aa" href="#">click here</a>

    <script>
        var link = document.getElementById("aa");
        link.attachEvent("onclick",clickHandler);

        function clickHandler(ev){
            var ev = ev ? ev : window.event;
            ev.returnValue = false;
        }
   </script>

<a id="aa" href="http://www.baidu.com">click here</a>

    <script>
        var link = document.getElementById("aa");
        link.attachEvent("onclick",clickHandler);

        function clickHandler(ev){
           ev.returnValue = false;
        }
    </script>

IE中:

　　当使用attachEvent注册监听器时，可以使用参数ev或者window.event来设置returnValue;

　　当使用addEventListener注册监听器时

　　　　IE 9,10 window.event.returnValue = false;或者ev.preventDefault();

　　　　IE 11 ev.preventDefault()或者window.event.preventDefault();

　　当使用obj.onclick = clickHandler形式时

　　　　　　IE 9，10，11支持参数传递，但是参数ev对象中没有returnValue属性，通过ev参数来设置行不通

　　　　　　IE 5~10 可以使用window.event.returnValue = false来阻止默认行为

　　　　　　IE 11: window.event没有returnValue属性，设置失败

综上:

　　IE 浏览器 5，6，7，8，9，10都能使用attachEvent来注册监听，使用此方法生成的Event对象是具有IE 特性的对象，里面包含了cancelBubble,returnValue等IE标志

　　IE 11废弃了对attachEvent的支持

　　IE 9,10,11实现了对addEventListener的支持，该方法生成的Event对象是符合DOM标准的

　　IE 9,10 的ev对象是DOM标准对象，window.event是IE 私有对象

　　IE 11的ev对象和window.event都是DOM标准对象

DOM标准对象中没有IE 私有属性

4.6 srcElement、target、currentTarget

srcElement只在IE浏览器中存在，不管以addEventListener还是attachEvent

它指向触发事件的元素，而不是绑定事件的元素

currentTarget和target:只有使用addEventListener方法添加的监听器，该属性才有效。

4.7 relatedTarget、fromElement、toElement

发生mouseover和mouseout事件时，还会涉及更多的元素。这两个事件都会涉及把鼠标指针从一个元素的边界之内移到另一个元素边界之内。对mouseover事件而言，事件的主目标是获得光标的元素，而相关元素就是那个失去光标的元素。类似地，对mouseout事件而言，事件的主目标是失去光标的元素，而相关元素则是获得光标的元素。

DOM通过event对象的relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值；对于其他事件，这个属性的值是null。IE不支持realtedTarget属性，但提供了保存着同样信息的不同属性。在mouseover事件触发时，IE的fromElement属性中保存了相关元素；在mouseout事件出发时，IE的toElement属性中保存着相关元素。

兼容性写法:

if(event.relatedTarget)
{
    return event.relatedTarget;
 }else if(event.fromElement)
 {
     return event.fromeElement;
 }else if(event.toElement)
 {
   return event.toElement;
 }else{
    return null;
 }

5.事件处理函数的执行顺序

5.1

<div id='myDiv' style="width:100px;height:100px;background-color:red" onClick="alert('1')" onClick="alert('2')">

</div>

弹出1

5.2

var myDiv = document.getElementById("myDiv"); 

myDiv.onclick = function(){
    alert('1');
}

myDiv.onclick = function(){
    alert('2');
}

弹出2

5.3

<div id='myDiv' style="width:100px;height:100px;background-color:red" onclick="alert('3')">

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

        myDiv.onclick = function(){
            alert('1');
        }

        myDiv.onclick = function(){
            alert('2');
        }

    </script>

弹出2

5.4

 <div id='myDiv' style="width:100px;height:100px;background-color:red" onclick="alert('3')">

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

        /*myDiv.onclick = function(){
            alert('1');
        }

        myDiv.onclick = function(){
            alert('2');
        }*/

        myDiv.addEventListener("click",function(){
            alert("1")
        });

    </script>

弹出3,1

5.5

<div id='myDiv' style="width:100px;height:100px;background-color:red" onclick="alert('3')">

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

        /*myDiv.onclick = function(){
            alert('1');
        }

        myDiv.onclick = function(){
            alert('2');
        }*/

        myDiv.addEventListener("click",function(){
            alert("1")
        });
        myDiv.addEventListener("click",function(){
            alert("2")
        });

    </script>

弹出3,1,2

5.6

 <div id='myDiv' style="width:100px;height:100px;background-color:red" onclick="alert('3')">

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

        /*myDiv.onclick = function(){
            alert('1');
        }

        myDiv.onclick = function(){
            alert('2');
        }*/

        myDiv.attachEvent("onclick",function(){
            alert("1")
        });
        myDiv.attachEvent("onclick",function(){
            alert("2")
        });

    </script>

lt IE 9----->3,2,1

gte IE 9----> 3,1,2

5.7

 <div id='myDiv' style="width:100px;height:100px;background-color:red" onclick="alert('3')">

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

        myDiv.onclick = function(){
            alert('1');
        }

        myDiv.onclick = function(){
            alert('2');
        }

        myDiv.attachEvent("onclick",function(){
            alert("4")
        });
        myDiv.attachEvent("onclick",function(){
            alert("5")
        });

    </script>

或者

 <div id='myDiv' style="width:100px;height:100px;background-color:red" onclick="alert('3')">

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

        myDiv.onclick = function(){
            alert('1');
        }

        myDiv.onclick = function(){
            alert('2');
        }

        myDiv.addEventListener("click",function(){
            alert("4")
        });
        myDiv.addEventListener("click",function(){
            alert("5")
        });

    </script>

弹出2,4,5(IE 9以下是2,5,4)

综上:

　　1.仅仅使用HTML属性添加事件处理函数时，只有第一个添加的有效，见5.1

　　2.使用DOM0添加的事件处理函数，后添加的覆盖前面添加的，而且覆盖通过HTML属性添加的，见5.2,5.3

　　3.使用DOM2添加的事件处理函数，不会覆盖任何其他事件处理函数

　　4.使用addEventListener添加的事件处理函数的执行顺序，按照添加的先后顺序执行

　　5.使用attachEvent添加的事件处理函数的执行顺序，在 <IE 9时，是倒序执行，>= IE9之后和addEventListener的执行顺序一样

JS事件分析的更多相关文章

js事件监听器用法实例详解
这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分 ...
js事件监听器用法实例详解-注册与注销监听封装
本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事 ...
理解js事件冒泡事件委托事件捕获
js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...
dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
什么是JS事件冒泡？
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么 ...
js事件技巧方法整合
window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...
js事件浅析
js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...
js 事件大全
Js事件大全一般事件事件浏览器支持描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...
原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

随机推荐

Codeforces Round #204 (Div. 2) A.Jeff and Digits
因为数字只含有5或0,如果要被90整除的话必须含有0,否则输出-1 如果含有0的话,就只需考虑组合的数字之和是9的倍数,只需要看最大的5的个数能否被9整数 #include <iostream& ...
OI优化开关
#pragma comment(linker,"/STACK:10240000,10240000")#pragma GCC optimize ("O2")
js上传图片预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
Tomcat设置默认启动项目及Java Web工程设置默认启动页面
Tomcat设置默认启动项目 Tomcat设置默认启动项目,顾名思义,就是让可以在浏览器的地址栏中输入ip:8080,就能访问到我们的项目.具体操作如下: 1.打开tomcat的安装根目录,找到Tom ...
imread() not working in OpenCV 2.4.11 Debug mode
The OpenCV function imread() not working in OpenCV 2.4.11 Debug mode of VS2010 under Win32, the way ...
Ubuntu 下误修改用户组导致sudo命令无效
1.手贱地修改了当前用户的权限组,导致sudo命令无法使用,且root用户的密码尚未修改,登陆不了root用户. 2.切换到recoverymode ,使用root用户登陆 3.执行mount -o ...
hdu Collect More Jewels
思路: 先用bfs求出入口,宝物,出口,两两之间的最短距离. 在用dfs搜索所有情况,求出从入口走到出口能获得的最大价值. 我们要解决几个问题:1.求入口到第一个取宝物的地方的最短距离 2.求第i个取 ...
Leetcode | substr()
求子串当然最经典的就是KMP算法了.brute force算法在leetcode上貌似也有一些技巧. brute force: char* StrStr(const char *str, const ...
《Java核心技术卷二》笔记（三）正则表达式
正则表达式语法一个正则表达式描述了字符串的构成规则(模式).如果一个具体的字符串正好符合正则表达式描述的这个规则,这个字符串就是与表达式匹配的.先看一下怎么描述这种规则,也就是正则表达式语法.正则表 ...
TabBarViewController的创建以及渐变隐藏
// CustomTabBarViewController.h #import <UIKit/UIKit.h> @interface CustomTabBarViewController ...

JS事件分析

JS事件分析的更多相关文章

随机推荐

热门专题