0

誰もが「インラインイベントを使用しないでください」という答えを出す前に、最初に、インラインイベントを使用していないことを最初に言わせてください。他の人がコーディングしたものをクリーンアップしたいだけです。すべてのコード。

そこで、代わりにインライン イベントを jQuery イベントに転送する小さな関数を作成しましたが、一部で new Function() を使用しています。それは機能しますが、一般的にきれいにするためにクリーンアップできることを私は知っています。

var transferInlineEvents = function(element){

    var attributes = $(element).get(0).attributes;
    $(attributes).each(function(i){
        if (/^on/.test(this.name)) {
            var handler = this.name.replace(/^on/, '');
            var evt = this.value;
            evt = evt.replace('$(this)', "$('#"+$(element).attr('id')+"')");
            $(element).on(handler, function(){
                var newEvent = (jQuery.support.boxModel) ? new Function([evt]) : evt;
                newEvent();
            });
            $(element).removeAttr(this.name);
        }
    });

};

これにより、本質的に次のようになります。

<input type="text" name="myinput" id="myinput" onclick="$(this).val('');" value="Enter your name..." />

これに：

<input type="text" name="myinput" id="myinput" value="Enter your name..." />

$('#myinput').on('focus', function(){
    $('#myinput').val('');
});

new Function を使用しない方法がわからないので、すべてのブラウザーで機能し、作成方法がわからないので、これを置き換える必要はありません。

どんな助けでも大歓迎です。

4

3 に答える 3

0

あなたの引用に従って:Any help is appreciated.

オプション 1

以下のコードでは を使用しevalているので注意してください。これは、JavaScript プログラミングの一部ではなく、安全でないことが知られています。

これはクロスブラウザで十分だと思います：

var transferInlineEvents = function(element){

    var attributes = $(element).get(0).attributes;
    $(attributes).each(function(i){
        if (/^on/.test(this.name)) {
            var handler = this.name.replace(/^on/, '');
            var evt = this.value;
            evt = evt.replace('$(this)', "$('#"+$(element).attr('id')+"')");
          $(element).on(handler, function() {
                console.log('event activated', evt);
                var newEvent = eval('(function(){'+evt+'});');
                newEvent();
            });
            $(element).removeAttr(this.name);
        }
    });

};

$("input").each(function(i, element) {
    transferInlineEvents(element);
});

ここでデモを見つけることができます。

オプション 2

インラインコードが単純でそれほど複雑ではないことがわかっている場合の別のアプローチは、インライン関数のすべての引数を正規表現でチェックし、それぞれに個別の関数を作成することです。

これは一般的に安全ですが、複雑なコードでは機能しません。

var transferInlineEvents = function(element){

    var attributes = $(element).get(0).attributes;
    $(attributes).each(function(i){
       if (/^on/.test(this.name)) {
          var handler = this.name.replace(/^on/, '');
          var evt = this.value;
          var actions = evt.split(';');
          var functions = [];
          for ( var action = 0; action < actions.length; action++ ) {
             var methods = actions[action].split('.');
             for ( var method = 1; method < methods.length; method++ ) {
               /* If it is val attribute */
               if ( /^val\(/.test(methods[method]) ) {                 
                 var value = methods[method].substr(4).replace(/^('|")/, '').replace(/\)$/, '').replace(/('|")$/, '');
                 functions.push( function() { $('#'+element.id).val(value) } );
               }
             }
          }
          if ( functions.length > 0 ) { 
            $(element).on(handler, function() {
              for ( fn = 0; fn < functions.length; fn++ ) {
                console.log('fireing up function');
                functions[fn]();
              }
            });
            $(element).removeAttr(this.name);
          }
        }
    });

};

デモ: http://jsbin.com/osevop/1/edit

于 2013-05-07T06:17:53.587 に答える
0

多くの読書と検索の後、eval() または new Function() を使用せずにこれを行う方法はないようです。そして、後者の方がわずかに優れているので、私はそれで行きます。また、eval() と new Function() は、ユーザーが操作できる入力の一部である場合にのみ安全ではないことに注意してください。これは私の状況では当てはまらないので、これは安全だと思います。

これにより、'on' プレフィックスを持つすべてのインライン イベントが jQuery バインド イベントに変換され、インライン イベントが削除されます。

;(function ($) {
    $.fn.transferInlineEvents = function () {
        var el = this;
        var attributes = el.get(0).attributes;
        $(attributes).each(function(i){
            var oEvent = this.name;
            var oFunc = $.trim(this.value);
            if (/^on/.test(oEvent)) {
                var nEvent = oEvent.replace(/^on/, '');
                var nFunc = new Function(oFunc);
                el.removeAttr(oEvent);
                el.bind(nEvent, nFunc);
            }
        });
    };
})(jQuery);

ここでテストしてください: http://jsfiddle.net/9vXtm/2/

于 2013-05-07T16:13:13.633 に答える