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 控制台中收到以下错误：

Uncaught TypeError: ((n.event.special[g.origType] || {}).handle || g.handler).apply is not a function

我想我的声明不正确，也许这也不是访问 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)
});

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

Javascript dot function with event handlers

javascript

jquery

prototype

dom-events

问题

我试过的