javascript - 了解 javascript 中的绑定(bind)

Question

我有一个带有 id settings-select 的选择元素。这是我绑定(bind)事件的两种不同方式。为什么即使在第二种方法中使用“绑定(bind)”后，“这个”值也没有绑定(bind)到选择元素。

   1. 
    $('body').on( 'change', '#settings-select', function() {
        console.log( $(this).val ); // outputs correct select value
    });

   2.
    $('body').on( 'change', '#settings-select', selectSettings.bind( this ) );

    function selectSettings() {
        console.log( $(this).val() );// Throws error. this -> window object. Why?
    }

Answer 1

当使用bind 时，this 不引用当前元素。它指的是 window 对象。

你只需要传递函数引用

$('body').on( 'change', '#settings-select', selectSettings)

根据评论，selectSettings 的一些参数。您可以使用 event.data

var x = 1;
$('body').on('change', '#settings-select', {
  value: x
}, selectSettings)

function selectSettings(event) {
  console.log(event.data.value, $(this).val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='settings-select'>
  <option>1</option>
  <option>2</option>
</select>