關於js/jq的點擊事件，以及獲取 data-type 定義的值

一、

目前，個人認為最方便的點擊事件便是 onclick() 的調用方法的事件，不僅可以傳值，還可以避免一些不必要的麻煩：

頁面代碼：

<div onclick="thisOnClick(this)" id="測試(ID)" type="測試(type)" data-type="測試(data-type)">
    點擊我一下
</div>

js代碼：

function thisOnClick(e) {
    console.log("獲取到了當前元素的ID：",e.id);//獲取定義的id，結果：id="測試（id）"
    console.log("獲取到了當前定義的type：",e.getAttribute("type"));//獲取type:type定義的值，結果：type="測試（type）"
    console.log("獲取到了當前定義的data-type：",e.getAttribute("data-type"));//獲取data-type定義的值，結果：data-type="測試（data-type）"
    console.log("獲取到了當前定義的data-type：",e.dataset.type);// data-type(html5)，結果:data-type="測試（data-type)"
　　
　　console.log( $(this).attr('data-type') )//輸出的結果是 HTML中定義的 :data-type="測試（data-type)"

}

 

二、 

 使用 類 或者使用 id 進行綁定點擊事件，常用方式如下：

html代碼：

<div class="classStype1 jsClass" id="jsId" data-type="測試(data-type)">
    點擊我一下
</div>

jq代碼

// 用類
$(".jsClass").click(function (e) {
    console.log(e)
});

// 用ID
$("#jsId").click(function (e) {
    console.log(e)
});

//但是在如果html的代碼是動態渲染出來的，那么用上面的Dom方法是不行的，會觸發不了，因此有個新的方式：
$('body').on('click', '.jsClass', function (e) {
    console.log(e)
});

 

3、 當然，除了以上常用的 綁定id和 綁定class之外，還有就是綁定name了

jquery根據name屬性查找

$("div[id]")　　　　　　　　　　　　//選擇所有含有id屬性的div元素

$("input[name='keleyicom']")　　//選擇所有的name屬性等於'keleyicom'的input元素

$("input[name!='keleyicom']")　　// 選擇所有的name屬性不等於'keleyicom'的input元素

$("input[name^='keleyi']")　　　　//選擇所有的name屬性以'keleyi'開頭的input元素

$("input[name$='keleyi']")　　　　//選擇所有的name屬性以'keleyi'結尾的input元素

$("input[name*='keleyi']")　　　　//選擇所有的name屬性包含'keleyi'的input元素

$("input[id][name$='keleyi']") //可以使用多個屬性進行聯合選擇，該選擇器是得到所有的含有id屬性並且那么屬性以keleyi結尾的元素

//例如：
$(":input[name='keleyi']")// 表示查找的是name為keleyi的表單。