具有事件处理程序的Javascript点函数

Question

问题

我如何创建一个自定义javascript点函数，该函数与jQuery中的以下代码具有相同的作用：

$(document).on("click touchstart", ".someClass", function() {
   // code goes here
});

我想这样声明它：

$(".someClass").onClick(function () {
   // code goes here
});

它需要：

• 使用动态创建的元素（因此jQuery .on（）代替.click（））

• 处理计算机点击和触摸点击

• 理想情况下但不是强制性的，它将使用纯JavaScript编写（原型本身没有jQuery，但仍可以通过jQuery访问）

我尝试过的东西

Object.prototype.onClick = function() {
   $(document).on('click touchstart', this, arguments);
};

但是我在Chrome控制台中收到以下错误：

  

未捕获的TypeError：（（n.event.special [g.origType] || {} .handle || g.handler）.apply不是函数

我认为我的声明不正确，也许这也不是访问javascript中事件的正确方法。

Answer 1

您正在寻找事件委托，这使您也可以动态添加元素，但仍使它们响应点击。

const getDiv = (name) => {
  if (Array.isArray(name) === false) name = [name];
  let div2 = document.createElement('div');
  name.forEach(n => div2.classList.add(n));
  div2.innerText = `${name}`;
  return div2;
};

const makeDivs = () => {
  const div = document.querySelector('#main');

  const {
    dataset: {
      count: x
    }
  } = div;

  for (let i = 0; i < x; i++) {
    div.appendChild(getDiv('div2'));
    div.appendChild(getDiv('div3'));
    div.appendChild(getDiv(['div2', 'div3']));
  }
};

document.addEventListener('click', ({
  target
}) => {
  if (target.matches('.div2')) console.log('You clicked a DIV2');

  if (target.matches('.div3')) console.log('You clicked a DIV3 !!')

  if (target.matches('button')) makeDivs();

});

div {
  border: 1px solid red;
  margin: 5px;
}

<div id='main' data-count="10">

</div>
<button>Click Me!!!</button>

将其包装为自定义函数。

注意：我将selector参数更改为数组，这使您可以传递复杂的选择器，例如div.myClass li:hover

const getDiv = (name) => {
  if (Array.isArray(name) === false) name = [name];
  let div2 = document.createElement('div');
  name.forEach(n => div2.classList.add(n));
  div2.innerText = `${name}`;
  return div2;
};

const makeDivs = () => {
  const div = document.querySelector('#main');

  const {
    dataset: {
      count: x
    }
  } = div;

  for (let i = 0; i < x; i++) {
    div.appendChild(getDiv('div2'));
    div.appendChild(getDiv('div3'));
    div.appendChild(getDiv(['div2', 'div3']));
  }
};

document.on = (eventType, selector, callback) => {
  const events = eventType.split(' ');
  const selectors = (Array.isArray(selector)) ? selector : [selector];
  events.forEach(event => { document.addEventListener(event, (e) => {
      if(selectors.some(s => e.target.matches(s))) callback(e);
    });
  });
};

// Convenience method.
document.onClick = (selector, callback) => document.on('click', selector, callback);

// Simple
document.on('click', 'button', () => makeDivs());
document.on('click', '.div2', ({target}) => console.log('You clicked a DIV2'));

// Multi Event
document.on('click touchstart', '.div3', () => console.log('You clicked a DIV3'));

// Multi selectors
document.on('click', ['.div2', '.div3'], ({target}) => console.log('You clicked. !!'));

document.onClick('div', ({target}) => console.log('A Click Event!!'));

div {
  border: 1px solid red;
  margin: 5px;
}

<div id='main' data-count="10">

</div>
<button>Click Me!!!</button>

Answer 2

因此，您需要一种.onClick jQuery方法

jQuery.fn.extend({
  onClick: function(sel, cb) {
    return this.on('touchstart click', sel, function(evt) {
      evt.preventDefault();
      if (cb && typeof cb === 'function') cb.apply(this, arguments);
    })
  }
});



$(document).onClick('.someClass', function(ev) {
  console.log(ev.type)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="someClass">CLICK ME</p>

或更简单的变体：

$.fn.onClick = function(sel, cb) {
  return this.on('touchstart click', sel, cb);
};

$(document).onClick('.someClass', function(ev) {
  ev.preventDefault();
  console.log(ev.type)
});