Question

我想添加和事件监听器到一个按钮，我仍然相对较新的编码完全基于javascript，所以我不知道什么是$this

的本机等价物

在我的代码中

// the markup

<ul class="menu">
   <li><a href="#" data-something="value">text</a></li>
   <li><a href="#" data-something="value2">text2</a></li>
</ul>

var menu = document.querySelector(".menu");
menu.addEventListener("click", function(){
    // console.log $(this).val
    // what I wanted is to get that data-attribute of the clicked item
});

Answer 1

在事件处理程序this中将表示事件处理程序绑定到的元素。您将不会拥有jQuery提供的所有实用程序功能。因此，在您的示例中，您将无法使用this.data("something")

检索数据属性

要检索自定义属性的值，代码必须将事件传递给函数。从示例中的event或e开始，target属性将包含触发事件的元素，该元素可能并不总是事件处理程序绑定到的元素，因为事件的传播。使用getAttribute方法检索自定义属性的值。另外，不要将自定义属性设置为大写，因为html规范不允许这样做，并且会创建不可访问的属性。

var menu = document.querySelector(".menu");
menu.addEventListener("click", function(e){
    alert(e.target.getAttribute("data-something"));
});

JS小提琴： http://jsfiddle.net/pjcvB/

Answer 2

您可以使用以下代码获得几乎等效于document.querySelector("#myId").addEventListener("click", function(e) { console.log(this); //Prints the Element $this = new Array(e.target); console.log($this); //Prints the Object });

Route::group(['prefix' => 'support', 'middleware' => ['role:admin', 'web']], function() {
    Route::get('threads', 'ThreadController@index');
});

PEN

希望这有帮助。

在本机javascript中等价$（this）

2 个答案: