d3事件 二 事件的触发与自定义事件

首先给大家分享一个巨牛巨牛的人工智能教程，是我无意中发现的。教程不仅零基础，通俗易懂，而且非常风趣幽默，还时不时有内涵段子，像看小说一样，哈哈～我正在学习中，觉得太牛了，所以分享给大家！点这里可以跳转到教程

                    

      在第4版中，d3新增了事件的触发函数dispatch，类似于jquery的trigger函数，用于触发dom元素的事件处理函数。并且，d3的选择集合还可以注册任意名称的事件与相关的事件处理函数，即自定义事件。

      假定页面中还存在文章”d3事件(一):事件的注册与命名空间”的相关元素，基于此我们进行如下操作。

d3.selectAll('button')  //    d代表绑定的数据，i代表元素在集合中的位置，group代表相关的元素集合  .on('hello', function(d, i, group) {       //   获取事件对象       var event = d3.event,           output =  'Hello,' + d.username;       //   从event里取出携带的数据       if(event.detail && event.detail.suffix) {            output += event.detail.suffix                       }       //   进行名称的处理       alert(output);  })
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13

      因为hello不是html标准的事件类型，现在点击将无法触发绑定的事件函数，这时则需要使用dispatch进行触发。

//  触发hello事件函数d3.selectAll('button').dispatch('hello', {                //  携带的数据会自动装入到d3.event对象中                detail : {                    suffix : '!'                }            }); //  将会输出"Hello,yiifaa!"字样            
  
  
1
2
3
4
5
6
7
8

      dispatch能非常快捷地激发函数，并且能保留当前元素的上下文，如果需要更个性化、更强大的触发函数，则需要使用customEvent。看customEvent这个名称感觉像是定义个性化事件，然而它却是用于事件的触发，可以控制上下文、传递的数据以及对d3事件的包装。

d3.customEvent(    //  替换d3.event，如果在html的标准事件里出发，如点击事件，还会将d3.event作为此对象的sourceEvent插入    {        detail : {            prefix : '你好,'        }    },     //  替换处理函数    function(params) {        var ev = d3.event;        //  还可以获取ev.sourceEvent，它指向之前发生的UI事件        alert(ev.detail.prefix + this.datum().username +params.suffix);    },     //  替换处理函数的下上文，即处理函数的this    d3.selectAll('button'),     //  处理函数的参数列表    [{        suffix : '!'    }]);//  现在输出的结果为"你好，yiifaa!"
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

           

浏览人工智能教程