JS中的事件

事件中的几种实现方式

    Dom0时代   

       1、直接在html的属性中写JS代码

1 <div onclick="alert(4);">Div1 Element</div>

       2、定义一个函数，赋值给html元素的onXXX属性

1 <div onclick="clk()">Div Element</div>
2 <script type="text/javascript"> 
3     function clk(){
4         //....
5     } 
6 </script>

       3、使用element.onXXX方式

1 <div id="d3">Div Element</div> 
2 <script type="text/javascript"> 
3     var d3 = document.getElementById('d3'); 
4     d3.onclick = function(){
5         //...
6     } 
7 </script>

    Dom2时代

       4、添加事件方式，使用addEventListener或IE专有的attachEvent

 

事件流 

    官方的定义：事件按照从最特定的事件目标到最不特定的事件目标(document对象或者body)的顺序触发。

    也可说，从页面中接收事件的顺序。也就是说当一个事件产生时，这个事件的传播过程，就是事件流。

    事件不是单一的，比如：点击某个按钮，其实也点击了包含按钮的DIV、文档bod、document.

1 <body onclick="alert(3)">
2     <div onclick="alert(2)">
3         <button onclick="alert(1)">测试按钮</button>
4     </div>
5 </body>

    在IE中，冒泡，会按这个顺序输出:1,2,3;

    但在Netscape Navigator 4.0中则是‘反的’，它所支持的是捕获：输出3,2,1;

    而DOM标准中事件流将这两种方式结合

    window -> document -> body -> div -> button -> button -> div -> body -> document -> window;

    这某些情况下，我们可能就需要去阻止事件流的传播：

1 function stopEvent (evt) {
2     var e = (evt != null) ? evt : window.event; 
3     if (window.event) { 
4         e.cancelBubble=true;  // ie
5     } else { 
6         e.stopPropagation();  // 标准组织
7     } 
8 }

    绑定、解绑、参数、事件对象在IE与W3C中的区别

 1 Evt.extend({
 2         // 添加事件
 3         on : function(ele,type, fn){
 4             if(document.addEventListener){
 5                 ele.addEventListener(type, fn, false);
 6             }else if(document.attachEvent){
 7                 ele.attachEvent('on' + type, fn);
 8             }else{
 9                 ele['on' + type] = fn;
10             }
11         },
12         // 解除事件
13         un : function(ele,type, fn){
14             if(document.removeEventListener){
15                 ele.removeEventListener(type, fn);
16             }else if(document.detachEvent){
17                 ele.detachEvent(type, fn);
18             }else{
19                 ele['on' + type] = null;
20             }
21         },
22         /*点击*/
23         click : function(ele,fn){
24             this.on(ele,'click',fn);
25         },
26         // ...
27       });

 

Event接口(IE低版本浏览器不做专门的讨论)

　   JS里并没有严格的接口概念，只是为程序提供了某个对象拥有某些属性或者方法的描述

      Event对象实现Event接口或子接口，声明了该种事件类型的详细信息。

      其中Event是基础接口，UIEvent 和 MutationEvent是他的子接口。而MouseEvent又是UIEvent的子接口

   

  Event 接口具有如下属性和方法：

    Type                     指明事件的类型

    Target                  发生事件的节点      // srcElement

    currentTarget        事件当前传播到达的节点。

    eventPhase            当前所处的事件传播阶段（捕获、目标、冒泡）

    timeStamp            事件发生的时间点（时间戳）

    cancelable              声明事件是否取消默认动作

    bubbles                 声明事件时候在文档中起泡

    stopPorpagation()   阻止冒泡     // cancelBubble

    preventDefault       阻止默认动作的执行

    ...

  UIEvent接口属性

    Event的子接口，在其基础上定义了两个新的属性：

       view   发生事件的window对象

       detail    提供事件的额外信息

  MouseEvent 接口属性

      是UIEvent的子接口，在UIEvent基础上定义了下列属性

      button                                          mousedown  click 等事件中，鼠标键的状态（0鼠标左键2鼠标右键）

      altKey ctrlKey metaKay shiftKey      在鼠标事件发生时。是否按下了该键

      clientX \Y                                      事件发生时，鼠标指针相对于浏览器左上角的坐标  

      screenX\Y                                      相对于显示器左上角的坐标

          ...

事件的代理与委托

   通过事件的冒泡机制来实现的

    优点：

        1、是可以节省大量的内存占用，减少事件注册，比如在table上可以代理所有td的click事件

        2、对新增的子对象不需要再次绑定事件，适于动态内容部分

    缺点：

        不能所有的事件都用代理，不应该触发的元素也被绑上了事件。

 1 function delegate(pid, eventType, selector, fn) { 
 2     var parent = $$.$id(pid); 
 3     function handle(e){ 
 4       var target = $$.GetTarget(e); 
 5       console.log(target.nodeName) 
 6       if(target.nodeName.toLowerCase()=== selector || target.id === selector || target.className.indexOf(selector) != -1){ 
 7         fn.call(target); 
 8       } 
 9     } 
10     parent[eventType]=handle; 
11 } 
12 delegate('table','onclick','td',function(){ 
13   this.style.color='white' 
14   this.style.background='red' 
15 })

 自定义事件

 

 1  //将有参数的函数封装为无参数的函数
 2   function createFunction(obj, strFunc) {
 3       var args = [];       //定义args 用于存储传递给事件处理程序的参数
 4       if (!obj) obj = window; //如果是全局函数则obj=window;
 5       //得到传递给事件处理程序的参数
 6       for (var i = 2; i < arguments.length; i++){
 7         // alert(arguments[i]);
 8         args.push(arguments[i]);
 9       }
10       //用无参数函数封装事件处理程序的调用
11       return function() {
12           obj[strFunc].apply(obj, args); //将参数传递给指定的事件处理程序
13       }
14   }
15   function class1() {
16   }
17   class1.prototype = {
18       show: function() {
19           this.onShow();
20       },
21       onShow: function() { }
22   }
23   function objOnShow(userName) {
24       alert("hello," + userName);
25   }
26   function test() {
27       var obj = new class1();
28       var userName = "test";
29       obj.onShow = createFunction(null, "objOnShow", userName);
30       console.log(obj.onShow)
31       obj.show();
32   }
33   test()

 

posted on 2016-04-04 18:14  要饭的  阅读(216)  评论(0)  编辑  收藏  举报