绑定事件的几个方法总结-小白筆記-匯編語言學習筆記

绑定事件的几个方法总结

2023-09-05 阅读 283 评论 0

摘要：以click事件为例： 1. on方法两个好处： a.如果一个dom元素中有多个子元素，单独去给每个子元素绑定事件的话，会影响到性能。而现在使用on。则只用使此dom元素调用on方法，选择器用上其子元素，即可以所有符合条件的元素都能实现绑定。

以click事件为例：

1. on方法

两个好处：

a.如果一个dom元素中有多个子元素，单独去给每个子元素绑定事件的话，会影响到性能。

而现在使用on。则只用使此dom元素调用on方法，选择器用上其子元素，即可以所有符合条件的元素都能实现绑定。

$('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定click事件；

b.为动态添加的元素也能绑上指定事件； // (目前好像只有on方法可以实现此功能，其他好像都是针对已经加载好的元素定义事件)

$('ul li').on('click', function(){console.log('click');})的绑定方式和$('ul li').bind('click', function(){console.log('click');})一样；

通过js给ul添加了一个li：$('ul').append('<li>js new li<li>')；')；这个新加的li是不会被绑上click事件的

但是我用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件

即在事件委托绑定模式下，即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。

2. $("p").click(function(){

　　　　　alert("haha");　　

　　})

3.一般作为标签中的属性来使用onclick

<p οnclick="haha">nihao</p>

function haha(){

　　alert("onclick");

}

4. addEventListener(event,funtionName,useCapture)

obj.addEventListener("click",fn,fasle));
function fn(){
//do something..
}

二----------------------------------------------------------------------------------------------------------------------

其中on与addEventListener，on事件会被后面的on事件覆盖，而addEventListener则不会、

’

//obj是一个dom对象，下同
//注册第一个点击事件
obj.onclick(function(){
alert("hello world");
});
//注册第二个点击事件
obj.onclick(function(){
alert("hello world too"); //最终只会是这个
});

//注册第一个点击事件
obj.addEventListener("click",function(){
alert("hello world");
}));
//注册第二个点击事件
obj.addEventListener("click",function(){
alert("hello world too");
}));

、、

会连续输出：

hello world

hello world too

三-----------------------------------------------------事件的集合-----------------------------------------------------------------------------------------------------------------

1.鼠标事件：