javascript 的事件绑定和取消事件

研究fabricjs中发现,它提供canvas.on('mousemove', hh) 来绑定事件, 提供 canvas.off()来取消绑定事件这样的接口,很是方便,

那我们就不妨探究一下内在的实现原理:

<h1>
The "Post-Link" Function Is The "Link" Function In AngularJS Directives
</h1> <p
bn-using-post-link
bn-using-link
bn-using-fn-only> Look at the console-output; I am logging the link-functions from within the
AngularJS source-code.
<button onclick="cancelEve();">取消事件</button>
</p> <script>
function say(){
console.log('say arguments: ', arguments);
console.log(arguments.length);
for(var i in arguments){
console.log(arguments[i]);
}
}
say(1, 2, 3);
// document.onmousemove = function (ev) {
// console.log('moving', ev);
// for(var i in ev){
// console.log("i: ", i, '-------------:',ev[i]);
// }
// };
function mousemoveHandler() {
console.log('mousemove');
}
function mousemoveHandler2() {
console.log('mousemove 2');
}
document.addEventListener('mousemove', mousemoveHandler);
document.addEventListener('mousemove', mousemoveHandler2); var cancelEve = (function (){
// document.onmousemove = null;
var i = 0;
return function(){
i++;
document.removeEventListener('mousemove', mousemoveHandler);
if(i == 2){
document.removeEventListener('mousemove', mousemoveHandler2);
}
}; })();
<script>

  

--------------------------------------------------------------------

通过 addEventListener() 可以对同一个事件绑定多个处理处理函数, 而通过 document.onmousemove = function(){//....}这样好像只能绑定一个处理函数。

取消事件绑定的话,后者只需要 document.onmousemove =  null 就可以了。

而前者,则需要通过  removeEventListener() 这个函数来取消绑定的事件, 需要一个一个取消绑定。

-----------------------------------------------------------

直接通过document.onmousemove = hh 绑定的事件,后面绑定的事件会覆盖掉前面绑定的事件。

    function mousemoveHandler() {
console.log('mousemove');
}
function mousemoveHandler2() {
console.log('mousemove 2');
}
document.onmousemove = mousemoveHandler;
document.onmousemove = mousemoveHandler2;
var cancelEve = function (ev) {
document.onmousemove = null;
}

  

上一篇:编写高质量代码改善C#程序的157个建议——建议142:总是提供有意义的命名


下一篇:Tessellation (曲面细分) Displacement Mapping (贴图置换)