第一百一十八章 一触即发

前面这几章的东西,我们明白它们将来有很大的用途,但是目前,我们不能用它做很多的事情。最大的限制就是不知道如何让我们的代码在合适的时间去执行。

如果我们按照正常的顺序,继续讲解下去,这样就会积累很多,看起来仿佛明白了,但是限于当前知识面,而无法深入练习的内容。然后就开始有些迷糊,进而陷入混沌,最终走向放弃……(我知道,这种事情大家应该都尝试过的。

那我们还坚持什么顺序?!

我会的,虽然很少,但是我玩的溜呀~(贱兮兮的笑脸

反正我不管那么多,我要讲一个触发事件,这样无论是前面的内容还是后面的内容,我们都更方便控制了。

找了这么多理由,搞得这么正式,其实这个触发特别简单( JQ 里面好像没几句复杂的语法……并不,只是初级使用很简单,高级部分还是很厉害的[1]

反正从头到尾就这一句语法嘛~

<button id="ding"></button><script>$('document').ready(function(){$('#ding').click(function(){alert('你再点我一下试试!')});});</script>

简单解析一下,首先我们网页中有一个按钮。然后抛开那些固定的结构不说,我们说当这个按钮元素(#ding),被点击(click)的时候,执行后面小括号中的内容。

你会发现这和用来等待文档加载完成的,这个固定语句,是完全一样的结构。

强调一下,后面那个小括号,里面的内容相当于函数的参数,那就应该是用逗号分割的几项,当然也可以是一项,或者没有。给出一个表达式也可以,会用这个表达式最后的结果来参与运算。但不能给出用分号分隔的几个语句,这不是符合预期的参数。

所以后面我们都会写上一个函数,表示把这个函数对象作为参数传递给它。这就是我通常所说的,用函数打包当作一个整体。

这里的点击是一个事件,就是当点击这个事情发生的时候。同样的,ready 也是一个事件。

后面给出的函数,你可以认为也是一个事件。或者换个说法,后面的函数被执行,这是一个事件的发生。它启动了,电灯打开了,文档准备好了,按钮被点击了……这都是一个事件的发生。

现在我们描述的,当这个按钮被点击,这个事件发生的时候,后面的函数将会被执行,另一个事件就发生了。可以说这两者联动了,也可以说我把两者绑定在了一起,这就是事件的绑定,说的稍微准确一点,我把后面这个函数绑定在了按钮,被点击这个事件上。

现在有了这个触发方法,我们前面学到的内容就可以用来做更多的事情,比如输入一个数字,然后点击按钮,会输出这个数字的平方,大家可以尝试做一下这样的练习。

要注意的有几个点:

  • 不要使用表单,只使用输入框就好。因为一旦设定表单,那么表单中的按钮默认是提交这个表单,也就会产生跳转。如果没有设定提交到的目标,会表现为页面被刷新。而页面一旦刷新,刚才执行的代码就全部被重置了。虽然有办法消除这一现象,但是我们眼下的练习,又何必增加那几重麻烦呢?
  • 因为函数是放在小括号里面的,所以最后那个大括号后面还有一层小括号,这个不能丢。因为语法都是类似的,而函数中又可以有很多语句,最后的大括号小括号究竟和谁对应就很容易分不清,所以建议在最后的大括号和小括号的后面加上注释,写清这是和前面哪里对应的。

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

0

评论0

请先

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