html事件绑定的方法,【JavaScript系列】动态绑定事件方法：(1)jquery的on方法；(2)html元素绑定...

最新推荐文章于 2024-10-18 12:43:31 发布

转载最新推荐文章于 2024-10-18 12:43:31 发布

· 793 阅读

文章标签：

一、动态监听加载对象

当使用js或jQuery动态创建元素(例如append，appendChildren)，再用on(事件, function(){...})或addEventListener监听事件时，事件并不会触发，因为传统的$('.selector').click()只能监听html初始的对象，对于动态加载的操作，需要在加载后给他的操作行为绑定方法。

所以，我们可以使用jQuery的on()事件来获取未加载页面的内容，并为它添加一个或多个事件处理程序。

二、jQuery.on()用法

1、定义和用法

(1)on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

(2)自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

(3)注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

(4)提示：如需移除事件处理程序，请使用 off() 方法。

(5)提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

2、语法

$(selector).on(event,childSelector,data,function)

三、事件绑定方式执行顺序：html属性 > dom元素(onclick方法)

先看例子1

点击这个段落。

$(document).ready(function () {

// onclick这个是通过 dom元素属性绑定事件，只能有一个事件执行. DOM level 0

var a = document.getElementById('p-style');

a.onclick = function () {

console.log("6、段落被点击了。");

};

a.onclick = function () {

console.log("7、段落被点击了。");

};

});

// 通过 html属性绑定事件，只能有一个事件执行

function htmlOnclick() {

console.log("4、段落被点击了。");

}

输出结果：

7、段落被点击了。

说明：4和6绑定的点击事件被7的事件覆盖。

分析：

(1)不同绑定事件方式的执行顺序：html属性 > dom元素属性

(2)同一种绑定事件方式顺序：写在前面 > 写在后面

说明：实际项目中，jq和原生js不要混着用。

四、事件绑定方式执行顺序：html属性 > dom元素(onclick方法) > DOM level 2 事件

我们看个栗子

点击这个段落。

$(document).ready(function () {

var a = document.getElementById('p-style');

// 这个on的方法，click方法，原生的addEventListener原理一致. DOM level 2

$("p").on("click", function () {

console.log("1、段落被点击了。");

});

$(".p-style").on("click", function () {

console.log("2、段落被点击了。");

});

$(".p-style").click(function () {

console.log("3、段落被点击了。");

});

$(".p-style").click(function () {

console.log("5、段落被点击了。");

});

a.addEventListener('click',function(){

console.log("8、段落被点击了。")

})

a.addEventListener('click',function(){

console.log("9、段落被点击了。")

})

// onclick这个是通过 dom元素属性绑定事件，只能有一个事件执行. DOM level 0

a.onclick = function () {

console.log("6、段落被点击了。");

};

a.onclick = function () {

console.log("7、段落被点击了。");

};

});

// 通过 html属性绑定事件，只能有一个事件执行

function htmlOnclick() {

console.log("4、段落被点击了。");

}

输出结果：

7、段落被点击了。

1、段落被点击了。

2、段落被点击了。

3、段落被点击了。

5、段落被点击了。

8、段落被点击了。

9、段落被点击了。

说明：通过addEventListener方式绑定事件(jq的on方法，js的click方法)是可以绑定多个事件。

分析：

(1)不同的绑定方式执行顺序：html属性 > dom元素(DOM level 0 事件) > DOM level 2 事件。

(2)DOM level 2 事件中：谁先绑定谁先执行。

(3)jq的on，js的click，addEventListener，可以绑定多个事件。

说明：实际项目中，jq和原生js不要混着用。

五、动态绑定：jq的on方法+html的属性onclick方法

实用jq或者原生js创建元素(比如：append，appendChild，insertBefoe等)，实用on(event, fun)或者addEventListener等传统的监听事件，事件不会触发。原因：不能这些方法只能监听到html初始化的对象，后续动态添加的方法需要寻找其他绑定方法。jq的on()方法+html的属性onclick方法。

$(document).ready(function () {

$("#btn1").on("click", function () {

var oli = document.createElement('li');

var otxt = document.getElementById("txt1");

var oul = document.getElementById("ul1");

oli.innerHTML = otxt.value + '删除';

ali = oul.getElementsByTagName("li");

if (ali.length > 0) {

oul.insertBefore(oli, ali[0]);

}

else {

oul.appendChild(oli);