Question

有人能指出我的解决方案吗？我正在尝试为这个jQuery代码找到一个JS等价物：

var formSelector = 'my selector here';
var attribute = 'name';
var formHistory = [];

$(formSelector).one('focusout', function(e) {
    formHistory.push(e['target'].getAttribute(attribute));
});

Answer 1

在eventlistener回调中，只需销毁事件监听器:) 这是辅助功能：

＆＃13;

function oneTimeEvent(element, eventType, callback) {
  element.addEventListener(eventType, function(e) {
    e.target.removeEventListener(e.type, arguments.callee);
    return callback(e);
  });
}

var btn = document.querySelector('button');
oneTimeEvent(btn, 'click', function () {
  alert('♫ You clicked me once, but I won\'t let you click me twice, yeah!');
});

＆＃13;

<button>Click me!</button>

＆＃13;

Answer 2

这是一个使用数据属性的非常简单的解决方案。

＆＃13;

document.querySelector('#click').addEventListener('click', function(e){
    if(e.currentTarget.dataset.triggered) return;
    e.currentTarget.dataset.triggered = true;
    alert('clicked');
})

＆＃13;

<button id="click">Click me</button>

＆＃13;

Answer 3

您可以在传递给addEventListener()的using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; using CrystalDecisions.CrystalReports.Engine; using System.Data.SqlClient; namespace WindowsFormsApplication1 { public partial class print : Form { SqlConnection con = config.getConnection(); ReportDocument crypt = new ReportDocument(); public print() { InitializeComponent(); } private void print_Load(object sender, EventArgs e) { con.Open(); SqlDataAdapter sda = new SqlDataAdapter("SELECT * FROM PersonalInformation", con); DataSet dst = new DataSet(); sda.Fill(dst, "employeesinformation"); crypt.Load(@"C:\Users\ASPIRE\Documents\mao ni\WindowsFormsApplication1\WindowsFormsApplication1\CrystalReport1.rpt"); crypt.SetDataSource(dst); crystalReportViewer1.ReportSource = crypt; crystalReportViewer1.Refresh(); con.Close(); } } }参数中使用once: true。

浏览器支持：不支持Chrome 55 +，Firefox 50 +，Safari 10，Edge 16，IE。

options

document.getElementById('foo').addEventListener('click', function(e) {
  alert('This will be displayed only once.');
}, { once: true });

参考：

Answer 4

使用ES6和一些闭包这是一个很好的方法。

const button = document.querySelector('button');

function composeHandler(element, event, handler, ...captureArgs) {
  return function handlerFunc (...args) {
  	handler(...args);
    element.removeEventListener(event, handlerFunc, ...captureArgs);
  }
}

function addEventListenerOnce(element, event, handler, ...captureArgs) {
	element.addEventListener(event, composeHandler(element, event, handler, ...captureArgs), ...captureArgs);
}

addEventListenerOnce(button, 'click', (e) => alert('clicked on button ' + e.target.innerText), true)

<button>
  Click me once!
</button>

Answer 5

尝试编写one的实现。像这样：

function one(element,eventType,callback,self) {
    var one=function(event) {
        try{
            callback.call(self,event);
        } finally {
            element.removeEventListener(eventType,one);
        }
    }
    element.addEventListener(eventType,one);    
}

JS等效于jQuery one（）

5 个答案: