第一百三十七章 再次点击

写下标题之后,我却开始迷茫了。那么多事件,对,我们的是入门教程,可……那么多常用事件,我按部就班的像复述文档一样给大家讲,大家能记住多少?或者我应该问,我们距离厌倦,还有几章?

所以我们得换个方法,毕竟它们都是同一类的东西,肯定是具有许多相似性的。我们也可以用类似的方法去单独的研究它们每一个,于是我先讲方法吧。

就从我们已知的一个事件讲起,点击,click。但凡肯动手操作一下的同学,对这个事件肯定已经不陌生了,因为前面我们所讲的各种效果想要触发,都是靠的它。毕竟我也就只告诉了你们这一个触发的方法。

那它支持冒泡吗?

这个问题问的,我怎么记得住啊?与其提问还不如查文档。不过文档我都懒得查,那么多事件,每次都去查文档,也挺烦的。(把你们偷懒的借口我都说了,让你们无话可说,小老鼠可真机智呀~

那就试一下呗,反正写个三两行代码,对于每个事件的测试,代码几乎都是一样的。

<style>#miao {width: 200px;height: 200px;background-color: yellow;}#mi {width: 100px;height: 100px;background-color: blue;}</style><div id="miao"><div id="mi"></div></div>

就这样写上两个元素,真的是毫无难度呢~

然后给两个元素分别添加事件,当然要添加相同的事件。然后我们去触发子元素的这个事件,如果父元素的事件也被同时触发,那就是发生了冒泡:

$(document).ready(function(){$('#miao').click(function(){ console.log('触发了子元素的事件') })$('#mi').click(function(){ console.log('触发了父元素的事件') })})

然后我们点击一下里面蓝色的元素,看看输出是怎样的就好了。

我是想说,我们讲了好多知识,记不住没关系,搞不太懂也没关系,稍微动手尝试一下,就可以很明确的获得答案。就只是这么一步之遥,仅仅需要你自己迈过去而已。

我们前面对于 click 的所有应用,都会给它一个函数对象作为参数。就是把这个函数绑定在这个事件之上。

如果我们不给他参数呢?那么这个方法,诶,我说的是方法。这个方法就用来触发,对应元素被鼠标单击这个事件。

当然这时候鼠标并没有真的去点击它,但这又有什么关系呢。就像真的被点击一样,绑定在这个事件上的操作,被触发了。

<div id="button-1">按钮 一</div><div id="button-2">按钮 二</div>

搞出来两个按钮,然后:

$(document).ready(function(){$('#button-1').click(function(){ console.log('按钮一被触发了') })$('#button-2').click(function(){console.log('按钮二被触发了');$('#button-1').click();})})

如果按钮一被点击那么就让它输出一条日志;如果按钮二被点击,在输出日志的同时尝试去触发,按钮一被点击这个事件。

这代码一点都不复杂吧?基本都是我们前面所学过的,而且应该是反复使用过的内容。当对一项知识似懂非懂的时候,就应该自己去尝试设计一种方法来验证这个知识,这是一种非常有效的学习方法。

刚才说到了什么?方法,对,我们好像说 click 是事件,又说它是方法?

元素被点击,这是事件。事件会在某一个点发生。我们想把我们的操作和这个时间点绑定,用什么方法去完成这个绑定的操作呢?click() 方法。

元素被点击,这个事件,我们可以用什么方法使它发生呢?click() 方法。

请注意体会其中的区别。

好在先记住用法,就可以很好的使用了。至于这些细节上的咬文嚼字,弄懂了当然是极好的,而且也是有必要的。但并不需要急于一时,用的多一点,遇到的情况多一点,自然就会理解了。这就有些“书读百遍,其义自现”的意思。

原文链接:https://www.ek58.com/archives/3799,转载请注明出处。

0

评论0

请先

没有账号? 注册  忘记密码?