zoukankan      html  css  js  c++  java
  • Element.Event

    addEvent(type,fn):为DOM元素增加一个事件监听器

    removeEvent(type,fn):移除先前为DOM元素添加的事件监听器 

    eg:

    var destroy = function(){ alert('Boom: ' + this.id); } // this refers to the Element.
    $('myElement').addEvent('click', destroy);
     
    //later...
    $('myElement').removeEvent('click', destroy);

    addEvents(events):一次为一个DOM元素添加多个事件监听器

    eg:

    $('myElement').addEvents({
        mouseover: function(){
            alert('mouseover');
        },
        click: function(){
            alert('click');
        }
    });

    removeEvents(events):移除DOM元素上某个类型的事件的所有监听器

    var myElement = $('myElement');
    myElement.addEvents({
        mouseover: function(){
            alert('mouseover');
        },
        click: function(){
            alert('click');
        }
    });
     
    myElement.addEvent('click', function(){ alert('clicked again'); });
    myElement.addEvent('click', function(){ alert('clicked and again :('); });
    //addEvent will keep appending each function.
    //Unfortunately for the visitor, there will be three alerts they'll have to click on.
    myElement.removeEvents('click'); // saves the visitor's finger by removing every click event.


    fireEvent(type[,param,delay]):执行一个DOM元素上某个类型的事件的所有监听器,多用于需要在特定的时间或者场合下触发事件时

    eg1:

    function test(a) {
      console.log(a);
    }
    $("btn1").addEvent('click', test);
    $("btn1").addEvent('click', function() {
      console.log('btn1 click event run')
    });
    
    $("btn1").fireEvent("click", "hello,world");

    这个例子中代码将在页面一加载完就执行,而不需要等到click btn1时才执行。下面这个例子将更好的说明fireEvent的使用场合:

    textarea.addEvents({
        focus: function() {
          // When focusing, if the textarea contains value "Type here", we
          // simply clear it.
          if (textarea.value.contains('Type here')) textarea.set('value', '');
        },
    
        keyup: function() {
          // When user keyups we check if there are any of the magic words.
          // If yes, we fire our custom event burn with a different text for each one.
          if   (textarea.value.contains('hello')) textarea.fireEvent('burn', 'hello world!');
          else if (textarea.value.contains('moo')) textarea.fireEvent('burn', 'mootools!');
          else if (textarea.value.contains('pizza')) textarea.fireEvent('burn', 'Italy!');
          else if (textarea.value.contains('burn')) textarea.fireEvent('burn', 'fireEvent');
          // note that in case of 'delayed', we are firing the event 1 second late.
          else if (textarea.value.contains('delayed')) textarea.fireEvent('burn', "I'm a bit late!", 1000);
        },
        burn: function(text) {
          // When the textarea contains one of the magic words
          // we reset textarea value and set the log with text
          textarea.set('value', '');
          log.set('html', text);
          // then we start the highlight morphing
          highlight.start({
            backgroundColor: ['#fff36f', '#fff'],
            opacity: [1, 0]
          });
        }
      });
    

    注意标红部分。

    结合这两个例子,想必fireEvent的用法已经很清楚了。

    cloneEvent(from[,type])从一个DOM元素上复制所有监听器到本元素:

    eg:

    function test(a) {
      console.log(a);
    }
    $("btn1").addEvent('click', test);
    $("btn1").addEvent('click', function() {
      console.log('btn1 click event run')
    });
    $("btn1").fireEvent("click", 123);
    $("btn2").cloneEvents($("btn1"));

    将btn1上绑定的事件复制给btn2





  • 相关阅读:
    flutter-布局(水平和垂直)
    flutter-GridView(网格列表)
    flutter-ListView(列表组件)
    flutter-图片组件(Image)的使用
    flutter-container-容器
    flutter-hello flutter 并且修改字体
    nginx
    初步学习next.js-7-打包
    初步学习next.js-6-使用antd
    初步学习next.js-5-编写css样式和lazyloading
  • 原文地址:https://www.cnblogs.com/riskyer/p/3315465.html
Copyright © 2011-2022 走看看