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 ...

随机推荐

【POJ】2299 Ultra-QuickSort（逆序对）
http://poj.org/problem?id=2299 在两个元素相同的数列里,其中一个数列要移动到另一个数列相同元素相同的位置,那么要移动的次数就是这个数列关于另一个数列的逆序对数(hash后 ...
java正则表达式过滤html标签
import java.util.regex.Matcher; import java.util.regex.Pattern; /** * <p> * Title: HTML相关的正则表达 ...
Java实现FTP上传下载功能
Java FTP客户端工具包很多,在此我选用的Apache的FTPClient.这个包的获取可以通过http://commons.apache.org/net/来获取,我使用的是最新的commons- ...
MIB-II
. 1.3.6.1.2.1
java实现吸血鬼数字
public class Vempire { public static void main(String[] arg) { String[] ar_str1, ar_str2; ; int from ...
Apache和mysql的安装设置
Apache和mysql的安装较简单,主要是安装前请保证80端口未被占用比如 iis 以前安装过的apache mysql 先停止运行phpmyadmin,主要是配置文件的问题,把phpMyAdmi ...
IOS第四天(5:创建备份区按钮和判断结果)
创建备份区按钮和判断结果 /** 创建备选区按钮 */ - (void)createOptionButtons:(HMQuestion *)question { // 问题:每次调用下一题方法时,都会 ...
小组项目alpha发布的评价
新蜂团队一直都特别努力,这节课我也看到了他们努力的结果--项目可以顺利运行,在两个同学试玩期间没有出现BUG,不知道玩游戏的同学的心情,反正我们在台下看得很开心的. 飞天小女警组的礼物挑选系统,是一个 ...
css样式重置方案 -解决浏览器差异
1.http://meyerweb.com/eric/tools/css/reset/ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 2011 ...
新浪SAEStorage图片上传的demo和说明
<?php if(isset($_POST[up])){ $s2 =new SaeStorage();//实例化 $name =$_FILES['myfile']['name'];//上传到服务 ...

JS事件分析

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

随机推荐

热门专题