演示地址：http://htmlpreview.github.io/?https://github.com/LN-dbz/Html_Study/blob/master/one.html
document.getElementById("add").onclick = function () {
$("#jq_btn3").append(' <button type="button" class="btn btn-info"> on(外层父级响应)#'+$("#jq_btn3 button").length+'</button>');
}
// 原生js
// 第一种 通过点击事件
document.getElementById("btn1").onclick = function () {
alert("这是第一种点击方式 \n通过点击事件");
console.log(this)
}
// 第二种 监听点击事件
document.getElementById("btn2").addEventListener('click', function () {
alert("这是第二中点击方式\n监听点击事件");
console.log(this)
})
// 第三种 通过方法响应点击事件
function JSthreeFn() {
alert("这是第三种点击方式\n通过方法响应点击事件");
console.log(event.target)
}
// 原始JS给相同Class增加点击事件
var listClass = document.getElementsByClassName('JScalss1');
for (var i in listClass) {
listClass[i].onclick = function () {
alert("这是第四种点击方式\n原始JS给相同Class增加点击事件\n一般用jQuery了");
console.log(this)
}
}
// 原生JQuery点击事件
// 第一种 click函数
$("#jq_btn1").click(function () {
alert("这是第五种点击方式\n click函数");
console.log(this)
})
$("#jq_btn2").on("click", function () {
alert("这是第六种点击方式\n 自身on函数");
console.log(this)
})
$("#jq_btn3").on("click", "button", function () {
alert("这是第七种点击方式\n外层父级响应 on函数");
console.log(this)
})